Event Handlers and Automatic Postback in ASP.NET 3.5 Web Controls

In one of last week’s tutorials, “Creating Database-Driven ASP.NET 3.5 Input and List Web Controls,” you learned how to create a dynamic input web control that, instead of setting values “statically,” stored its list and values directly from the MS SQL server 2008 database. This tutorial is a sequel to that article. It deals mostly with the “server side” coding aspect of dynamic web controls. It is recommended that you read the earlier tutorial first, as the Visual Web Developer Project in that tutorial will be used extensively in this article.

The server side coding of these dynamic web controls makes it possible for an ASP.NET web application to do something when users either click the submit button, or select choices and let the server do something without the user actually clicking the submit button.

The first option, involving the submit button, is common, and can be accomplished using the "event handlers" technique in ASP.NET. The second option, in which the server does something without the user actually clicking a submit button, requires a new technique and will be discussed later in this tutorial.

Adding a Submit Button to Every Dynamic Web Control

The output of the tutorial on creating database-driven ASP.NET 3.5 input and list web controls does not include a submit button in every type of input web control. To add a submit button, you need to do the following:

Step 1: Open the project in Visual Web Developer.

Step 2: In the Source Code View, click and drag the "Button" web control (View -> Toolbox -> Standard) to the last section of the <form>…</form> tag. Change the Text="Button" to Text="Submit."

Step 3: To display results coming from the web server, as usual you will need the "Label" web control. Click and drag it to just outside the </form> tag, because the output is not a part of the web form. Change Text to "".

Complete step 2 and step 3 for all three ASP.NET pages (radiobuttonlist.aspx, dropdownlist.aspx and checkboxlist.aspx). If you have completed these steps, the complete code should look somewhat like this (radiobuttonlist.aspx example):

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="radiobuttonlist.aspx.vb" Inherits="radiobuttonlist" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

SelectCommand="SELECT * FROM [renovationproject]"></asp:SqlDataSource>

<br />

Using Radiobuttonlist input web control:

<br />

<asp:RadioButtonList ID="RadioButtonList1" runat="server"

DataSourceID="SqlDataSource1" DataTextField="tasks" DataValueField="workid">

</asp:RadioButtonList>

<br /><br />

<asp:Button ID="Button1" runat="server" Text="Submit" />

</div>

</form>

<br /><br />

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

</body>

</html>

The rest of the code for other ASP.NET pages can be found here:

Checkboxlist.aspx = http://www.dotnetdevelopment.net/tutorials/checkboxlist.htm

Dropdownlist.aspx = http://www.dotnetdevelopment.net/tutorials/dropdownlist.htm

{mospagebreak title=Event Handler for a Dynamic Web Control}

Remember from the previous tutorial that these web controls are meant to display two columns of data from the renovation project database. These columns are:

1. DataTextField="tasks." This is exactly what is shown in the web browser, the choices the user can see and select.

2. DataValueField="workid." The user cannot see this in the browser. However, this is the work ID equivalent of the tasks which are grabbed from the SQL server database. See below for a screen shot of the database table:

Since the dynamic web controls are configured to grab these two columns from the renovation project database, they are the ones shown in the user’s browser using the DataTextfield and DataValueField properties.

It would be important to write a server side code that will react if the user clicks the submit button after making some choices. For example, if you would like ASP.NET to display the user-selected choices in the drop-down list (Dropdownlist.aspx) to the browser, we’ll need something completely different from the "static" version of the drop-down list.

If you remember the drop-down list basics tutorial in ASP.NET 3.5, the Visual Basic server side code to display the user-selected choices in the drop-down list looked like this:

Inherits System.Web.UI.Page

Protected Sub Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Submit.Click

‘Declare variable which will be assigned to user input

Dim selectedmovies As String

‘Get user inputs from the drop down list and assign to Visual Basic variable

selectedmovies = firstdropdownlist.SelectedItem.Text

‘Output the user input to the browser

favoritemovies.Text = "Your favorite science fiction movie is: " & selectedmovies

End Sub

Please note two things. First, the static version of web controls (e.g. drop down list, check box or radio buttons) will use the Submit_Click event handler. Second, that the sample VB code to display text is:

selectedmovies = firstdropdownlist.SelectedItem.Text

But in a dynamic web control, as opposed to a static version of a web control,  event handler triggering is somewhat different. Suppose you would like to display the "workid" corresponding to the "task" selected by the user. Let’s look at an example using a drop-down list (Dropdownlist.aspx):

Step 1: Go to the Design View of DropDownList.aspx.

Step 2: Look for the DropDownList web control and double click it. Below is a sample dropdownlist (inside the red box):

Step 3: What you will see next is the VB editor for dropdownlist.aspx.vb. You will need to insert your code between Protected Sub and End Sub. To display the user-selected choices to the web browser using a drop-down list dynamic web control. For example:

Label1.Text = "Your selected choices in the drop down list is: " & DropDownList1.SelectedValue

Let me explain the ID used. Label11 is the web control label added on the ASP.NET page dropdownlist.aspx (added outside the </form tag).See the code here: http://www.dotnetdevelopment.net/tutorials/dropdownlist.htm

DropDownList1.SelectedValue is the ID used by the dropdownlist web control in dropdownlist.aspx (see code in the link provided above).

The ID between the ASP.NET page and the one used in the Visual Basic server side coding should exactly match to avoid errors.

{mospagebreak title=The Complete DropDownList.aspx.vb Source Code}

Here is the complete source code for DropDownList.aspx.vb:

Partial Class dropdownlist

Inherits System.Web.UI.Page

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged

Label1.Text = "Your selected choices in the drop down list is: " & DropDownList1.SelectedValue

End Sub

End Class

Below is a screen shot of sample output shown in the web browser:

If you look at the database table (the first screen shot in this article), the task "Repair Christian Toilet Bowl" corresponds to a workid of 5.

The same programming and coding concept can be applied to the rest of the dynamic web controls (Checkboxlist.aspx and Radiobuttonlist.aspx). Below are the VB server side codes of those pages:

Checkboxlist.aspx = http://www.dotnetdevelopment.net/tutorials/checkboxlistvbcode.htm

Radiobuttonlist.aspx = http://www.dotnetdevelopment.net/tutorials/radiobuttonlistvbcode.htm

{mospagebreak title=Creating Automatic Postback for Dynamic Web Control}

There can be instances where, for reasons of website application usability, you will need to automatically send postback to the server for dynamic web controls. In this case, once the user has made some changes or altered the original state of the web control (whether it be a checkbox, radio buttons or drop-down list), using "automatic postback" will cause it to immediately execute the "SelectedIndexChanged" in the server side code WITHOUT requiring the user to click the "Submit" button.

The "Submit" button is now useless and can be removed from the code. To create an automatic postback, follow the procedure below.

1. Make sure the dynamic web control is fully configured to fetch data from the database. Refer to the tutorial on creating database-driven ASP.NET 3.5 input and list web controls cited earlier in this article.

2. Since the submit button is useless with the "automatic postback" method, it will not be added to the web form.

3. An ASP.NET label web control should be added to the source code for the results to be displayed.

4. Event handlers should be added and created for those web controls (refer to the "Event Handler for Dynamic Web Control" section pf this tutorial).

5. To all dynamic web controls, add this property:

AutoPostBack="True"

Examples:

1. DropDownList web control:

<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"

DataTextField="tasks" DataValueField="workid" AutoPostBack="True">

</asp:DropDownList>

2. CheckBoxList Web control:

<asp:CheckBoxList ID="CheckBoxList1" runat="server"

DataSourceID="SqlDataSource1" DataTextField="tasks" DataValueField="workid" AutoPostBack="True">

</asp:CheckBoxList>

3. RadioButtonList web control:

<asp:RadioButtonList ID="RadioButtonList1" runat="server"

DataSourceID="SqlDataSource1" DataTextField="tasks"

DataValueField="workid" AutoPostBack="True">

</asp:RadioButtonList>

Save all edited files and you will notice that every time you select choices, instead of clicking the submit button to send a post back to the server, ASP.NET will automatically return and display the selected choices.

Alternatively, aside from manually encoding AutoPostBack="True" in the web control, you can simply check "Enable AutoPostBack" in the web control’s "Show Smart Tag" in the Visual Web Developer design view. See the screen shot below:

[gp-comments width="770" linklove="off" ]