Asp .NET form controls suite

Build forms faster

Over the past couple of years I have been involved with building some huge, complicated online forms and I have found the out-of-the-box .NET framework is not adequate for creating easily maintainable forms with potentially hundreds of items.

Some of the problems with the vanilla .NET framework include:

• Difficult to maintain consistent css and html markup - Most well-executed sites implement a standard set of divs, labels and input controls when building web forms. This means that all developers need to be disciplined (always a difficult task) and a lot of time is spent copying and pasting. If the template needs to be changed, someone is in for a nightmare of typing.
• The .NET validators are woeful - which is why you really need something like Peter Blum's controls if you want to do anything professional. Even with the enhanced validators, I find that the validators often take up much more space on your ASPX page than the actual form element. This makes it hard for developers and designers to navigate through the form. More time is spent wading through complicated markup, rather than concentrating on the things that directly affect users such as labels, styles and marrying the user interface correctly with the data objects.
• Similar problems that are tricky to solve arise again and again. For example, I always like to have a little bit of javascript attached to my multi-line textboxes, so that if a user hits enter it doesn't try to submit the form. Another challenge is maintaining consistency with the formatting of labels - should labels end with a colon or a hyphen; should they be presented in title case?

Ugly .Net code

Here is the code you might see on an aspx page using regular .Net controls. It includes a couple of fields that accept a credit card number and expiry date:

<div class="formItem">
   <div class="label">
      <asp:Label runat="server" ID="Label1" Text="Credit card number" AssociatedControlID="ddlExpiryDateMonth" />
   </div>
   <div class="inputFields">
      <asp:TextBox runat="server" ID="txtCreditCardNumber" CssClass="textbox" MaxLength="16" />
      <asp:RegularExpressionValidator runat="server" ID="revCreditCardNumber" ValidationExpression="someexpression"
          ForeColor="" Display="Dynamic" SetFocusOnError="true" />
      <asp:RequiredFieldValidator ID="rfvCreditCardNumber" ForeColor="" Display="Dynamic" SetFocusOnError="true" runat="server"
         ControlToValidate="txtCreditCardNumber" />
   </div>
</div>

<div class="formItem">
   <div class="label">
      <asp:Label runat="server" ID="lblExpiryDate" Text="Expiry Date" AssociatedControlID="ddlExpiryDateMonth" />
   </div>
   <div class="inputFields">
      <asp:DropDownList runat="server" ID="ddlExpiryDateMonth" CssClass="monthYear">
         <Items>
            <asp:ListItem Text="01" Value="1" />
            <asp:ListItem Text="02" Value="2" />
            <asp:ListItem Text="03" Value="3" />
            <asp:ListItem Text="04" Value="4" />
            <asp:ListItem Text="05" Value="5" />
            <asp:ListItem Text="06" Value="6" />
            <asp:ListItem Text="07" Value="7" />
            <asp:ListItem Text="08" Value="8" />
            <asp:ListItem Text="09" Value="9" />
            <asp:ListItem Text="10" Value="10" />
            <asp:ListItem Text="11" Value="11" />
            <asp:ListItem Text="12" Value="12" />
         </Items>
      </asp:DropDownList>
      <asp:DropDownList runat="server" ID="ddlExpiryDateYear" CssClass="monthYear" />
      <asp:RequiredFieldValidator runat="server" ID="rfvExpiryDateMonth" ControlToValidate="ddlExpiryDateMonth" Display="Dynamic"

            ForeColor="" SetFocusOnError="true" />
      <asp:RequiredFieldValidator runat="server" ID="rfvExpiryDateYear" ControlToValidate="ddlExpiryDateMonth" Display="Dynamic"
         ForeColor="" SetFocusOnError="true" />
   </div>
</div>

All this for just two fields! There's an incredible amount of noise in this code, and way too much repeated information.

A better way

With my suite of form controls, this is what we get:

<my:TextBoxFormItem runat="server" ID="txtCreditCardNumber" Label="Credit Card Number"
   ValidateAs="CreditCard" Required="true" />

<my:MonthYearFormItem runat="server" ID="dateExpiryDate" Label="Expiry Date"
   RenderAs="DropDowns" Required="true" />

Who are these controls suitable for?

These controls have been designed for rapid development of forms. They help you avoid a big ball of muddy code and allow you to put together a form very quickly.

Installing

1. Open the source code solution with Visual Studio and compile it
2. Add a reference to the FormItems DLL in your project.
3. Register the FormItems namespace in the system.web/pages section of your web.config.

I usually place third party DLLs in a "Library" folder in the root folder of the solution. These DLLs then get added to source control so that other developers have access to them straight away without having to mess around when they start working on the project. This is much better than installing DLLs in the GAC or, worst of all, expecting other developers to place the DLLs on their hard drives in the exact same location as you.

When you register namespaces in the web.config's pages section, you have to specify a tagPrefix. My preference is to make this a generic term. A lot of projects use the company name but I prefer something even simpler, for example, "my". This way you avoid clogging up the aspx pages with your company name again and again and again.

Getting started

Each FormItem includes a set of surrounding divs, validators, labels, in addition to the appropriate input elements. You configure all these elements through each the Form Item's property.

By default all Form Items are required. I find that on most of my forms, the majority of fields are required, so by default I have made Required="true". You can set fields to not be required by setting the property Required="false".

Be aware of timing and the page lifecycle. In general you should try to set the Form Item's properties as early as possible in the Page Life Cycle - for example set them declaratively or in Page_Init. In some cases you will be able to set properties later in the cycle - for example, you can change a Form Item's label inside a submit button's event handler and it will behave properly. In other cases, the control is expecting the property to be set quite early in the lifecycle.

The reason for this is that performance can often be greatly improved if the controls are initialized correctly early in the life cycle. Otherwise the early stages have to make allowances for changes that may occur at a later time, which hinders performance.

Further extensions

This is a slimmed down version of the controls that I actually use. My controls take advantage of Peter Blum's validators and input controls, as well as some of Telerik's Ajax functionality. At a later date I may provide a patch for these if enough people request it. I can also provide patches if use a Javascript framework such as Prototype or YUI.

Related Articles

Tutorial : Creating a new Form Item - I walkthrough how I quickly create a CheckBoxListFormItem class for my suite. Following this walkthrough will give you an insight into how the suite works in general and how you can add your own controls to the suite.

Download

Release History

28 September : v0.1.1

• CheckBoxListFormItem
• Exposed more CSS class properties and event handlers
• Implemented AutoPostBack on all controls properly

4 August 2008 : v0.1

Includes the following Form Items:

• CheckBoxFormItem
• CurrencyFormItem
• DateFormItem
• DayMonthYearDropDownFormItem
• DropDownFormItem
• IListControl
• MonthYearDropDownFormItem
• RadioListFormItem
• ReadOnlyFormItem
• Special Repeater
• TextBoxFormItem
• UploadImageFormItem
• YesNoFormItem