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!