Create non-input visual form elements

When working with MVC forms in Sitefinity CMS, you can take advantage of helper elements. You can drop elements on your form just like the standard form fields, but unlike fields, elements are not meant to collect user input. By default, there are a few build-in elements in the standard toolset, for example, Recaptcha and Section header.

The following tutorial demonstrates how to create a new MVC form element for displaying text content that is read-only. You first create the folder structure, then the custom model, controller, and view and finally register the element in Sitefinity CMS toolbox.

1. Create the custom model.
   The model represents the data your application works with.

   NOTE: This example uses plain C# classes for the model.

   To create the custom model, perform the following:

   1. In the Models folder, create a new class and name it TextMessageModel.
   2. Open the TextMessageModel.cs file and paste the following code:
      C#

      using Telerik.Sitefinity.Frontend.Forms.Mvc.Models.Fields;
      
      namespace SitefinityWebApp.Mvc.Models
      {
          public class TextMessageModel : FormElementModel
          {
              public string Text { get; set; }
      
              public override object GetViewModel(object value)
              {
                  return this;
              }
          }
      }

2. Create the controller.
   In the Controllers folder, create a new class and name it TextMessageController.

   C#

   using SitefinityWebApp.Mvc.Models;
   using Telerik.Sitefinity.Frontend.Forms;
   using Telerik.Sitefinity.Frontend.Forms.Mvc.Controllers.Base;
   using Telerik.Sitefinity.Mvc;
   using System.Web.Mvc;
   
   namespace SitefinityWebApp.Mvc.Controllers
   {
       [ControllerToolboxItem(Name = "TextMessage", Title = "TextMessage", Toolbox = FormsConstants.FormControlsToolboxName, SectionName = "Custom Fields")]
       public class TextMessageController : FormElementControllerBase<TextMessageModel>
       {
           /// <summary>
           /// Gets the form element model.
           /// </summary>
           public override TextMessageModel Model
           {
               get
               {
                   if (this.model == null)
                       this.model = new TextMessageModel();
                   return this.model;
               }
           }
   
           /// <summary>
           /// Renders the field in <see cref="FormDisplayMode"/> Write of the parent <see  cref="Form"/>.
           /// </summary>
           /// <returns>The value of the forms field.</returns>
   
           public override ActionResult Write(object value)
           {
               return this.Read(value);
           }
   
           private TextMessageModel model;
       }
   }

   NOTE: When creating new form elements, your controller can inherit FormElementControllerBase. Thus, you do not have to implement specific methods needed to display the element in the form. The FormElementControllerBase provides two actions - Write and Read, which are invoked depending on the Form widget settings. If your custom element does not have one of these modes, you can override the particular action and redirect to the other.

3. Create the view for the element Read mode.
   In the ~/Mvc/Views/TextMessage folder, create a new code file and name it Read.Default.cshtml. In this file, you implement the view that shows the data from the model, populated in the controller:

   HTML+Razor

   @model SitefinityWebApp.Mvc.Models.TextMessageModel
   
   <div>
       <div> @Model.Text </div> 
   </div>