Introduction & Demonstration
In Part
- 4 article of this series, we have discussed how to display records in
GridView based on the selected item in DropDownList. If user is not selecting
any item from DropDownList and clicking on button to show some related data then
it will show the error message but in this article we will discuss how to enable
Automatic PostBack to server for different list controls.
Automatic PostBack
All the List controls, except for the BulletedList control, support a property
named the AutoPostBack propertyg. When this property is assigned the value true,
the form containing the List control is automatically posted back to the server
whenever a new selection is made.
For example, the page given below contains a DropDownList control that has its
AutoPostBack property enabled. When we select a new item from the DropDownList
control, the page is automatically posted back to the server and the Label
control displays the selected item. Basically Automatic PostBack is used to
eliminate the use of button_click event updating. Let's take a look at code
here.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub ddlProductChanged(ByVal
sender As Object,
ByVal e As EventArgs)
lblSelectedProduct.Text = ddlProducts.SelectedItem.Text
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList
id="ddlProducts"
DataSourceID="SqlDataSource1"
DataTextField="NAME"
DataValueField="ID"
AppendDataBoundItems="true"
AutoPostBack="true"
OnSelectedIndexChanged="ddlProductChanged"
runat="server">
<asp:ListItem
Text="Selecte
a Product"
Value=""/>
</asp:DropDownList>
<asp:RequiredFieldValidator
ID="valProduct"
Text="Required
to select"
ControlToValidate="ddlProducts"
runat="server"/>
<br />
<hr />
<asp:Label
id="lblSelectedProduct"
Runat="server" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$
ConnectionStrings:DatabaseConnectionString1 %>"
ProviderName="<%$
ConnectionStrings:DatabaseConnectionString1.ProviderName
%>"
SelectCommand="SELECT
[ID], [NAME] FROM [PRODUCT_LIST]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
When we enable the AutoPostBack property, a JavaScript onchange() event handler
is added to the List control. The onchange event is supported by all recent
browsers including Firefox 1.0 and Opera 8.0 or later versions. Notice that the
DropDownList control has a SelectedIndexChanged event handler named
ddlProductChanged(). The SelectedIndexChanged event is raised whenever we make a
new selection in the List control (independent of the AutoPostBack property).
The ddlProductChanged() method displays the selected list item in a Label
control.
Note: Continue in Next Part.
HAVE A GREAT CODING!