.NET Core widget components

Overview

The following article describes the different parts that constitute a .NET Core widget. It also specifies where you should place them and how should you name them.

GITHUB EXAMPLE: All the samples are taken out of the Sitefinity data widget that you can find in Sitefinity GitHub repository.

ViewComponent (required)

Location

/ViewComponents/SitefinityDataViewComponent.cs

Naming convention

The name of the class must have the ViewComponent suffix.

Description

The ViewComponent class must comply with the following:

  • The class must be public.
  • The class must be marked with the [SitefinityWidget] attribute.
    This way, the widget is loaded and displayed during the page editing, inside the Sitefinity CMS widget selector.
  • The class must contain a public InvokeAsync method which receives as argument IViewComponentContext<SitefinityDataEntity>, where SitefinityData is the name of your widget.

For more information, see Microsoft documentation » View components in ASP.NET Core.

Sample

Following is an example of a ViewComponent class:

View (required)

Location

/Views/Shared/Components/SitefinityData/Default.cshtml

Naming convention

The naming of the folders where you place the Default.cshtml is strict.
SitefinityData folder is the name of your widget.

RECOMMENDATION: We recommend naming the view Default.cshtml

Description

In this folder, in addition to the Default.cshtml, you can place all views available for a particular ViewComponent.

Sample

Following is an example of a View file:

Entity (optional)

Location

/Models/SitefinityData/SitefinityDataEntity.cs

Naming convention

The name of the class must have the Entity suffix.

Description

The Entity class represents the data that is persisted in the database. This separates the logic for persisting the values of the properties, kept in the Entity class, from the business logic for the view components, kept in the Model class 

The Entity class presents only plain public properties with get or set. This is visualized in Sitefinity CMS backend, through the widget property editors. The widget editor autogenerates a separate field for each property of the entity. 

You can use attributes and data annotations to configure the look of the fields or their visibility, to group them in sections and categories, to set their default values, to validate them, etc.
For more information, see Autogenerated widget property editors for ASP.NET Core.

Sample

Following is an example of an Entity class:

Model (optional)

Location

/Models/SitefinityData/SitefinityDataModel.cs and
/Models/SitefinityData/ISitefinityDataModel.cs

Naming convention

The name of the class must have the Model suffix.

Description

This classes contains the business logic of the widget. They receive the data from the entity and process it to generate a ViewModel with the data needed by the View.

RECOMMENDATION: Although none of these classes are required, we recommend you add all logic for the widget in them, including the requests to Sitefinity CMS services and to third-party providers. 

Sitefinity CMS built-in widgets, expose an interface for the model and take advantage of the built-in ASP.NET Core dependency injection mechanism to provide capability for replacing and extending the default logic.

Sample

Following is an example of a Model class:

Following is an example of the model interface class:

ViewModel (optional)

Location

/Models/WidgetName/WidgetViewModel.cs

Naming convention

The name of the class must have the ViewModel suffix.

Description

This class is intended to contain Plain old CLR object (POCO) for providing data to the widget view. You can have more than one ViewModel class for a single widget, depending on the specifics of your different views.

RECOMMENDATION: We recommend using a ViewModel class to separate the logic of the view from the business logic.

Sample

Following is an example of a ViewModel class:

Want to learn more?

Sign up for our free beginner training. Boost your credentials through advanced courses and certification.
Register for Sitefinity training and certification.

Was this article helpful?

Next article

Configure output cache