Xafari MVC. Template Partial View 

Template Partial View is intended to generate the HTML code for controls. Each Property Editor (List Editor) needs some HTML code to provide the view and the edit mode. It is common to keep such code  in the _View.cshtml and _Edit.cshtml files  respectively. Most of all, Template Partial View elements are required to create a control settings object.

E.g.:

  • example

var settings = Model.CreateEditorSettings<SpinEditSettings>();

Use Model's properties and other data to initialize settings object:

  • example

settings.Properties.DisplayFormatString = Model.DisplayFormat;
 settings.Properties.AllowNull = Model.AllowNull;

The final stage is the generation of the control HTML code:

  • example

@Html.DevExpress().SpinEdit(settings).GetHtml();

Template Partial View can also store HTML tags for output formatting and JavaScript code to handle events that occurs when using the control on a web page.

For instance, see how to create a new Property Editor with custom Template Partial View.

1. Invoke the Main Demo solution and navigate to the MainDemo.Module.Mvc|Editors folder, create a new class and name it CustomMVCxStringPropertyEditor. Replace the autogenerated file content with the following code:

  • c#
  • VB

using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xafari.Mvc.MVCx.Editors;
namespace MainDemo.Module.Mvc.Editors
{
  [PropertyEditor(typeof(String), false)]
  public class CustomMVCxStringPropertyEditor : MVCxStringPropertyEditor
  {
    public CustomMVCxStringPropertyEditor(Type objectType, IModelMemberViewItem model)
      : base(objectType, model)
    {
    }
    public new string TemplatePartialView
    {
      get
      {
        return "Editors/MainDemo.Module.Mvc.Editors/CustomMVCxStringPropertyEditor/_Edit";
      }
    }
  }
}

Imports DevExpress.ExpressApp.Editors
Imports DevExpress.ExpressApp.Model
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports Xafari.Mvc.MVCx.Editors
Namespace MainDemo.Module.Mvc.Editors
  <PropertyEditor(GetType(String), False)> _
Public Class CustomMVCxStringPropertyEditor
    Inherits MVCxStringPropertyEditor
    Public Sub New(ByVal objectType As Type, ByVal model As IModelMemberViewItem)
      MyBase.New(objectType, model)
    End Sub
    Public Shadows ReadOnly Property TemplatePartialView As String
      Get
        Return "Editors/MainDemo.Module.Mvc.Editors/CustomMVCxStringPropertyEditor/_Edit"
      End Get
    End Property
  End Class
End Namespace

As you can see in the code above, the PropertyEditor attribute registers the editor in the Application Model, the created class is the descendant of MVCxStringPropertyEditor, and the value of the TemplatePartialView property is specified.

2. Add a new .cshtml file to the MainDemo.Mvc|Views|MVCx|Shared|Editors|MainDemo.Module.Mvc.Editors|CustomMVCxStringPropertyEditor directory and name it _Edit.cshtml.  Define the template contents as follows:

  • example

@using DevExpress.ExpressApp.Editors
 @using DevExpress.Web.Mvc.UI
 @using Xafari.Mvc.MVCx.Editors

 @model MainDemo.Module.Mvc.Editors.CustomMVCxStringPropertyEditor

 @{
     var settings = Model.CreateEditorSettings<TextBoxSettings>();
     settings.Text = Model.PropertyValue == null ? null : Model.PropertyValue.ToString() ;
     settings.Properties.MaxLength = Model.MaxLength;
     @Html.DevExpress().TextBox(settings).GetHtml()
 }
 <span style="color:red;font-size:85%; font-style:italic;">by CustomMVCxStringPropertyEditor</span>

Thus, the template adds the text "by CustomMVCxStringPropertyEditor" under the displayed control.

3. Open the Model Editor, navigate to the Department business class node, and choose the Title property. Set the PropertyEditorType property to the  "MainDemo.Module.Mvc.Editors.CustomMVCxStringPropertyEditor" value.

4. Run the application and open the Department List View to see how the Title property is displayed.