Create a Book widget | MVC

The following tutorial demonstrates how to create a simple MVC Books widget. You leverage the attribute routing of MVC 5 in the context of a Sitefinity CMS widget. The Books widget displays a list of books on the frontend and tracks on the client the points retrieved for each book.

1. Clone the MVC samples repository.
2. Build the BooksWidget project, located in the AttributeRouting sample.
3. Reference the BookWidget.dll from your Sitefinity web application.

Sitefinity CMS makes it possible to have MVC widgets that are stored in separate assemblies. The following sample creates the Books widget in a separate assembly.

Perform the following:

1. Create a new class library named BooksWidget.
2. In Visual Studio, in the Package Manager Console, make sure BooksWidget project is selected as default project.
   Install the required packages:
   • Telerik.Sitefinity.Core
   • Telerik.Sitefinity.Mvc
   • Telerik.Sitefinity.Feather
3. Modify the AssemblyInfo.cs by adding the following code:
4. Create the following folders:

• MVC
• MVC\Views
• MVC\Views\Books
• MVC\Controllers
• MVC\Scripts

In the MVC/Models folder, create a new class named Book. The class needs to have:

• Author property
• Title property
• Points property
• Vote method to increment the points

The Book class should look similar to the following:

Next, in the MVC/Models folder, you create a new class named BooksViewModel. The class needs to have the following properties:

• PageCount
• CurrentPage
• NextPageUrl
• PreviousPageUrl

The BooksViewModel class should look similar to the following:

Perform the following:

1. In folder MVC/Controllers, create a new class that derives from the System.Web.Mvc.Controller class and name it BooksController.
2. Add the fields to the BooksController class.
3. Create an Index action with route relative to the current page. The action accepts the page number as an argument.
4. Create Points and Vote actions with a direct route, so that they can be accessed with AJAX calls.
5. Add a ControllerToolboxItem attribute to the BooksControllerclass.
   Thus, Sitefinity CMS automatically adds the Books widget in the toolbox.

Use the following code sample:

You need to create an Index view, because this is the only view that is used by the BooksController. To do this, you must create a new Razor view named Index and to place it in the MVC/Views/Books folder. 
To create the Index view, use the following code:

NOTE: You can create a Razor view in a class library project by selecting HTML Page from the Add New Item dialog, and then renaming the file extension to .cshtml. In the file properties, set the view as Embedded Resource.

In the  MVC/Scripts folder, create a JavaScript file named books-widget.js. This script will retrieve and update the books' points calling the JSON actions:

NOTE: Be sure to mark the script as an Embedded Resource in the file properties.

You can now build the project and test the result by placing the Books widget on a page.