ASP.net dynamic drop down lists, how to use JQuery and AJAX instead?

Question

I have written some code that works using ASP.Net, C# and AJAX update panels. I have created this user control, in which a repeater is populated by the contents of the BusinessTier datatable. For each business tier, there are associated business levels which populate a drop down list from the BusinessLevel datatable. One business level is a parent of a set of busines layers, and the business tier indicates where in the hierarchy each set of business levels are. Tier 1 is Company, and the business layer is the name of the company. Tier 2 is business, and the associated business layers for Tier 2 will each contain a parent business layer assigned in Tier 1. And so on. I hope this makes sense! These business layer drop down lists are cascading dropdowns. However the AJAX cascading drop down list control cannot be used, because in the initial form load many of these drop downs will be assigned at runtime. Also the number of dropdowns is also dynamically determined at run time, depending on the contents of the database. So for every SelectedIndexChanged event, there has to be a postback to recalculate the new contents of the dropdowns. The code below works. These postbacks can be contained within an Update Panel, and the control is OK, I can use it. However ... There must be a better way using AJAX and JQuery, and not having all of these postbacks in the first place? If so how? I want to learn more about AJAX and JQuery, so if you have a solution I would be delighted to see it. The code is below;

<%@ Control Language="C#" AutoEventWireup="true" 
     CodeBehind="BusinessLevelSelection.ascx.cs" 
                Inherits="TestLinq.BusinessLevelSelection" %>
<div id="mainleft">
  <fieldset style="width:200px;padding:3px">
      <legend>Business Level</legend>  
      <asp:UpdatePanel runat="server" ID="updBusinessLevels">
      <ContentTemplate>
      <asp:Repeater runat="server" ID="rpDropDowns" 
        OnItemDataBound="rpDropDowns_OnItemDataBound"
        >
        <ItemTemplate>
            <h2><%#  DataBinder.Eval(Container.DataItem, "NameFull")%></h2>
            <div>
                <asp:DropDownList runat="server" ID="ddlBusinessLevels" 
                 AutoPostBack="true" 
                    OnSelectedIndexChanged="ddlBusinessLevels_SelectedIndexChanged"
                    ToolTip='<%#  DataBinder.Eval(Container.DataItem, "NameFull")%>'
                />
            </div>
        </ItemTemplate>
      </asp:Repeater></ContentTemplate></asp:UpdatePanel>
  </fieldset>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ClassLibraryBusinessLevels;

namespace TestLinq
{
    public partial class BusinessLevelSelection : System.Web.UI.UserControl
    {
        public int SelectedBusinessLevelId
        {
            get;
            set;
        }

        public int? ParentBusinessLevelId
        {
            get;
            set;
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack == false)
                LoadData();
        }

        private void LoadData()
        {
            BOL.GetBusinessLevelTiers();
            LoadDataLatest();
        }

        /// <summary>
        /// LoadDataLatest() - Loads the latest data, either from the initial load, 
        ///                     or from the change in the business level selection event
        /// </summary>
        private void LoadDataLatest()
        {
            BOL.GetBusinessLevels(this.SelectedBusinessLevelId);

            this.ParentBusinessLevelId = null;

            rpDropDowns.DataSource = BOL.blTiers;
            rpDropDowns.DataBind();
        }

        protected void rpDropDowns_OnItemDataBound(Object Sender, RepeaterItemEventArgs e)
        {
            // Execute the following logic for Items and Alternating Items.
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                PopulateDropDownList(e.Item.FindControl("ddlBusinessLevels") as DropDownList, e.Item.ItemIndex);
            }
        }

        private void PopulateDropDownList(DropDownList ddlBusinessLevels, int index)
        {
            if (index <= BOL.blCollection.Count)
            {
                ddlBusinessLevels.DataSource =
                    BOL.GetBusinessLevelsForDropDowns(index, this.ParentBusinessLevelId);
                ddlBusinessLevels.DataValueField = "BusinessLevelId";
                ddlBusinessLevels.DataTextField = "BusinessLevelName";
                ddlBusinessLevels.DataBind();

                if (index < BOL.blCollection.Count)
                {
                    ddlBusinessLevels.SelectedValue = BOL.blCollection[index].BusinessLevelId.ToString();
                    this.ParentBusinessLevelId = BOL.blCollection[index].BusinessLevelId;
                }
            }
            ddlBusinessLevels.Items.Insert(0, new ListItem("Please enter your selection", "0"));
        }

        protected void ddlBusinessLevels_SelectedIndexChanged(object sender, EventArgs e)
        {
            DropDownList ddlBusinessLevels = (DropDownList)sender;
            this.SelectedBusinessLevelId = Convert.ToInt32(ddlBusinessLevels.SelectedValue);
            this.LoadDataLatest();
        }
    }
}

Answer 1

Here's how to use jQuery with Cascading DropDownLists: http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET