Customize an MVC field type

Current version: 8.2

In the Web Forms for Marketers module, you can customize field types to implement additional logic, for example, a validator, or you can change the view of an MVC field to add details to the field presentation.

The Web Forms for Marketers MVC field type only consists of a model and a view. The model defines the behavior of the field, contains all properties and methods necessary to render a view, and it is a class located in the assembly in the \Website\Bin folder of your website.

Every MVC field has a .cshtml file associated with it, containing markup fields. The file is located in the \Website\Views\Form\EditorTemplates folder of your Sitecore installation.

You can use a view as an editor template by following the MVC framework.

This topic describes how to:

Change the view of an MVC field

To customize an MVC field, for example, to include additional logic or data attributes, you must change the view of the MVC field. To do this, you must define an editor template by defining a class related to the field that you want to customize.

To change the view of an MVC field:

  1. In the Content Editor, in the content tree, in the Simple Types, List Types, or Complex folder (sitecore/System/Modules/Web Forms for Marketers/Settings/Field Types) click the field type item that you want to change the view of. For example, the Checkbox field.

  2. In the right pane, in the Data section, in the MVC Type field, find the class name of the item that you want to change the view of. For example, CheckboxField.

  3. In the \Website\Views\Form\EditorTemplates folder of your Sitecore installation, find the .cshtml file that corresponds to the class name from step 2. For example, for the CheckboxField class, the file name and extension is: CheckboxField.cshtml.

  4. In a text editor, edit the relevant .cshtml file to change the view, and implement the customizations.

Create a custom MVC validation

The default, type-specific validation attribute is set on a given model. To add a validation, you must create a validation attribute for your field. To create a custom MVC validation, you must validate the property of the class depending on the type of validation.

To create a custom MVC validation:

  1. In Visual Studio, create a new class that inherits from the Sitecore.Forms.Mvc.Validators.DynamicValidationBase class or the System.ComponentModel.DataAnnotations.ValidationAttribute class.

    For example:

    For the BalanceAttribute class, you can use the following code sample:

    RequestResponse
      /// <summary>
      /// The balance validator.
      /// </summary>
      public class BalanceAttribute : DynamicValidationBase
      {
        /// <summary>
        /// Initializes a new instance of the <see cref="BalanceAttribute"/> class.
        /// </summary>
        /// <param name="balanceProperty">
        /// The balance property.
        /// </param>
        public BalanceAttribute(string balanceProperty)
        {
          Assert.ArgumentNotNullOrEmpty(balanceProperty, "balanceProperty");
          this.BalanceProperty = balanceProperty;
        }
        /// <summary>
        /// Gets or sets the balance property.
        /// </summary>
        public string BalanceProperty { get; set; }
        /// <summary>
        /// The get client validation rules.
        /// </summary>
        /// <param name="metadata">
        /// The metadata.
        /// </param>
        /// <param name="context">
        /// The context.
        /// </param>
        /// <returns>
        /// The <see cref="IEnumerable"/>.
        /// </returns>
        public override IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
          yield break;
        }
        /// <summary>
        /// The is valid.
        /// </summary>
        /// <param name="value">
        /// The value.
        /// </param>
        /// <param name="validationContext">
        /// The validation context.
        /// </param>
        /// <returns>
        /// The <see cref="ValidationResult"/>.
        /// </returns>
        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
          var fieldModel = this.GetModel(validationContext);
          var balance = fieldModel.GetPropertyValue<decimal>(this.BalanceProperty);
          var valueString = value as string;
          if (string.IsNullOrEmpty(valueString))
          {
               return ValidationResult.Success;
          }
          decimal valueDecimal;
          decimal.TryParse(valueString, out valueDecimal);
          if (decimal.TryParse(valueString, out valueDecimal) && decimal.Parse(valueString) <= balance)
          {
            return ValidationResult.Success;
          }
          return new ValidationResult(string.Format(CultureInfo.CurrentCulture, this.GetErrorMessageTemplate(fieldModel), fieldModel.Title));
        }
  2. Add the validation attribute to the relevant property of the field class. For example, add the Balance validation attribute to the Value property:

    When implemented in Sitecore, your custom validation can look like this:

Note

This validation is a server validation. If you want to make the validation work on your client, the MSDN website describes how to override the GetClientValidationRules method.

Do you have some feedback for us?

If you have suggestions for improving this article,