CODEWITHSUNDEEP
c#asp.net
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to refresh dropdownlist without reloading the page?

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>

Upvotes: 9

Views: 26698

Answers (6)

Abdel-Rahman Al-Qawasmi
Abdel-Rahman Al-Qawasmi

Reputation: 21

I used the dependency dropdownlist method. How?:

  1. The contents of DropDownList1_SelectedIndexChanged put in a Sub

For example: 

Sub Drop1()
YOURCOD
End Sub
  1. in DropDownList1_SelectedIndexChanged call Drop1()
  2. Create the same for DropDownList2_SelectedIndexChanged (Drop2())

Now in DropDownList1_SelectedIndexChanged call Drop1 and Drop2. That's it.

Upvotes: 0

j.f.
j.f.

Reputation: 194

Another way you can use is Asp.Net [Webmethod] Attribute.

Create a method with [Webmethod] attribute on your server-side code. On the front end, use window.PageMethods.(your method name) to invoke the server call.

Upvotes: 1

Mike
Mike

Reputation: 721

If this is the case, Ajax method should resolve your problem. Since you are quite new to Ajax, I would describe a bit more details.

  1. There must be only one ScriptManager in the same page. ( If you are using Master page, add to master page and no need to add anymore in nested content page )

  2. Add UpdatePanel and add your controls to ContentTemplate of UpdatePanel.

  3. Add AutoPostBack="True" to your main dropdownlist.

  4. Add SelectedIndexChanged event by double clicking on main dropdownlist.

  5. In SelectedIndexChanged event of main dropdownlist, clear the ddlDrillDown items by adding ddlDrillDown.Items.Clear() method and rebind the data whatever you need based on the value of main dropdown list.

Upvotes: 5

VDWWD
VDWWD

Reputation: 35514

As suggested you can use an UpdatePanel. And please do not use ClientIDMode="Static" unless you really, really need to. 

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

        <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ID="ddlMain" runat="server">
            <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>

        <asp:DropDownList ID="ddlDrillDown" name="searchPhys" runat="server">
        </asp:DropDownList>

    </ContentTemplate>
</asp:UpdatePanel>

Now the problem with UpdatePanel is that it does not refresh the page, but does reload the DOM. So any changes made with jQuery are lost. That is why you lose the DropKick CSS. You need to trigger $("#ID").dropkick( again. And for that you can use PageRequestManager.

<script type="text/javascript">
    $(document).ready(function () {
        TriggerDropkick();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        TriggerDropkick();
    });

    function TriggerDropkick() {
        $("#<%= ddlMain.ClientID %>, #<%= ddlDrillDown.ClientID %>").dropkick({
            mobile: true
        });
    }
</script>

Also suggested is using a service to get the values for the DropDownList. This is possible but since this is webforms you would need to disable some validation in order to prevent the Invalid postback or callback argument exception.

Upvotes: 2

GraDea
GraDea

Reputation: 588

You can use ajax for this goal.

Create asmx-service or webApi controller which return list of items. Call this on change and render it.

Upvotes: 2

Manish Dalal
Manish Dalal

Reputation: 1796

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)

Upvotes: 8

Related Questions