Sitefinity CMS MVC widgets come with property editors, based on the Bootstrap framework and AngularJS. For the UI of these widgets, Sitefinity CMS provides predefined packages based on different frontend frameworks that provide built-in styling options for your website.
This article demonstrates how to create a custom Message widget, which you can register in Sitefinity toolbox afterwards.
IMPORTANT: When you create a custom MVC widget, make sure the file names comply to the naming conventions. For more information, see Naming conventions.
Open your project in Visual Studio.
Depending on whether you are creating the widget in the Sitefinity project or in an external assembly, you do one of the following:
NOTE: You can also create the Class Library outside of the SitefinityWebApp project in an external project. For more information, see Create widgets in external assemblies.
AssemblyInfo.cs
using Telerik.Sitefinity.Frontend.Mvc.Infrastructure.Controllers.Attributes;
[assembly: ControllerContainer]
Create the custom model
The model represents the data your application works with. This example uses plain C# classes for the model. In general, classes are not persisted in storage. To create the custom model, perform the following:
Models
MessageWidgetModel.cs
Create the controller
The controller stores all the Action methods of your widget. You need to also add the required Index action that returns a specific view. Finally, you implement the Controller class.
Controllers
IMPORTANT: The class must have the suffix Controller in its name.
MessageWidgetController.cs
In the code above, you build the model and pass it to the view. That is, you define the actions that correspond the UI, relative to the page, on which you place the widget. Your controller must inherit the System.Web.Mvc.Controller class. You add an Index method that returns an object of type ActionResult. The Index action returns a list of items from the model. You modify the code of the Index action to populate the Message of the Model. In addition, you decorate the controller with the ControllerToolboxItem attribute, which automatically registers your widget in the Sitefinity toolbox. For more information, see Register new widgets in Sitefinity CMS toolbox.
System.Web.Mvc.Controller
Index
ActionResult
Message
Model
NOTE: If you are using binding redirects and a Sitefinity CMS version from 12.2.7200 to 12.2.7231, you need to disable the Use cached controller container assemblies option or your custom widgets are not going to be registered. The option is available at Administration » Settings » Advanced » Feather.
Create the view You implement the view that shows the message from the model, populated in the controller. Perform the following:
Mvc/Views/MessageWidget
NOTE: If you are creating the widget in an external project, in the Properties section of the files, set its Build Action to Embedded Resource. Make sure the Sitefinity version referenced in the external assembly is the same as the one your project is using.
NOTE: The Raw helper method is introduced in MVC 3 and it helps to output any HTML without encoding it. You use the Raw method only when you trust the source of the embedded resource. In case you want to ensure your HTML content is safe, leverage Sitefinity CMS HTML sanitization.
Raw
Sign up for our free beginner training. Boost your credentials through advanced courses and certification. Register for Sitefinity training and certification.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important