Geek Answers Handbook

How to update the drop-down list without reloading the page?

I have two dropdownlists on 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 for handling the plugin list:

 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 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 function I'm trying to add to the above is that the user selects a parameter from the ddlMain drop-down list to update the ddlDrillDown drop-down list based on this parameter without reloading the page.

How can i achieve this?

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>
+6
source share
5 answers

Use AJAX. Place both drop-down UpdatePanel in UpdatePanel and immediately after opening the form tag on the page add ScriptManager (if it does not already exist)

+7
source

You can use ajax for this purpose.

Create an asmx-service or webApi controller that returns a list of elements. Call on this subject and change it.

+2
source

As suggested, you can use UpdatePanel . And please do not use ClientIDMode="Static" unless you 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 reloads the DOM. Therefore, any changes made using jQuery are lost. This is why you lose DropKick CSS. You need to run $("#ID").dropkick( again. And you can use PageRequestManager for this.

 <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>

It is also suggested that you use the service to get values ​​for DropDownList. It is possible, but since these are web forms, you need to disable some validation to prevent the Invalid postback or callback argument exception.

+1
source

If so, the Ajax method should solve your problem. Since you are completely new to Ajax, I would describe a bit more details.

  • There should only be one ScriptManager per page. (If you are using the main page, add it to the main page and you no longer need to add it to the attached content page)

  • Add an UpdatePanel and add controls to the ContentTemplate from the UpdatePanel.

  • Add AutoPostBack = "True" to your main drop-down list.

  • Add the SelectedIndexChanged event by double-clicking on the main drop-down list.

  • In the SelectedIndexChanged event of the main drop-down list, clear the ddlDrillDown elements by adding the ddlDrillDown.Items.Clear () method and double-check the data you need, depending on the value of the drop-down list.

+1
source

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

Create a method with the [Webmethod] attribute in your server code. At the front end, use window.PageMethods. (Your method name) to invoke the server call.

+1
source

More articles:


All Articles