ASP.NET Basics (Part 7): Command and Control - Alien Invasion
(Page 7 of 7 )
Of course, there is a lot more to these ASP.NET controls than just labels and text boxes. Take a look at the next example that demonstrates other form controls such as checkboxes, radio buttons, drop down lists and much more.
<script language="c#" runat="server">
void Page_Load()
{
// check if the form has been submitted
if(Request.QueryString["submit"] == "Register")
{
output.Text = "You have entered the following:
";
// name field
output.Text = output.Text + "Name:" + name.Text + "
";
// species field
output.Text = output.Text + "Species:" + species.Text + "
";
// species type field
output.Text = output.Text + "Species type: " + speciesType.SelectedValue
+ "
";
// immunization field
output.Text = output.Text + "Immunization against: ";
for(int counter = 0; counter < immunization.Items.Count; counter++)
{
if(immunization.Items[counter].Selected)
{
output.Text = output.Text + immunization.Items[counter].Text + ",";
}
}
output.Text = output.Text + "
";
// address field
output.Text = output.Text + "Address:" + address.Text + "
";
}
}
</script>
<html>
<head>
<basefont face="Arial">
</head>
<body>
<center><asp:label id="output" runat="server" /></center>
<center> <form method="GET" runat="server">
<table cellspacing="5" cellpadding="5" border="0">
<tr>
<td colspan="2" align="center"><font color="red" size="4">Alien Registration Center (ARC)
</font></td> </tr>
<tr>
<td>Name</td>
<td align="left"><asp:textbox id="name" runat="server" /></td> </tr>
<tr>
<td>Species</td>
<td align="left"><asp:textbox id="species" runat="server" /></td> </tr>
<tr>
<td>Species type</td>
<td align="left">
<asp:radiobuttonlist id="speciesType" runat="server">
<asp:listitem id="carbon" runat="server" value="Carbon-based"/>
<asp:listitem id="other" runat="server" value="Other"/>
</asp:radiobuttonlist>
</td>
</tr>
<tr>
<td>Residence</td>
<td align="left">
<asp:dropdownlist id="residence" runat="server" >
<asp:listitem value="Temporary Residence"/>
<asp:listitem value="Permanant Residence"/>
</asp:dropdownlist>
</td>
</tr>
<tr>
<td>Immunization against</td>
<td align="left">
<asp:checkboxlist id="immunization" runat="server" >
<asp:listitem id="spaceworms" runat="server" value="Space Worms" />
<asp:listitem id="asthma" runat="server" value="Asthma " />
<asp:listitem id="yellowfever" runat="server" value="Yellow Fever" />
</asp:checkboxlist>
</td>
</tr>
<tr>
<td>Previous address</td>
<td align="left">
<asp:textbox id="address" rows="5" textmode="multiline" runat="server" />
</td> </tr> <tr> <td colspan="2" align="center">
<input type="submit" name="submit" value="Register"></td> </tr>
</table>
</form>
</center>
</body>
</html>
This is what the form looks like:
The form is constructed using a variety of different server controls. I start with two text controls:
<tr>
<td>Name</td>
<td align="left"><asp:textbox id="name" runat="server" /></td> </tr>
<tr>
<td>Species</td>
<td align="left"><asp:textbox id="species" runat="server" /></td> </tr>
This is followed by a set of radio buttons, created via the "radiobuttonlist" server control. For each radio option, the "listitem" control is used to specify the value:
<tr>
<td>Species type</td>
<td align="left">
<asp:radiobuttonlist id="speciesType" runat="server" >
<asp:listitem id="carbon" runat="server" value="Carbon based"/>
<asp:listitem id="other" runat="server" value="Other"/>
</asp:radiobuttonlist>
</td>
</tr>
Similarly, I have a "dropdownlist" server control which is used to create a drop-down list box for the type of residence:
<tr>
<td>Residence</td>
<td align="left">
<asp:dropdownlist id="residence" runat="server" >
<asp:listitem value="Temporary Residence"/>
<asp:listitem value="Permanant Residence"/>
</asp:dropdownlist>
</td>
</tr>
This is followed by a list of checkboxes. Since more than one can be selected, multiple "checkboxlist" server control are used to display the various options:
<tr>
<td>Immunization against</td>
<td align="left">
<asp:checkboxlist id="immunization" runat="server" >
<asp:listitem id="spaceworms" runat="server" value="Space Worms" />
<asp:listitem id="asthma" runat="server" value="Asthma " />
<asp:listitem id="yellowfever" runat="server" value="Yellow Fever" />
</asp:checkboxlist>
</td>
</tr>
Finally, a multi-line text box - note the addition of the "textmode" attribute to the "textbox" server control -is used for the address.
<tr>
<td>Previous address</td>
<td align="left">
<asp:textbox id="address" rows="5" textmode="multiline" runat="server" />
</td> </tr> <tr> <td colspan="2" align="center">
<input type="submit" name="submit" value="Register"></td> </tr>
The form closes with the mandatory "submit" button. Enter some form values, hit the "Register" button, and you should see something like this:
Since the "runat" attribute of the form is set to "server", ASP.NET will submit this form to the same page. As a result, in the Page_Load() function, I have put together some simple C# code to display the data entered by the user. Take a look:
void Page_Load
()
{
// check if the form has been submitted
if(Request.QueryString["submit"] == "Register")
{
output.Text = "You have entered the following:
";
// name field
output.Text = output.Text + "Name:" + name.Text + "
";
// species field
output.Text = output.Text + "Species:" + species.Text + "
";
// species type field
output.Text = output.Text + "Species type: " + speciesType.SelectedValue
+ "
";
// immunization field
output.Text = output.Text + "Immunization against: ";
for(int counter = 0; counter < immunization.Items.Count; counter++)
{
if(immunization.Items[counter].Selected)
{
output.Text = output.Text + immunization.Items[counter].Text + ",";
}
}
output.Text = output.Text + "
";
// address field
output.Text = output.Text + "Address:" + address.Text + "
";
}
}
The code above analyzes each and every server control in the form, and displays the value provided by the user using the ubiquitous "output" label control. Note the manner in which I have used the "SelectedValue" property of the "radiobuttonlist" to get the value of the radio option selected by the user, and my deft handling of the "Selected" property associated with the "checkboxlist" control. Both these properties allow you to test if the particular option has been selected by the user.
And that's about it for today. I started this article with a fast rundown of the various properties of the Request and Browser objects - both help you obtain more information about the users visiting your Web site. This was followed by some examples of processing form input, and a discussion of the various server controls built into ASP.NET that can simplify the task of constructing forms.
In the next segment of this article, I shall dive straight into the world of database interaction with ASP.NET. I'm sure that many of you have been waiting for this. The time is near, so keep watching this space for more.
Note: Examples are illustrative only, and are not meant for a production environment. Melonfire provides no warranties or support for the source code described in this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 33 
