How to refresh dropdownlist without reloading the page?

Question

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>

I need to refresh data for listview without refreshing the page , for more detail look at my question https://stackoverflow.com/questions/47180999/listview-databind-causes-lost-of-formview-data/47181885?noredirect=1#comment81313556_47181885 — fatiDev, Nov 09 '17 at 09:44

score 8 · Accepted Answer · answered May 15 '14 at 14:49

8

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)

answered May 15 '14 at 14:49

Manish Dalal

1,768
1
10
14

The ScriptManager can be anywhere or does it have to appear right after the FORM tag? I updated my question with what I have and please let me know if it's good. – SearchForKnowledge May 15 '14 at 14:51
The ScriptManager must appear before any controls that need it. (http://stackoverflow.com/questions/13473808/the-scriptmanager-must-appear-before-any-controls-that-need-it).... just to be on the safer side it is advised to make adding ScriptManager as the first control as a practice across your team :) – Manish Dalal May 15 '14 at 14:55
The DropDownList is inside a subpage so should the ScriptManager go in a master page instead? – SearchForKnowledge May 15 '14 at 14:57
It depends, depending on the performance required by the pages, as `ScriptManager` adds the AJAX related JavaScript to the page Markup. It a little delay is fine, you can safely add the `ScriptManager` in Master Page – Manish Dalal May 15 '14 at 14:59
In my master page I have it like this: `
...
` but when I change the dropdownlist the page still refreshes. Maybe something to do with the C# code behind? – SearchForKnowledge May 15 '14 at 15:02
Do I also need a trigger control? – SearchForKnowledge May 15 '14 at 15:03
You don't need to do anything else. Try to load your page in IE and see if there is any 'Sys' javaScript error (in status bar) – Manish Dalal May 15 '14 at 15:05
There is no error in IE... I am still able to select and everything works fine but the page is still refreshing to reload the list – SearchForKnowledge May 15 '14 at 15:08
Adding the trigger worked but the CSS style that it was assigned to on page load seems to not work when the list changes – SearchForKnowledge May 15 '14 at 15:11
??? Don't know why this is happening. I just created a sample page and it is working as expected..... Can you share your page somehow? – Manish Dalal May 15 '14 at 15:14
Unless the page refreshes the dropdown loses it's style. I am using DropKick CSS to style my select... – SearchForKnowledge May 15 '14 at 15:14
`` is rendered an `input type="hidden"` without a value so it doesn't take much traffic. ASP.NET requires `ScriptManager` to be placed before any `UpdatePanel`. In page `Render` (override) it is OK to move all hidden inputs to the bottom of the form (for SEO reason). `ViewState` must be enabled for all controls inside `UpdatePanel` (or databind them manually). – Alex Kudryashev Nov 15 '17 at 02:52

score 5 · Answer 2 · edited Nov 13 '17 at 03:59

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.

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 )
Add UpdatePanel and add your controls to ContentTemplate of UpdatePanel.
Add AutoPostBack="True" to your main dropdownlist.
Add SelectedIndexChanged event by double clicking on main dropdownlist.
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.

score 2 · Answer 3 · answered May 15 '14 at 14:52

2

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.

answered May 15 '14 at 14:52

GraDea

588
7
23

I am new to this so I am not sure how to accomplish it. I updated my question with what @Manish Dalal stated but it's not working :/ – SearchForKnowledge May 15 '14 at 14:53
I not use ScriptManager. I use jQuery for call web-service and render elements. – GraDea May 15 '14 at 14:58
Would you be able to provide a sample from what I have? – SearchForKnowledge May 15 '14 at 15:03

VDWWD · Answer 4 · 2017-11-09T20:12:45.710

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.

score 1 · Answer 5 · answered Nov 14 '17 at 08:54

1

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.

answered Nov 14 '17 at 08:54

j.f.

184
9

score 0 · Answer 6 · edited Apr 24 '20 at 20:51

0

I used the dependency dropdownlist method. How?:

The contents of DropDownList1_SelectedIndexChanged put in a Sub

For example:

Sub Drop1()
YOURCOD
End Sub

in DropDownList1_SelectedIndexChanged call Drop1()
Create the same for DropDownList2_SelectedIndexChanged (Drop2())

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

edited Apr 24 '20 at 20:51

David Buck

3,752
35
31
35

answered Apr 24 '20 at 18:34

Abdel-Rahman Al-Qawasmi

21
4

How to refresh dropdownlist without reloading the page?

6 Answers6