AddThis Social Bookmark Button

Print

Writing ASP.NET Web Forms with C#
Pages: 1, 2, 3, 4, 5, 6

Listing 3: A Web Forms application.



<html>
<head>
<title>Web Forms Login Application</title>
<script language="C#" runat="Server">

void Button1_Click(object Source, EventArgs e) {
  if (userName.Value.Equals("kittyhawk") &&
    password.Value.Equals("toronto"))
    message.InnerHtml="Welcome Kitty Hawk.";
  else
    message.InnerHtml="Login failed. Please try again.";
}
</script>
</head>

<body>
<form runat=server>
UserName: <input id="userName" runat=server>
<BR>
Password: <input id="password" type=password runat=server>
<BR>
<input type=submit OnServerClick="Button1_Click" runat=server>
</form>

<p><span id="message" runat=server/>
</body>
</html>

There are a few striking differences between the Web Forms code in Listing 3 and the ASP application in Listings 1 and 2. First, the form in Listing 3 does not have an action attribute; when the form is submitted, the HTTP request will go to the same page. A recursive page. Also, instead of the NAME attribute in every element, you have the id attribute. If your form does not have a method attribute, POST is used by default. This is in contrast to the old ASP, where the default method for forms is GET. Secondly, you may notice that there are the runat attributes in the form tag, the input tags, and the span tag. All the attributes have the =server values. For each element with runat=server, an attribute/value pair, the server processes it prior to sending it to the browser. The result of this server processing is shown in the HTML code that is sent when the page is requested for the first time.

<html>
<head>
<title>Web Forms Login Application</title>

</head>

<body>
<form name="ctrl2" method="post" action="mywebform.aspx"
  id="ctrl2">
<input type="hidden" name="__VIEWSTATE" 
  value="YTB6LTE2NTg0NDUzODRfX194845307e0" />

UserName: <input name="userName" id="userName" type="text" />
<BR>
Password: <input name="password" id="password" type="password" />
<BR>
<input name="ctrl7" type="submit" />
</form>

<p><span id="message"></span>
</body>
</html>

See how the server has supplied the action and method attributes for the form? Also, each HTML object has a name as well as an id. The exception to this is the hidden input element called __VIEWSTATE that is generated by the server. This hidden field is a container for a collection of information about the properties of a Web Forms page.

When the user submits the form, the HTTP request will be sent to the server, like in the old ASP. However, on the server the submit button has the following tag.

<input type=submit OnServerClick="Button1_Click" runat=server>

In the code above, the OnServerClick attribute tells the server what it has to do when the submit button is clicked: run the Button1_Click event procedure. For reading convenience, the Button1_Click event procedure is re-written below.

void Button1_Click(object Source, EventArgs e) {
  if (userName.Value.Equals("kittyhawk") &&
    password.Value.Equals("toronto"))
    message.InnerHtml="Welcome Kitty Hawk.";
  else
    message.InnerHtml="Login failed. Please try again.";
}

What it does is very simple; it compares the value of the text box called userName and the value of password. If the values are "kittyhawk" and "toronto" respectively, it sets the value of message.InnerHtml to "Welcome Kitty Hawk.". Otherwise, it will set it to "Login failed. Please try again.". This is shown in Figure 1.

Screen shot.
Figure 1: A Web Forms application

Open the HTML source page, and you'll see the following.

<html>
<head>
<title>Web Forms Login Application</title>

</head>

<body>
<form name="ctrl2" method="post" action="mywebform.aspx" id="ctrl2">
<input type="hidden" name="__VIEWSTATE" value="YTB6LTE2NTg0NDUzODRfYTB6X2h6NXoyeF9hMHpfaHo1ejd4X2Ewemh6aW5uZ
XJodG1sX0xvZ2luIGZhaWxlZC4gUGxlYXNlIHRyeSBhZ2Fpbi54X194eF94eF94X194d
3cc7eda" />

UserName: <input name="userName" id="userName" type="text" value="kittyhawk" />
<BR>Password: <input name="password" id="password" type="password" value="toronto" />
<BR><input name="ctrl7" type="submit" />
</form>

<p><span id="message">Login failed. Please try again.</span>
</body>
</html>

Pages: 1, 2, 3, 4, 5, 6

Next Pagearrow