By adding just a few more controls, you can create a complete form with which users can interact. You will do this by adding a more appropriate greeting (“Welcome to Northwind”), a text box to accept the name of the user, two new buttons (Order and Cancel), and text that provides feedback to the user. Figure 19-14 shows the form.
This form won’t win any awards for design, but its use will
illustrate a number of key points about Web Forms. Example 19-1 is the complete
HTML for the .aspx
file.
Example 19-1. Completed shipper form Default.aspx
<%@ Page AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Choose Shipper</title> </head> <body> <form id="form1" runat="server"> <table style="width: 166px; height: 33px"> <tr> <td colspan="2" style="height: 20px"> Welcome to Northwind </td> </tr> <tr> <td>Your name:</td> <td><asp:TextBox ID="txtName" runat="server" /></td> </tr> <tr> <td>Shipper:</td> <td> <asp:RadioButtonList ID="RadioButtonList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="CompanyName" DataValueField="ShipperID"> </asp:RadioButtonList> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [ShipperID], [CompanyName]FROM [Shippers]" /> <br /> </td> </tr> <tr> <td><asp:Button ID="btnOrder" runat="server" Text="Order" /></td> <td><asp:Button ID="btnCancel" runat="server" Text="Cancel" /></td> </tr> <tr> <td colspan="2"><asp:Label ID="lblMsg" runat="server" /></td> </tr> </table> </form> </body> </html>
When the user clicks the Order button, you’ll check that the user
has filled in his name, and you’ll also provide feedback on which
shipper was chosen. Remember, at design time, you can’t know the name of
the shipper (this is obtained from the database), so you’ll have to ask
the ListBox
for the chosen name (and
ID).
To accomplish all of this, switch to Design mode and double-click
the Order button. Visual Studio will put you in the code-behind page,
and will create an event handler for the button’s Click
event.
You add the event-handling code, setting the text of the label to
pick up the text from the text box and the text and value from the
RadioButtonList
:
protected void btnOrder_Click( object sender, EventArgs e ) { lblMsg.Text = "Thank you " + txtName.Text.Trim( ) + ". You chose " + rblShippers.SelectedItem.Text.ToString( ) + " whose ID is " + rblShippers.SelectedValue.ToString( ); }
When you run this program, you’ll notice that none of the radio
buttons are selected. Binding the list did not specify which one is the
default. There are a number of ways around this, but the simplest is to
override the OnLoad
event and set the
first radio button to be selected.
Return to the Shipper.aspx.cs
and type protected override
. You
will see a scrolling list of all the overrideable methods, properties,
etc. Start typing the first letters of OnLoad, as shown in Figure 19-15.
When OnLoad is highlighted, press Tab to accept the method. The
stub for the overridden method is created, but its default body throws
the NotImplementedException
.
Delete the exception and replace it with this code:
rblShippers.SelectedIndex = 0;
This selects the first radio button in the RadioButtonList
. The problem with this
solution is subtle. If you run the application, you’ll see that the
first button is selected, but if you choose the second (or third) button
and click OK, you’ll find that the first button is reset. You can’t seem
to choose any but the first selection. This is because each time the
page is loaded, the OnLoad
event is
run, and in that event handler, you are (re-)setting the selected
index.
The fact is that you only want to set this button the first time the page is selected, not when it is posted back to the browser as a result of the OK button being clicked.
To solve this, wrap the setting in an if
statement that tests if the page has been
posted back:
protected override void OnLoad( EventArgs e ) {if ( !IsPostBack ) { rblShippers.SelectedIndex = 0; } }
When you run the page, the IsPostBack
property is checked. The first time
the page is posted, this value is false and the radio button is set. If
you click a radio button and then click OK, the page is sent to the
server for processing (where the btnOrder_Click
handler is run), and then the
page is posted back to the user. This time, the IsPostBack
property is true, and thus the code
within the if
statement isn’t run,
and the user’s choice is preserved, as shown in Figure 19-16.
The complete code-behind form is shown in Example 19-2.
Example 19-2. Code-behind form for Shipper.aspx.cs
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { }protected void btnOrder_Click( object sender, EventArgs e ) { lblMsg.Text = "Thank you " + txtName.Text.Trim( ) + ". You chose " + rblShippers.SelectedItem.Text.ToString( ) + " whose ID is " + rblShippers.SelectedValue.ToString( ); } protected override void OnLoad( EventArgs e ) { if ( !IsPostBack ) { rblShippers.SelectedIndex = 0; } } }