Adding Controls and Events






Adding Controls and Events

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 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. Figure is the complete HTML for the .aspx file.

Choosing the data fields


Viewing the HTML source code


The shipper form


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.

Using IntelliSense to override OnLoad


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.

The completed shipper form


The complete code-behind form is shown in Figure.

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;
      }
   }
}



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows