It's fairly common for web views to include input forms; and it's fairly common for those input forms to require a very specific layout that accomplishes two things: merges the forms with the surrounding graphics and adds rich client-side goodies. These input forms should probably be written from scratch without relying on any layout facilities. However, in many situations (more than you might think at first), the process of building the layout of input forms can be automated to save time and annoyance.
You can, for instance, put automation to work in writing the back-office system of a website. Such a system typically contains forms for editing records. Because these pages are not accessible to the general public, customers usually don't care much about the graphics in them.
This is just the kind of situation in which ASP.NET MVC templated helpers shine. Templated helpers are, basically, HTML helpers. That is, they serve as plain HTML factories that ASP.NET MVC applications can use to speed up the authoring of HTML views. Templated helpers can take an object (even the whole model as passed to the view) and build a read-only or editable HTML form out of that. More likely, though, you use templated helpers to display or edit individual properties of an object. In this article, I'll show you how to use templated helpers in a few not-so-common scenarios, such as in forms that use dates and enumerated types.
Modeling Input Forms
There are two groups of templated helpers: Display and Editor. There are several variations of each kind, such as EditorFor and EditorForModel. Under the hood, all that these helpers really do is to figure out which viewer or editor template best fits the provided data. Templated helpers include a lot of predefined templates and the conventions for applying them to given data. You can override these templates and conventions by using ad hoc attributes.
Which attributes would you apply? And where would you apply them?
Here's the scenario for an example form: Suppose you want users to specify a pivot date value and a time value that represents the quantity of days, weeks, or minutes to add or subtract. Figure 1 shows a possible user interface for this form.
Figure 1: Sample input form containing dates, number, and enumerations
As you can see, the example form includes three distinct fields for day, month, and year, an additional text box for the time quantity, and a drop-down list of time quantity labels (days, minutes, and weeks). Two submit buttons complete the form, one to add the specified quantity and one to subtract it.
This is plain HTML stuff, and no special skills are required to make such a form work as expected. But what exactly do you expect this form to return? How would you ideally express your expectations?
You can use the following class to represent any data that gets entered in the Figure 1 form:
public class DateEditorViewModel
{
public DateTime? PivotDate { get; set; }
public DateMeasurements AvailableMeasurements { get; set; }
public Int32 Quantity { get; set; }
public String Output { get; set; }
}
In this class, the PivotDate member indicates the basic date, the Quantity member indicates the number of ticks to add, and the Output member is a return message for the user. DateMeasurements is an enumerated type that lists which quantities you can add or subtract, as follows:
public enum DateMeasurements
{
Days = 0x1,
Months = 0x2,
Years = 0x4,
Minutes = 0x8,
Seconds = 0x10,
Weeks = 0x20
}