List Controls in ASP.NET - Part 5
Introduction & Demonstration
In Part – 4 article of
this series, we have discussed how to display records in GridView based
on the selected item inDropDownList. 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. Theonchange event
is supported by all recent browsers including Firefox 1.0 and Opera 8.0 or
later versions. Notice that theDropDownList control has a SelectedIndexChanged event
handler named ddlProductChanged(). The SelectedIndexChangedevent
is raised whenever we make a new selection in the List control (independent of
the AutoPostBack property). TheddlProductChanged() method
displays the selected list item in a Label control.
Note: Continue in Next Part.
Comments
Post a Comment