ASP.NET MVC Data Editors - New Data Annotation Attributes (v14.2 release)

Starting with the v14.2 release, we have introduced two new validation attributes for the DevExpress ASP.NET MVC Editor extensions: Mask and DateRange attributes.

Benefits

Data Annotations are great because they help you to validate your Model:

Data Annotations allow us to describe the rules we want applied to our model properties, and ASP.NET MVC will take care of enforcing them and displaying appropriate messages to our users. – -Jon Galloway

Mask & DateRange

We’ve added these two new attributes:

• MaskAttribute - specifies mask settings for a value of a data field and the editor's mask settings. Our ASP.NET MVC Data Editors allow you to use masks during editing. Masks are useful when a string entered by an end-user into an editor must match a specific format. For instance, a text editor that accepts date/time values in the 24-hour format only, or only numeric values, or a phone number that allows an end-user to enter digits into automatically constructed placeholders.
  

• DateRangeAttribute - specifies the date range settings for a value of a data field and the editor's date range settings. With this attribute, you can implement a date range picker functionality. In this case, one editor is used to specify the start date, the other – to specify the end date. To link editors, decorate the end-date editor's model field with the DateRangeAttribute and set the StartDateEditFieldName property of the attribute to the field name of the start-date editor.

And these new attributes are fully compatible with Unobtrusive Client Validation feature.

You can still use the mask settings feature of our editors directly. However, Data Annotation feature makes it easier because you’re decorating/enhancing your Model and therefore it can be read by any view or controller that is going to use the Model.

How to

To implement this feature, do the following steps:

1. Create a model:

Start by creating a model in your MVC project and use the new attributes. For example, here I’m using the new Mask attribute on the Phone property and the DateRange attribute on the EndDate property of my Model:

public class MyModel {
    [Mask("+1 (999) 000-0000")]
    public string Phone { get; set; }

    public DateTime StartDate { get; set; }
    [DateRange(StartDateEditFieldName = "Start", MinDayCount = 3, MaxDayCount = 30)]
    public DateTime EndDate { get; set; }
}

2. Define a View with editors:

Now, in the view, I’ll use the excellent DevExpress FormLayout extension that helps you to create great looking forms easily:

@using (Html.BeginForm()) {
	@Html.DevExpress().FormLayout(
		settings => {
		settings.Name = "FormLayout";
        	settings.Items.Add(m => m.Phone);
        	settings.Items.Add(m => m.StartDate);
        	settings.Items.Add(m => m.EndDate);
        	settings.Items.Add(itemSettings => {
            	itemSettings.Caption = " ";
                itemSettings.NestedExtensionType = FormLayoutNestedExtensionItemType.Button;
            	ButtonSettings btnSettings = (ButtonSettings)itemSettings.NestedExtensionSettings;
            	btnSettings.Name = btnSettings.Text = "Apply";
            	btnSettings.UseSubmitBehavior = true;
        	});
    	}).GetHtml()
}
​

Note that the DevExpress MVC editor extensions support lambda-style data binding.

3. Create Controller Action to process data:

Finally, we simply display the view because we have a strongly-typed Model and the DevExpress Form Layout extension that will generate a beautiful form for us with validation built-in:

public ActionResult Index() {
	return View(new MyModel());
}

[HttpPost]
public ActionResult Index(MyModel model) {
	// Some Logic
	return View(model);
}

Now you can see that attributes have been applied to the editors and validation errors are displayed as expected:

Download Sample & Online Demo

Download this sample MVC project that shows you how the new MVC DataAnnotation attributes help you to validate your Model data even further: DXAttributes14.2.zip

Check out an online demo of DevExpress MVC extensions and Model Validation.

If you’d like to learn more, I recommend reading Rachel Appel’s article: “How data annotations for ASP.NET MVC validation work”