Article
Event Driven ASP.NET Development with C#
Postback vs. Non-Postback Events
As I mentioned above, there are literally hundreds (if not thousands) of events scattered throughout the .NET Framework to which you can react with event handlers. Some of the events occur as a result of user activity (e.g. the Click event we've experimented with so far), while others are generated by ASP.NET itself (e.g. a database item getting inserted into a DataGrid control). Of the user-generated events, there are two types:
- Postback Events that are immediately reported to the Web server via a form submission (e.g. buttons, hyperlinks, etc.).
- Non-Postback Events that the browser takes note of but doesn't report until the next form submission (e.g. checkbox, radio button, and list selections, text entries, etc.).
To demonstrate this, let's switch from using Buttons to RadioButtons in our example. Here's the .aspx:
<%@ Page Inherits="ButtonTest" src="ButtonTest.cs" %>
<html>
<head>
<title> Event handler example </title>
</head>
<body>
<form runat="server">
<p>
<asp:Label runat="server" id="message">
Choose an option!</asp:Label>
</p>
<p>
<asp:RadioButton runat="server" id="button1"
Text="One" GroupName="radioGroup" /><br />
<asp:RadioButton runat="server" id="button2"
Text="Two" GroupName="radioGroup" /><br />
<asp:RadioButton runat="server" id="button3"
Text="Three" GroupName="radioGroup" /><br />
</p>
<p>
<asp:Button runat="server" id="submitButton"
Text="Submit" />
</p>
</form>
</body>
</html>
In this example, we have three <asp:RadioButton> tags, all of which share the same GroupName. This will create a group of three radio buttons, of which only one may be selected at a time.
Here's the code behind file:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
public class ButtonTest : Page
{
protected RadioButton button1;
protected RadioButton button2;
protected RadioButton button3;
protected Label message;
protected void Page_Init(Object sender, EventArgs e)
{
EventHandler selectionHandler =
new EventHandler(RadioChange);
button1.CheckedChanged += selectionHandler;
button2.CheckedChanged += selectionHandler;
button3.CheckedChanged += selectionHandler;
}
protected void RadioChange(Object sender, EventArgs e)
{
RadioButton checkedButton = null;
if (button1.Checked)
checkedButton = button1;
else if (button2.Checked)
checkedButton = button2;
else if (button3.Checked)
checkedButton = button3;
if (checkedButton != null)
message.Text = "You selected: " + checkedButton.Text;
}
}
As you can see, RadioButton objects have a CheckedChanged event of type EventHandler that is fired whenever the radio button in question changes its selection state. By assigning the same event handler (selectionHandler) to the CheckedChanged event of all three radio buttons, we can be notified whenever the user selects a new radio button from the list.
But since the CheckedChanged event is not a Postback Event, it doesn't fire until the next form submission, which is why we still need an <asp:Button> to submit the form.
Fortunately, most ASP.NET controls that have Non-Postback Events, RadioButton included, also have an AutoPostBack property that changes all of its events into Postback Events. Thus, by merely setting the AutoPostBack property of the three radio buttons to true, we can do away with the submit button:
<%@ Page Inherits="ButtonTest" src="ButtonTest.cs" %>
<html>
<head>
<title> Event handler example </title>
</head>
<body>
<form runat="server">
<p>
<asp:Label runat="server" id="message">
Choose an option!</asp:Label>
</p>
<p>
<asp:RadioButton runat="server" id="button1"
Text="One" GroupName="radioGroup"
AutoPostBack="true" /><br />
<asp:RadioButton runat="server" id="button2"
Text="Two" GroupName="radioGroup"
AutoPostBack="true" /><br />
<asp:RadioButton runat="server" id="button3"
Text="Three" GroupName="radioGroup"
AutoPostBack="true" /><br />
</p>
</form>
</body>
</html>
As shown in Figure 3, the message now updates as soon as the user selects one of the radio buttons.
Figure 3: CheckedChanged becomes a Postback Event with AutoPostBack="true"