Creating Basic Web Form Pages

This chapter is from the book

ASP .NET Kick Start

Learn More Buy

This chapter is from the book

This chapter is from the book 

ASP .NET Kick Start

Learn More Buy

Handling Events

As you've seen in previous sections, controls in a Web Form Page can raise events. For example, when you click a button, the Button control raises a Click event. Or, when you select a new list item in a ListBox control, the control raises a SelectedIndexChanged event.

A Web Form Page itself can raise events. For example, you can use page events to perform certain actions whenever the page is requested by a browser.

In the following sections, you'll learn how to handle both control and page events.

Handling Control Events

If you want to perform some action whenever an event is raised by a control, you need to add an event handler to your code. An event handler is a method or subroutine that executes when a certain event is raised.

There are two ways you can add event handlers to your code. First, you can double-click a control on the Designer surface. Double-clicking a control will automatically switch you to the Code Editor and add an event handler for the control's default event.

If you need to add an event handler for something other than a control's default event, you'll need to perform different steps, depending on whether you are working with C# or VB.NET.

To add an event handler with C#, you need to select the control from the drop-down list in the Properties window. Next, click the icon at the top of the Properties windows labeled events (the lightning bolt). Clicking the events button will display a list of all the events associated with the control. You can double-click any of the events listed in the properties window to add an event handler for that event.

To add an event handler when working with VB.NET, you need to switch to the Code Editor (select Code from the View menu). Select a control from the Classname drop-down list that appears at the top-left of the Code Editor. If you select an event from the Method Name drop-down list that appears at the top-right of the Code Editor, the corresponding event handler will be automatically added to your code (see Figure 3.11).

Figure 3.11 Adding an event handler in VB.NET from the Code Editor.

In most cases, the default event is the one with which you'll want to work. For example, if you add a Button control named Button1 to a page and you double-click the button on the Designer surface, the following event handler is added to the Code Editor:

C#

private void Button1_Click(object sender, System.EventArgs e)
{
}

VB.NET

Private Sub Button1_Click(ByVal sender As Object, 
ByValue As System.EventArgs) 
Handles Button1.Click

End Sub

An event handler always accepts two parameters—an Object parameter and an EventArgs parameter. All event handlers, regardless of the nature of the event, have the same two parameters.

The Object parameter represents the control that raised the event. You might want to associate multiple controls with the same event-handling subroutine. In that case, you could use the Object parameter to identify the control that raised the event.

The System.EventArgs parameter contains additional information about the event that was raised. This parameter is useless in the case of a simple Button control because there is no additional event information to pass to the event-handling subroutine.

An example of a control with a more interesting EventArgs parameter is the ImageButton control. The event handler for an ImageButton Click event looks like the following:

C#

private void ImageButton1_Click(object sender, 
System.Web.UI.ImageClickEventArgs e)
{
}

VB.NET

Private Sub ImageButton1_Click(ByVal sender As System.Object, 
ByValue As System.Web.UI.ImageClickEventArgs) 
Handles ImageButton1.Click

End Sub

Notice that the second parameter passed to this event handler is a System.Web.UI.ImageClickEventArgs parameter. This parameter has two properties that you can read in your code—an X property that represents the x coordinate of location where the user clicked and a Y property that represents the y coordinate of where the user clicked.

For example, you can display the values of the X and Y properties by using a Label control as shown in the following:

C#

private void ImageButton1_Click(object sender, 
System.Web.UI.ImageClickEventArgs e)
{
 Label1.Text = "You clicked at the following coordinates:";
 Label1.Text += e.X;
 Label1.Text += " and ";
 Label1.Text += e.Y;

}

VB.NET

Private Sub ImageButton1_Click(ByVal sender As System.Object, 
ByValue As System.Web.UI.ImageClickEventArgs) 
Handles ImageButton1.Click
 Label1.Text = "You clicked at the following coordinates:"
 Label1.Text &= e.X
 Label1.Text &= " and "
 Label1.Text &= e.Y
End Sub

If you add this event handler to your Web Form Page and click the image displayed by the ImageButton, the page in Figure 3.12 is displayed.

Figure 3.12 Using the ImageClickEventArgs parameter.

Handling Page Events

A Web Form Page itself has several events that you can handle in your code. The most important of these events is the Page_Load event.

When you create a Web Form Page, Visual Studio .NET automatically creates a Page_Load event handler to handle the Page_Load event for you. You can view this event handler by switching to the Code Editor:

C#

private void Page_Load(object sender, System.EventArgs e)
{
 // Put user code to initialize the page here
}

VB.NET

Private Sub Page_Load(ByVal sender As System.Object, 
ByValue As System.EventArgs) Handles MyBase.Load
 'Put user code to initialize the page here
End Sub

This Page_Load subroutine is executed every time someone requests the Web Form Page. The Page_Load subroutine is used most often for initializing variables and controls contained in the Web Form Page.

For example, suppose that you want to display the number of days, hours, minutes, and seconds until the new millennium (the year 3001) in a Label control every time a page is requested (see Figure 3.13).

Figure 3.13 Displaying the number of days until the millennium.

First, you need to create the necessary controls:

1. Create a new Web Form Page named ShowDays.aspx by selecting Project, Add Web Form.

2. Add a Label control to the Web Form Page by dragging the Label control located under the Web Forms tab on the Toolbox onto the Designer surface.

Next, you need to add the code that displays the number of days, hours, minutes, and seconds to the next millennium:

1. Switch to the Code Editor by double-clicking the Designer surface.

2. Enter the following code for the Page_Load method:

   C#

   private void Page_Load(object sender, System.EventArgs e)
   {
    TimeSpan objSpan = 
     DateTime.Parse( "1/1/3001" ) - DateTime.Now;
    Label1.Text = String.Format(
     "Only {0} days, {1} hours, {2} minutes, {3} seconds left!", 
     objSpan.Days,
     objSpan.Hours,
     objSpan.Minutes,
     objSpan.Seconds);
   }

   VB.NET

   Private Sub Page_Load(ByVal sender As System.Object, 
   ByValue As System.EventArgs) Handles MyBase.Load
    Dim objSpan As TimeSpan
   
    objSpan = _
     DateTime.op_Subtraction(#1/1/3001#, DateTime.Now)
    Label1.Text = String.Format( _
     "Only {0} days, {1} hours, {2} minutes, {3} seconds left!", _
     objSpan.Days, _
     objSpan.Hours, _
     objSpan.Minutes, _
     objSpan.Seconds)
   End Sub

3. Right-click the page in the Solution Explorer window and select Build and Browse.

After you create this Web Form Page, a countdown to the new millennium is displayed in the Label control every time you refresh the page (click the Refresh button). The countdown is updated within the Page_Load event handler.

The IsPostBack Property

Code located in the Page_Load subroutine executes each and every time a page is requested. Often, this is not what you want. In many cases, you want to execute code only when the page is first requested.

All controls, both HTML controls and Web controls, retain their values between posts back to the same page on the Web server. For example, if you assign text to a Label control and click a Button control to reload the page, the Label control will retain the text when the page is redisplayed.

The Data controls, such as the Repeater and DataGrid controls, also retain their values between post backs to the server. For example, if you grab data from a database in the Page_Load event handler and assign the data to a DataGrid control, the DataGrid control will automatically retain the data, even if you repeatedly reload the page by clicking a Button control.

Because controls automatically retain their values between post backs to the server, you typically do not need to assign values to the controls each and every time the page is requested. Typically, you want to assign the value only when the page is first requested.

You can detect whether a page is being requested for the first time by using the IsPostBack property. The IsPostBack property has the value False the first time a page is requested and the value True if the page has been submitted back to the server at least once (for example, by clicking a Button or LinkButton control).

For example, suppose that you want to display the current date and time when the page is first requested, but not when the page is posted back to itself.

First, you need to add the necessary controls:

1. Create a new Web Form Page named DisplayOnce.aspx by selecting Add Web Form from the Project menu.

2. Add a Label control to the Web Form Page by dragging the Label control from beneath the Web Forms tab on the Toolbox onto the Designer surface.

3. Add a Button control to the Web Form Page by dragging the Button control from under the Web Forms tab on the Toolbox onto the Designer surface.

4. Select Code from the View menu to switch to the Code Editor.

Next, you need to add the code to display the current time:

1. Double-click the Designer surface to switch to the Code Editor.

2. Enter the following code for the Page_Load() method:

   C#

   private void Page_Load(object sender, System.EventArgs e)
   {
    if (!IsPostBack)
     Label1.Text = DateTime.Now.ToString();
   }

   VB.NET

   Private Sub Page_Load(ByVal sender As System.Object, 
   ByValue As System.EventArgs) Handles MyBase.Load
    If Not IsPostBack Then
     Label1.Text = DateTime.Now
    End If
   End Sub

3. In the Solution Explorer window, right-click the Web Form Page and select Build and Browse.

When the page is first opened, the current date and time is displayed (see Figure 3.14). However, if you click the Button control, the current date and time are not updated. The IsPostBack property is used in the Page_Load event handler to prevent the Label control from being updated when the page is posted back to the server.

Figure 3.14 Using the IsPostBack property.