Nizar Noorani

TwitterFacebookGoogle

Tag Archives: embedding html in user controls

An easier way to write HTML input forms

Posted on by

Consider the block of code below:

<table cellpadding="3">
  <tr>
    <td valign="top">
      <b>First Name</b>
    </td>
    <td>
      <asp:TextBox ID="txtFirstName" runat="server" />
      <div>
        Please enter your first name.</div>
    </td>
  </tr>
  <tr>
    <td valign="top">
      <b>Last name</b>
    </td>
    <td>
      <asp:TextBox ID="txtLastName" runat="server" />
      <div>
        Please enter your last name.</div>
    </td>
  </tr>
</table>

The rendered output looks something like this:
HTML Input Form
You will notice that we have to repeat the
and the tags, along with any style information that these contain, for every row of our input form. Ouch! That's a lot of typing. Furthermore, if, in the future, we have make layout and/or style related changes, we'd have to modify all the pages in our application that contain these HTML input forms! Fortunately, there is an easier way.

By implementing a couple of simple ASP .NET server controls, we will save ourselves the trouble of typing the above shown HTML and will be able to simply type the following:

<cc:Form runat="server">
  <cc:FormField runat="server" Name="First Name" 
                      Description="Please enter the first name.">
    <asp:TextBox ID="txtFirstName" runat="server" />
  </cc:FormField>
  <cc:FormField runat="server" Name="Last Name" 
                     Description="Please enter the last name.">
    <asp:TextBox ID="txtLastName" runat="server" />
  </cc:FormField>
</cc:Form>

Now isn't that soo much more pleasant to the eyes and easier on your fingers? So how is this accomplished? As follows:

First, create a ASP .NET Server Control name Form.cs. This simple control will simply render the

tags. Below is the code for it:

public class Form : WebControl
{
  public override void RenderBeginTag(HtmlTextWriter writer)
  {
    writer.Write("<table cellpadding='3'>");
  }
  public override void RenderEndTag(HtmlTextWriter writer)
  {
    writer.Write("</table>");
  }
}

Notice the use of [ParseChildren(false)] attribute. This attributes ensures that 1) we will be able to nest additional controls inside this control and 2) The nested control won't actually become a child control this control. The second point is important and will explained in greater detail shortly.

Now we move on to the more interesting control: the FormField.cs control. This control renders the

's, tag
  • The column that contains the input field label. For example: 
    <td><b>First Name</b></td>
  • The opening

    • tag for the column that contains the actual input field.

  • The
    tag containing the input field description. For example:

    <div>Please enter the first name</div>
  • The closing

    • tag

    Well, that all sounds well and good. But wait! Where is the FormField control rendering the actual input field (the asp:TextBox)? The answer is that it isn’t. The use of the [ParseChildren(false)] attribute prevents the parsing of any embedded controls that FormField may have. Thus, in our example, when the Form and the FormField control's rendering has finished, the page control tree looks something like this:

    
- Page
  - Form
  - FormField
  - LiteralControl("
    's, the input field label, and the input field description. Below is the code for it:

    [ToolboxData("<{0}:FormField runat=server></{0}:FormField>"), ParseChildren(false)]
public class FormField : WebControl
{
  public string Name
  {
    get { return ViewState.GetAsString("Name"); }
    set { ViewState["Name"] = value; }
  }
  public string Description
  {
    get { return ViewState.GetAsString("Description"); }
    set { ViewState["Description"] = value; }
  }
  public string NameAlign
  {
    get { return ViewState.GetAsString("NameAlign"); }
    set { ViewState["NameAlign"] = value; }
  }
  public string ControlAlign
  {
    get { return ViewState.GetAsString("ControlAlign"); }
    set { ViewState["ControlAlign"] = value; }
  }
  public override void RenderBeginTag(HtmlTextWriter writer)
  {
    string beginHtml = @"<tr><td align={0}><b>{1}</b></td><td align={2}>";
    writer.Write(string.Format(beginHtml, NameAlign, Name, ControlAlign));
  }
  public override void RenderEndTag(HtmlTextWriter writer)
  {
    string endHtml = @"<div>{0}</div></td></tr>";
    writer.Write(endHtml, Description);
  }
}

    The interesting parts of the class are the RenderBeginTag() and the RenderEndTag() methods. If you inspect these methods, you’ll see that the RenderBeginTag() is responsible for rendering:

    • The opening
    tag for the column that contains the actual input field (like the , for example)

    And the RenderEndTag() method is responsible for rendering:

    • The closing
    ") - LiteralControl("
    ") - TextBox - LiteralControl("
    Please enter first name
    ") .....

    Notice that the TextBox (txtFirstName) is a child of the Page instead of being a child of the FormField control. What this means is that instead of having to type something convoluted like:

    string firstName = ((TextBox)this.formField1.FindControl("txtFirstName")).Text;

    your page can directly reference the TextBox like so:

    string firstName = txtFirstname.Text

    I hope you’ve found this post helpful and informative. Please take some time to leave your feedback and/or comments to help me improve.

    Twitter Email Linkedin Digg Stumbleupon Subscribe
    CyberChimps