C# – How to refresh dropdownlist without reloading the page

asp.netc

I have two dropdownlists in my page:

<asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" name="searchPhys" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
    <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
    <asp:ListItem Text="BY LOCATION" Value="1" />
    <asp:ListItem Text="BY SPECIALTY" Value="2" />
</asp:DropDownList>

<br /><br />

<asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" name="searchPhys" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
</asp:DropDownList>

My code-behind to handle the dropdownlist change is:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Xml.Linq;
using System.Configuration;
using System.Windows.Forms;
using System.Data;

public partial class physicians : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e) {

    if (!Page.IsPostBack) {
        PopulatePhysician();
    }
    //PopulateSpecialty();
    //PopulateLocation();

    }

    public void PopulatePhysician() {
        SqlCommand cmd = new SqlCommand("getPhysicians", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        //cmd.CommandType = Data.CommandType.StoredProcedure
        cmd.Connection.Open();

        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();

        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();
            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Physician's Name";
            Item.Value = "0";
            //Item.Selected = True
            ddlDrillDown.Items.Insert(0, Item);
        //}
    cmd.Connection.Close();
    cmd.Connection.Dispose();
    }

    public void PopulateSpecialty() {
        SqlCommand cmd = new SqlCommand("getSpecialties", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        cmd.Connection.Open();

        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();

        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();
            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Specialty";
            Item.Value = "0";
            ddlDrillDown.Items.Insert(0, Item);
        //}
        cmd.Connection.Close();
        cmd.Connection.Dispose();
    }

    public void PopulateLocation() {
        SqlCommand cmd = new SqlCommand("getLocations", new SqlConnection(ConfigurationManager.AppSettings["ConnString"]));
        cmd.Connection.Open();

        SqlDataReader ddlValues = default(SqlDataReader);
        ddlValues = cmd.ExecuteReader();

        //if (!IsPostBack) {
            ddlDrillDown.Items.Clear();
            ddlDrillDown.DataSource = ddlValues;
            ddlDrillDown.DataValueField = "content_id";
            ddlDrillDown.DataTextField = "content_title";
            ddlDrillDown.DataBind();

            //set the default value for the drop down
            ListItem Item = new ListItem();
            Item.Text = "Select a Location";
            Item.Value = "0";
            ddlDrillDown.Items.Insert(0, Item);
        //}
        cmd.Connection.Close();
        cmd.Connection.Dispose();
    }

    public void ddlMain_SelectedIndexChanged(object sender, System.EventArgs e) {
        switch(ddlMain.SelectedIndex) {
            case 0:
                PopulatePhysician();
                break;
            case 1:
                PopulateLocation();
                break;
            case 2:
                PopulateSpecialty();
                break;
        }
    }
}

The feature that I am trying to add to the above is, when the user selects an option from the ddlMain dropdownlist to refresh the ddlDrillDown dropdownlist based on the option without reloading the page.

How can I achieve it?

UPDATE:

<asp:ScriptManager ID="ScriptManager" 
                               runat="server" />
            <asp:UpdatePanel ID="UpdatePanel1" 
                             UpdateMode="Conditional"
                             runat="server">
                <ContentTemplate>
                    <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
                        <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
                        <asp:ListItem Text="BY LOCATION" Value="1" />
                        <asp:ListItem Text="BY SPECIALTY" Value="2" />
                    </asp:DropDownList>
                    <br /><br />
                    <asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
                    </asp:DropDownList>
                    </ContentTemplate>
            </asp:UpdatePanel>

Best Answer

Use AJAX. Place both dropdown controls in UpdatePanel and just after the opening Form tag in the page add a ScriptManager (if not already there)