Create widgets in external assemblies

Sitefinity CMS enables you to create custom widgets outside of the SitefinityWebApp project and distribute them between projects as standalone .DLL files. Thus, the custom widget is contained in its own assembly, including its views. This brings convenience in terms of:

• Easier management of widgets and files when modifying them
• Versioning of widget assemblies
• Reuse widgets by distributing them as NuGet packages across multiple projects
• Optimization of folder structure

Create the project and the folder structure

When building an MVC widget in external assembly the first step is to add a class library to the Sitefinity solution in Visual Studio.

Next, build the folder structure of your project:

1. Open your project in Visual Studio.
   If needed, save the solution file.

2. In the context menu of the solution, click Add » New Project…

3. In the left pane, select Visual C# » Windows Desktop.

4. Select Class Library and name it MessageWidget.

   NOTE: You can also create the Class Library in the SitefinityWebApp project and not necessarily in an external project.

5. Add the core Project Feather and Sitefinity API to the class library. To do this, use the NuGet Package Manager and execute the following commands:

   • Install-Package Telerik.Sitefinity.Core

   • Install-Package Telerik.Sitefinity.Feather.Core

     NOTE: Make sure Telerik.Sitefinity.Feather.Core NuGet package in the class library project is the corresponding version as the one in the SitefinityWebApp project.

6. Under MessageWidget class library, expand the Properties node and open the Assembly.cs file. Add the following:
   using Telerik.Sitefinity.Frontend.Mvc.Infrastructure.Controllers.Attributes; [assembly: ControllerContainer]

7. Inside the created class library, delete the class that is automatically created by Visual Studio.

8. Reference your external project from the SitefinityWebApp project.

9. Under the new class library, create a new folder and name it Mvc .

10. Inside folder Mvc, create three new folders - Controllers, Models, and Views.

11. Under folder Views, create a new folder and name it MessageWidget.

12. Create the custom model, view, and controller. For detailed steps, see Create widgets.

Enable Visual Studio Code IntelliSense for MVC views in external assemblies

When creating the MVC views and .CSHTML files in an external assembly , the Code IntelliSense feature of Visual Studio is not enabled and you do not get the suggestions and autocomplete for your code.

NOTE: You need to make sure Telerik.Sitefinity.Feather.Core NuGet package in the class library project is the corresponding version as the one in the SitefinityWebApp project. 

To enable Code IntelliSense in Visual Studio:

1. Close all currently open .CSHTML files.

2. In the context menu of the Class Library node, click Properties.

3. Open the Build tab page and change the class library Output path to bin\.

   NOTE: In case you complete this step for all build modes (Debug and Release, by default), the compiler will always output the .DLL files in ~/bin folder, instead of the default bin/Debug and bin/Release folders. As a result, all build configuration modes will output to the one and the same path. If, for the Release build, you do not modify the output path from bin/Release/ to bin/, Code IntelliSense is not enabled for the Release build.

4. In the root of the project, create a web.config file.

   NOTE: This web.config file is only used to enable the Code IntelliSense feature. All other configurations must be made in the web.config file of the SitefinityWebApp project.

5. Paste the following code snippet:

   XML

   <?xml version="1.0" encoding="utf-8" ?>
   <configuration>
     <configSections>
       <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
         <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
         <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
       </sectionGroup>
     </configSections>
     <system.web.webPages.razor>
       <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
       <pages pageBaseType="System.Web.Mvc.WebViewPage">
         <namespaces>
           <add namespace="System.Web.Mvc" />
           <add namespace="System.Web.Mvc.Ajax" />
           <add namespace="System.Web.Mvc.Html" />
           <add namespace="System.Web.Optimization"/>
           <add namespace="System.Web.Routing" />
           <!-- add other namespaces for views here -->
         </namespaces>
       </pages>
     </system.web.webPages.razor>
     <runtime>
       <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
         <dependentAssembly>
           <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" culture="neutral" />
           <bindingRedirect oldVersion="0.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
         </dependentAssembly>
         <dependentAssembly>
           <assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" culture="neutral" />
           <bindingRedirect oldVersion="0.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
         </dependentAssembly>
       </assemblyBinding>
     </runtime>
   </configuration>

6. Clean and build the solution.

You can now create the custom model, controller, and view in the same way as you do with custom widgets you implement in the SitefinityWebApp project. For more information, see Create widgets.

For a full sample demonstrating how to create a widget in an external assembly, check out the KendoBooksWidget sample in the GitHub repository.