Strongly-Typed Helpers

• Dec 25, 2023
• 4 minutes to read

Strongly-typed helper methods help you set up DevExtreme controls. They allow view code validation at compile-time, provide full IntelliSense support, add client-side validation based on Data Annotations, and support display attributes.

You can use two kinds of DevExtreme strongly-typed helpers:

• ControlFor - Methods with the For suffix (CalendarFor, DateBoxFor, etc.) are used to configure standalone editors. These methods are similar to the built-in ASP.NET MVC strongly-typed helpers like TextBoxFor.

  These methods bind controls to model properties specified by lambda expressions. This approach allows you to configure the controls without the use of string constants.

  Note

  To bind a control to a model property, specify a model in the @model directive (Razor C#) or @ModelType directive (Razor VB).

  The example below demonstrates the DateBoxFor method that creates the DateBox control and binds it to the OrderViewModel model’s OrderDate property.

  Razor C#

  @model OrderViewModel
  
  @(Html.DevExtreme().DateBoxFor(m => m.OrderDate))
  

  Razor VB

  @ModelType OrderViewModel
  
  @(Html.DevExtreme().DateBoxFor(Function(m) m.OrderDate))
  

  ControlFor methods can be used in partial views that have their own models. The example below demonstrates a partial view that uses DevExtreme strongly-typed helpers (DateBoxFor, TextBoxFor) along with the built-in helpers (LabelFor, ValidationMessageFor).

  _MyPartial.cshtml

  @model OrderViewModel
  
  @using (Html.BeginForm()) {
      @Html.LabelFor(m => m.OrderDate)
      @Html.DevExtreme().DateBoxFor(m => m.OrderDate)
      @Html.ValidationMessageFor(m => m.OrderDate)
  
      @Html.LabelFor(m => m.ShipCity)
      @Html.DevExtreme().TextBoxFor(m => m.ShipCity)
  
      @Html.DevExtreme().Button().Text("Save").UseSubmitBehavior(true)
  }
  

  _MyPartial.vbhtml

  @ModelType OrderViewModel
  
  @Using (Html.BeginForm())
      @Html.LabelFor(Function(m) m.OrderDate)
      @Html.DevExtreme().DateBoxFor(Function(m) m.OrderDate)
      @Html.ValidationMessageFor(Function(m) m.OrderDate)
  
      @Html.LabelFor(Function(m) m.ShipCity)
      @Html.DevExtreme().TextBoxFor(Function(m) m.ShipCity)
  
      @Html.DevExtreme().Button().Text("Save").UseSubmitBehavior(true)
  End Using
  

• Control<T> - Used to configure controls that have bindable items:

  • DataGrid (columns and summaries)
  • TreeList (columns)
  • PivotGrid (fields)
  • Form (items)

  Note

  To bind a control to a model, specify the model in a helper method as a type parameter. The control will represent data from this model, not from a current view’s model.

  The example code below adds the DataGrid that is strongly-typed to the OrderViewModel type. The AddFor() method configures grid columns. This method binds a column to a model property specified by a lambda expression.

  Razor C#

  @model IndexModel
  @* the IndexModel model is not used for the DataGrid control *@
  
  @(Html.DevExtreme().DataGrid<OrderViewModel>()
      .Columns(columns => {
          columns.AddFor(m => m.OrderDate);
          columns.AddFor(m => m.ShipCity);
      })
  )
  

  Razor VB

  @ModelType IndexModel
  
  @(Html.DevExtreme().DataGrid(Of OrderViewModel)() _
      .Columns(Sub(columns)
          columns.AddFor(Function(m) m.OrderDate)
          columns.AddFor(Function(m) m.ShipCity)
      End Sub)
  )
  

More examples are available in our demos and sample applications.

Display Attributes

Controls configured with strongly-typed helper methods support the following built-in ASP.NET Core display attributes:

Attribute	Description	Supported by
DisplayName	Specifies a property label.	All controls
Display(Name)	Specifies a property label.	All controls
Display(Prompt)	Specifies a prompt or a watermark.	Form simple items
Display(Description)	Specifies a property description.	Form simple items

You can use these attributes instead of API methods to configure control options. For example, the following code demonstrates how to use API methods to configure the Form control’s FullName data field (its label, description, and placeholder):

Model

C#

public class Person {
    [Key]
    public int ID { get; set; }
    public string FullName { get; set; }
    public DateTime BirthDate { get; set; }
}

VB

Public Class Person
    <Key>
    Public Property ID() As Integer
    Public Property FullName() As String
    Public Property BirthDate() As DateTime
End Class

Razor C#

@(Html.DevExtreme().Form<Person>()
    .Items(items => {
        items.AddSimple()
            .DataField("FullName")
            .Label(l => l.Text("Full Name"))
            .HelpText("As it appears on your passport or identification")
            .Editor(e => e.TextBox().Placeholder("John Doe")
        );

        items.AddSimpleFor(m => m.BirthDate);
    })
)

Razor VB

@(Html.DevExtreme().Form(Of Models.Person)() _
    .Items(Sub(items)
        items.AddSimple() _
            .DataField("FullName") _
            .Label(Sub(l) l.Text("Full Name")) _
            .HelpText("As it appears on your passport or identification") _
            .Editor(Function(e) e.TextBox().Placeholder("John Doe"))
        items.AddSimpleFor(Function(model) model.BirthDate)
    End Sub)
)

As an alternative, you can use display attributes to configure the same control options. The code below demonstrates how to attach the [Display] attribute to the Person model’s FullName property. The attribute is applied when you bind the Form control to the Person model.

Model

C#

using System.ComponentModel.DataAnnotations;

public class Person {
    [Key]
    public int ID { get; set; }
    [Display(
        Name = "Full Name",
        Prompt = "John Doe",
        Description = "As it appears on your passport or identification")]
    public string FullName { get; set; }
    public DateTime BirthDate { get; set; }
}

VB

Imports System.ComponentModel.DataAnnotations

Public Class Person
    <Key>
    Public Property ID() As Integer
    <Display(
        Name:="Full Name",
        Prompt:="John Doe",
        Description:="As it appears on your passport or identification")>
    Public Property FullName() As String
    Public Property BirthDate() As DateTime
End Class

Razor C#

@(Html.DevExtreme().Form<Person>()
    .Items(items => {
        items.AddSimpleFor(m => m.FullName);
        items.AddSimpleFor(m => m.BirthDate);
    })
)

Razor VB

@(Html.DevExtreme().Form(Of Models.Person)() _
    .Items(Sub(items)
        items.AddSimpleFor(Function(model) model.FullName)
        items.AddSimpleFor(Function(model) model.BirthDate)
    End Sub)
)

The following image shows the result: