ASP vs ASP.NET: Forms

Introduction

To the typical user of a website, forms are pretty simple. They typically consist of textfields, drop down lists, radio buttons, checkboxes, and submit buttons. But going beneath the surface, they’re not so simple. A form’s contents are always enclosed by an HTML form element; for the developer it is necessary to write some markup to add these elements.

Creating Forms

In Classic ASP, you could write form elements using plain HTML. ASP.NET, however, has web controls. So you would write an ASP.NET page using the web controls which, when run through the ASP.NET processor, get converted to plain HTML. Time for an example.

Plain HTML, as written directly for a .asp page:


<form id="frmTest" method="post" action="test.asp">
    <fieldset>
        <legend>First & Last Name</legend>

        <label for="txtFirstName">First Name</label>
        <input type="text" name="txtFirstName" id="txtFirstName" />

        <br />
        <br />

        <label for="txtLastName">Last Name</label>
        <input type="text" name="txtLastName" id="txtLastName" />
    </fieldset>

    <fieldset>
        <legend>Gender</legend>

        <label for="rblGenderMale">Male</label>
        <input type="radio" name="rblGender" id="rblGenderMale" value="Male" />

        <label for="rblGenderFemale">Female</label>
        <input type="radio" name="rblGender" id="rblGenderFemale" value="Female" />
    </fieldset>

    <fieldset>
        <legend>Interests</legend>

        <select name="lbxInterests" size="4" multiple="multiple" id="lbxInterests">
            <option value="Reading">Reading</option>
            <option value="Photography">Photography</option>
            <option value="Sports">Sports</option>
            <option value="Movies">Movies</option>
            <option value="Music">Music</option>
            <option value="Art">Art</option>
        </select>
    </fieldset>

    <input type="submit" text="Submit" />
</form>

ASP.NET web controls, in a .aspx page, where the web controls will be converted to the equivalent of the above HTML:


<form id="frmTest" method="post" runat="server">
    <fieldset>
        <legend>First & Last Name</legend>

        <label for="txtFirstName">First Name</label>
        <asp:TextBox id="txtFirstName" runat="server"></asp:TextBox>

        <br />
        <br />

        <label for="txtLastName">Last Name</label>
        <asp:TextBox id="txtLastName" runat="server"></asp:TextBox>
    </fieldset>

    <fieldset>
        <legend>Gender</legend>

        <asp:RadioButtonList id="rblGender" runat="server" RepeatLayout="Flow">
            <asp:ListItem Value="Male">Male</asp:ListItem>
            <asp:ListItem Value="Female">Female</asp:ListItem>
        </asp:RadioButtonList>
    </fieldset>

    <fieldset>
        <legend>Interests</legend>

        <asp:ListBox id="lbxInterests" runat="server" SelectionMode="Multiple">
            <asp:ListItem Value="Reading">Reading</asp:ListItem>
            <asp:ListItem Value="Photography">Photography</asp:ListItem>
            <asp:ListItem Value="Sports">Sports</asp:ListItem>
            <asp:ListItem Value="Movies">Movies</asp:ListItem>
            <asp:ListItem Value="Music">Music</asp:ListItem>
            <asp:ListItem Value="Art">Art</asp:ListItem>
        </asp:ListBox>
    </fieldset>

    <asp:Button id="btnSubmit" runat="server" Text="Submit"></asp:Button>
</form>

The above ASP.NET markup results in the following HTML:


<form name="frmTest" method="post" action="test.aspx" id="frmTest">
    <input type="hidden" name="__VIEWSTATE" value="dDwtMTY2MTUwMjM3MDs7bDxjYmxJbnRlcmVzdHM6MDtjYmxJbnRlcmVzdHM6MTtjYmxJbnRlcmVzdHM6MjtjYmxJbnRlcmVzdHM6MztjYmxJbnRlcmVzdHM6NDtjYmxJbnRlcmVzdHM6NTtjYmxJbnRlcmVzdHM6NTs+PkkjVQSa4t5M5Tz9WMw/lQ32UjSG" />

    <fieldset>
        <legend>First & Last Name</legend>

        <label for="txtFirstName">First Name</label>
        <input name="txtFirstName" type="text" id="txtFirstName" />

        <br />
        <br />

        <label for="txtLastName">Last Name</label>
        <input name="txtLastName" type="text" id="txtLastName" />
    </fieldset>

    <fieldset>
        <legend>Gender</legend>

        <span id="rblGender">
            <input id="rblGender_0" type="radio" name="rblGender" value="Male" /><label for="rblGender_0">Male</label><br>
            <input id="rblGender_1" type="radio" name="rblGender" value="Female" /><label for="rblGender_1">Female</label>
        </span>
    </fieldset>

    <fieldset>
        <legend>Interests</legend>

        <select name="lbxInterests" size="4" multiple="multiple" id="lbxInterests">
            <option value="Reading">Reading</option>
            <option value="Photography">Photography</option>
            <option value="Sports">Sports</option>
            <option value="Movies">Movies</option>
            <option value="Music">Music</option>
            <option value="Art">Art</option>
        </select>
    </fieldset>

    <input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
</form>

Note how the resulting generated HTML is quite similar to the direct HTML sample from above. There are some differences, such as how the ASP.NET RadioButtonList got converted to a span containing all the radio buttons…ugly. But it does work. And the appearance is virtually the same between the two versions. That’s the default ASP.NET rendering, and was the subject of debate when .NET first made its debut. But the good news is that you can overide the default behavior of a particular web control, telling it what HTML markup to generate. But that’s beyond the scope of this article. Maybe later.

It is worth noting that a lot of web controls are converted one-for-one from their ASP.NET form to the HTML equivalents. For example, <asp:TextBox id="txtFirstName" runat="server"></asp:TextBox> becomes <input name="txtFirstName" type="text" id="txtFirstName" /> and <asp:ListBox id="lbxInterests" runat="server" SelectionMode="Multiple">...</asp:ListBox> becomes <select name="lbxInterests" size="4" multiple="multiple" id="lbxInterests">...</select>.

Retrieving Submitted Form Data

Fortunately, what with the different ways to build forms, handling the form submission can be done in nearly the same way in both ASP and ASP.NET. Here’s how, continuing from the previous form example.

Retrieving a form’s submitted values in Classic ASP:


Dim FirstName, LastName, Gender, Interests

FirstName = Request.Form("txtFirstName")
LastName = Request.Form("txtLastName")
Gender = Request.Form("rblGender")
Interests = Split(Request.Form("cblInterests"), ",")

And to do the same in ASP.NET:


Dim FirstName, LastName, Gender As String
Dim Interests As Array

FirstName = Request.Form("txtFirstName")
LastName = Request.Form("txtLastName")
Gender = Request.Form("rblGender")
Interests = Request.Form("cblInterests").Split(New [Char]() {","c})

Declaring the variables is different in Classic ASP, since it does not have distinct variable types, just one type that holds anything and everything. ASP.NET, however, is a strongly typed language, so it has different types of variables to hold different bits of information. That’s a language difference. Actually retrieving the submitted form values is just the same for each, referring to Request.Form("..."), which is common to both platforms. Following is another language difference: ASP’s Split method is a global function, where the one in ASP.NET is a function of the String type. Of course, each version of Split is used in different ways, with different parameters. But the end effect is the same: the group of whichever Interests were selected get put into an array.

Admittedly, this example is somewhat trivial, but it goes to show that value retrieval from forms is nearly the same for both ASP and ASP.NET, aside from the language specific details such as those mentioned above.

Conclusion

We’ve seen that building web forms is rather different between ASP and ASP.NET, but that in the end they both use essentially the same HTML markup. There are some quirks with the ASP.NET web controls, but they aren’t difficult to deal with, and some actually help you to simplify things a little. It was also demonstrated that an ASP form written in plain HTML appears the same on a page as one written in ASP.NET using web controls, since in the end they both use (nearly) the same HTML.

Finally, it turns out that retrieving form data is very similar between the two platforms; all that is required is a basic understanding of each, and their differences from the other, so you can go from one to the other as necessary. If you’re not splitting strings into arrays or anything complicated, you could just copy and paste value-retrieval code from one to the other.

Make a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>