Article
ASP.NET Form Processing Basics
ASP.NET Server Controls
Here's what we'd like our page to look like as it prompts the user for his or her name:
As you can see, this page contains a text field and a submit button. If you were to create this page with standard HTML, the code for the form would look something like this:
<form action="hellothere-cs.aspx">
<p>Do you have a name?</p>
<p><input type="text" name="NameBox" />
<input type="submit" value="Submit" /></p>
</form>
Now, ASP.NET provides a set of special tags called Server Controls. We saw a simple sever control in the previous article in this line of code:
<p>The time is now: <asp:label runat="server" id="TimeLabel" /></p>
The <asp:label> tag here is an example of an ASP.NET Server Control. Server Controls are elements of ASP.NET Web pages (or as Microsoft calls them, Web Forms) that you can access with server-side code. In this case, our Page_Load script set the text of the <asp:label> tag to show the current time.
While some simple Server Controls such as <asp:label> exist for general use, the majority of Server Controls are for use in forms. The <asp:textbox> control, for example, is one of the most commonly used controls in ASP.NET. Here's how our form looks once it has been modified to use an <asp:textbox> Server Control:
<form runat="server" id="NameForm">
<p>Do you have a name?</p>
<p><asp:textbox runat="server" id="NameBox" />
<input type="submit" value="Submit" /></p>
</form>
You'll notice that I've replaced the <input type="text"> tag with an <asp:textbox> tag. The runat="server" attribute tells ASP.NET that it's responsible for turning the tag into something that Web browsers will understand. We've also changed the name attribute of the <input type="text"> tag into an id attribute, since ASP.NET Server Controls expect to be identified by their id.
You'll also notice that I've changed the <form> tag slightly. Any form that contains ASP.NET Server Controls must have a runat="server" attribute, because ASP.NET needs to know not only about the Server Controls but also about the forms that they belong to. I've also assigned an id to the form so we can refer to it elsewhere in our code if we need to. The action attribute of the <form> tag has been removed entirely; ASP.NET takes care of adding it for us when it processes the <form> tag.
Let's concentrate on the <asp:textbox> tag for now. By setting various attributes of <asp:textbox>, it can act as a server-side substitute for the HTML <input type="text"> and <textarea> tags. So basically any time you want users to type in text, <asp:textbox> is the tag to use. In this case, it acts just like an <input type="text"> tag, except that it has all the features of an ASP.NET Server Control (most importantly for our purposes, it can be accessed conveniently from our ASP.NET code).
Let's slot this form code into our hellothere-cs.aspx file:
<%@ Page Language="C#" %>
<html>
<head>
<title>My First ASP.NET Page</title>
<script runat="server">
protected void Page_Load(Object Source, EventArgs E)
{
TimeLabel.Text = DateTime.Now.ToString();
}
</script>
</head>
<body>
<p>Hello there!</p>
<form runat="server" id="NameForm">
<p>Do you have a name?</p>
<p><asp:textbox runat="server" id="NameBox" />
<input type="submit" value="Submit" /></p>
</form>
<p>The time is now: <asp:label runat="server" id="TimeLabel" /></p>
</body>
</html>
We'll make one more change to the HTML of this page before we move on to processing the form submission. The greeting on the page is currently produced by this simple HTML code:
<p>Hello there!</p>
When the user provides a name, we want to replace the word 'there' with his or her name. We'll make this possible by surrounding the word with an <asp:label> tag:
<p>Hello <asp:label runat="server" id="NameLabel">there
</asp:label>!</p>
Previously, we used a self-closing <asp:label> tag (i.e. <asp:label ... />) for the TimeLabel to create a spot in the document where we could insert the current time. In this case, we've surrounded a segment of text (the word 'there') with an <asp:label> tag to mark a piece of the document that we can change.
You can think of 'there' as the default text to be displayed by the <asp:label> Server Control. In fact, if you prefer using a self-closing tag, you can specify the text ('there') as an attribute instead:
<p>Hello <asp:label runat="server" id="NameLabel" text="there" />!</p>
With our HTML code in place, let's move on to the server-side script.