Click here to Skip to main content
15,886,806 members
Articles / Web Development / HTML

How to use Ajax in two hierarchical List Boxes

Rate me:
Please Sign up or sign in to vote.
3.50/5 (3 votes)
31 Jan 20075 min read 48.5K   262   37  
In this tutorial I’ll show how easy it is to use Ajax in ASP.NET 2.0 to populate hierarchical List Boxes
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Hierarchy.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <br />
        <div>
            &nbsp;
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [CategoryID], [ProductName] FROM [Products] WHERE CategoryID=@Category">
                <SelectParameters>
                    <asp:ControlParameter ControlID="ListBox1" Name="Category" PropertyName="SelectedValue" />
                </SelectParameters>
            </asp:SqlDataSource><asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [CategoryID], [ProductName] FROM [Products] WHERE CategoryID=@Category">
                <SelectParameters>
                    <asp:ControlParameter ControlID="ListBox3" Name="Category" PropertyName="SelectedValue" />
                </SelectParameters>
            </asp:SqlDataSource>
            &nbsp;<br />
            &nbsp;<table>
                <tr>
                    <td style="width: 1px">
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                Sample with AJAX<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1"
                                    DataTextField="CategoryName" DataValueField="CategoryID" Height="204px" Width="226px">
                                </asp:ListBox><br />
                                <asp:ListBox ID="ListBox2" runat="server" DataSourceID="SqlDataSource2" DataTextField="ProductName"
                                    DataValueField="CategoryID" Height="201px" Width="225px"></asp:ListBox>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </td>
                    <td style="width: 176px">
                        <br />
                        <br />
                        Sample without AJAX<asp:ListBox ID="ListBox3" runat="server" AutoPostBack="True"
                            DataSourceID="SqlDataSource3" DataTextField="CategoryName" DataValueField="CategoryID"
                            Height="204px" Width="226px"></asp:ListBox>
                        <asp:ListBox ID="ListBox4" runat="server" DataSourceID="SqlDataSource4" DataTextField="ProductName"
                            DataValueField="CategoryID" Height="201px"
                            Width="225px"></asp:ListBox></td>
                </tr>
            </table>
            &nbsp;
        </div>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior) Messages S.A.S
France France
I am Web Developer at Messages, a printing company in Toulouse, France. I am particularly interested about Blazor, but my primary development platform at work is ASP.NET MVC with C#. I have 15 years experience in developing software, always using Microsoft Technologies.

Comments and Discussions