Post
Ask Question

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 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.

List5.gif

 <%@ 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!


Similar Articles