Article
ASP.NET Form Processing Basics
Processing a Simple Form
Form submissions in ASP.NET work a little differently than you might be used to. Rather than submitting to a different page, specified in the action attribute of the <form> tag, ASP.NET forms submit back to the same page. While you have the option of sending the browser to a different page in response to the form submission, the page with the form does need to handle the submission somehow.
Here is the code of our page so far:
<%@ Page Language="C#" %>
<html>
<head>
<title>My First ASP.NET Form</title>
<script runat="server">
protected void Page_Load(Object Source, EventArgs E)
{
TimeLabel.Text = DateTime.Now.ToString();
}
</script>
</head>
<body>
<p>Hello <asp:label runat="server" id="NameLabel">
there</asp:label>!</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>
Right now, our server-side script (highlighted in bold above) simply sets the TimeLabel <asp:label> tag to display the current time whenever the page is loaded. We need to expand this script so that when the user submits the form, three things happen:
- The form is hidden, since it is no longer needed.
- The
NameLabel <asp:label>tag's text is set to the name provided by the user - The user's name is displayed in bold.
In the Page_Load script, we can find out if the page was loaded as a result of a form submission by checking the IsPostBack property of the page. You see, when a form is posted (submitted) back to the same page that contains it, it's called a post back. ASP.NET automatically supplies a property called IsPostBack that is true when the page is being loaded as a result of a post back, and is false otherwise.
So our expanded Page_Load script will take the following form if we use C# as the ASP.NET language for the page:
<script runat="server">
protected void Page_Load(Object Source, EventArgs E)
{
if (IsPostBack)
{
// Form processing code here ...
}
TimeLabel.Text = DateTime.Now.ToString();
}
</script>
The section in bold is an if statement. The code that appears between the curly braces will only be executed if the condition between the parentheses is true. So the form processing code will only be executed if the page is loading as a result of a post back. Note that since the code for setting the text of TimeLabel is outside the if statement, it will occur every time the page is loaded - not just for post backs.
Incidentally, in C#, lines that start with // are ignored. These are called comments, and let you write little notes to remind yourself of how the code works. In these articles, I'll use comments to help you understand the code as I have above.
If you prefer VB.NET, it has an if statement as well, though the syntax is somewhat different:
<script runat="server">
Sub Page_Load(Source As Object, E As EventArgs)
If IsPostBack Then
' Form processing code here ...
End If
TimeLabel.Text = DateTime.Now.ToString()
End Sub
</script>
You'll also note that comments in VB.NET begin with an apostrophe (').
Okay, so we can now write code that happens when the page is the result of a post back. As your knowledge of ASP.NET improves you'll be able to do things like store submitted values into a database, send an email containing the values from the form, or check if the user is allowed to access your site. For now, however, let's add the code for the three simple things we want our example to do.
First, we need to hide the form. Since we assigned the form an id of NameForm in the HTML code of the page, we can do this very easily:
NameForm.Visible = false;
Next, we need to set the <asp:label> tag with id="NameLabel" to display the name submitted by the user. We already know how to set the text of an <asp:label> tag, but how do we get the name submitted by the user? Well, since the user typed the value into the <asp:textbox> with id="NameBox", the name can be accessed as NameBox.Text. So the to display the user's name we just write:
NameLabel.Text = NameBox.Text;
Finally, we want to make the user's name appear in bold to make him or her feel more important, and to highlight just how smart our page is! To do this, we will assign a Cascading Style Sheet (CSS) attribute to the NameLabel element that displays the user's name. Here's how it's done:
NameLabel.Style.Add( "font-weight", "bold" );
The code for these three lines in VB.NET is actually identical to the C# versions we've just seen; just remove the semicolon from the end of each line.