DevExtreme ASP.NET MVC: New Strongly-Typed HTML Helpers (Lambda Expressions Ftw!) - v17.2

Strongly-typed HTML helpers are great when you're constructing your view in ASP.NET MVC. Helper methods like the built-in @Html.TextBoxFor(m => m.FirstName) have been around for a long time. And they provide benefits like compile-time checking of views, Razor support, and enable the use of data annotations to automatically configure important options like validation rules.

Since we released the DevExtreme ASP.NET MVC Controls, they have included a set of HTML helper methods to help you do things like setting up the DevExtreme editors. For example, here we're creating a DevExtreme MVC DateBox control that will be bound to our OrderDate field from the model:

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

In one line, we're creating the editor and binding it, magic!

More Lambda Expressions

In the next major release, v17.2, we've extended the ability to use expressions within our HTML helpers. We have added more lambda expressions to our larger widgets. This allows to use them to configure items like:

• DataGrid and TreeList columns
• DataGrid summaries
• PivotGrid fields
• Items of our Form control

Therefore, the DataGrid control can now be declared using this syntax:

@(Html.DevExtreme().DataGrid<Sale>()
    .Columns(columns => {
        columns.AddFor(m => m.CategoryName);
        columns.AddFor(m => m.ProductName);
        columns.AddFor(m => m.ProductSales);
    }) 
    .Summary(s => s.TotalItems(total => { 
        total 
            .AddFor(m => m.ProductSales) 
            .SummaryType(SummaryType.Sum); 
    })) 
)

Notice the generic type argument of the DataGrid<Sale>() and AddFor calls configuring columns and total summary without the use of any string constants.

Previously, the column would be declared using strings like so: columns.Add().DataField("CategoryName");. The new lamdba expressions approach is better for the reasons listed below and makes you more productive.

IntelliSense support

One of the best things about using lambda expressions is that you get IntelliSense in your Razor views based on the type:

Data Annotations

A nice feature of the AddFor method is that it infers useful information about the property. This information includes the property name and data type.

And we also process the model's data annotations. For example, if any members of the Sale class are annotated with the Display attribute, then it will be automatically assigned as the column caption:

public partial class Sale { 
    [Display(Name = "Category")] 
    public string CategoryName { get; set; }
    
    [Display(Name = "Product")] 
    public string ProductName { get; set; } 
    
    [Display(Name = "Sales")] 
    public Nullable<decimal> ProductSales { get; set; } 
}

Better Validation

If your data is annotated with Validation attributes, such as [Required], [StringLength], [Range], etc, then DevExtreme MVC will honor and apply them to column validation options of DataGrid or TreeList. So, when using expressions, you get client-side validation configured automatically for you.

Typed Form Control!

The new strongly-type HTML helpers also enables us to implement 'highly-requested' customer scenarios like this one for a 'typed Form control' sample:

@(Html.DevExtreme().Form<Employee>().Items(items => { 
    items.AddSimpleFor(m => m.FirstName); 
    items.AddSimpleFor(m => m.LastName); 
    
    items.AddGroup().Caption("Address").Items(addressItems => { 
        addressItems.AddSimpleFor(m => m.Address); 
        addressItems.AddSimpleFor(m => m.Region); 
        addressItems.AddSimpleFor(m => m.PostalCode); 
    }); 
}))

Optional but recommended

You don't have rewrite your existing code because this new functionality is completely optional. You can continue to use strings, and existing projects will work fine after the upgrade. I suspect that after reading about the benefits above that you'll consider using them in a future project. Which is what I recommend, that you use expressions for newer projects.

Lambda expressions are available in both the classic ASP.NET MVC and the new ASP.NET Core versions of our library. You can use them regardless of the app language, be it C# or VB.NET.

We like them so much that we've updated all of our demos and project templates to use expressions (where possible).

What do you think about the strongly-typed HTML helper improvements in the next release? Drop me a line below.

Email: mharry@devexpress.com

Twitter: @mehulharry

Free DevExpress Products - Get Your Copy Today