Tengo dos dropdownlists en mi página:

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

Mi código-detrás de manejar el dropdownlist cambio es:

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

La característica que estoy tratando de agregar a la anterior es que, cuando el usuario selecciona una opción de la ddlMain dropdownlist para actualizar la ddlDrillDown dropdownlist basado en la opción sin necesidad de recargar la página.

¿Cómo puedo conseguirlo?

ACTUALIZACIÓN:

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

5 Comentarios

  1. 7

    Uso de AJAX. Lugar tanto en el desplegable de controles en UpdatePanel y justo después de la apertura de la etiqueta en la página agregar un ScriptManager (si no está ya allí)

    • El ScriptManager puede estar en cualquier lugar o tiene que aparecer justo después de la etiqueta FORM? He actualizado mi pregunta con lo que tengo y por favor, hágamelo saber si es bueno.
    • El ScriptManager debe aparecer antes de los controles que necesita. (stackoverflow.com/questions/13473808/…)…. sólo para estar en el lado más seguro que se aconseja hacer la adición de ScriptManager como el primer control como una práctica a través de su equipo 🙂
    • El DropDownList está dentro de una subpágina de modo que si el ScriptManager ir en una página maestra en su lugar?
    • Depende, según el rendimiento requerido por las páginas, como ScriptManager agrega el AJAX relacionados con JavaScript para el Marcado de página. Es un poco de retraso, está bien, puede agregar el ScriptManager en la Página principal
    • En mi página principal que tengo es como este: <form runat="server"> <asp:ScriptManager ID="ScriptManager" runat="server" /> <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />...</form> pero cuando cambio el dropdownlist la página se actualiza. Tal vez algo que ver con el código C# detrás?
    • ¿Necesito un control de disparo?
    • Usted no necesita hacer nada más. Intenta cargar la página en IE y ver si hay alguna ‘Sys’ error de javaScript (en la barra de estado)
    • No hay ningún error en IE… todavía soy capaz de seleccionar y todo funciona bien, pero la página está todavía refrescante para volver a cargar la lista
    • Agregar el gatillo funcionó, pero el estilo CSS a la que fue asignada en la carga de la página parece que no funciona cuando la lista de cambios
    • ??? No sé por qué esto está ocurriendo. Acabo de crear una página de ejemplo y que está funcionando como se esperaba….. Puedes compartir tu página de alguna manera?
    • A menos que la página se actualiza la lista desplegable pierde su estilo. Estoy usando DropKick CSS al estilo de mi seleccione…
    • <asp:ScriptManager... /> se representa un input type="hidden" sin un valor, de modo que no tiene mucho tráfico. ASP.NET requiere ScriptManager se coloca antes de cualquier UpdatePanel. En la página Render (override) es OK para mover todos los ocultos entradas a la parte inferior del formulario (para SEO razón). ViewState debe estar habilitado para todos los controles dentro de UpdatePanel (o enlazar manualmente).

  2. 2

    Puede utilizar ajax para este objetivo.

    Crear asmx servicio o webApi controlador que devolver la lista de elementos. Llamar a este cambio y la hacen.

    • Soy nuevo en esto así que no estoy seguro de cómo lograrlo. He actualizado mi pregunta con lo que @Manish Dalal dijo pero no funciona :/
    • Yo no uso ScriptManager. Yo uso jQuery para la llamada del servicio web y de los elementos de render.
    • Te gustaría ser capaz de proporcionar una muestra de lo que tengo?
  3. 2

    Si este es el caso, Ajax método debería resolver su problema.
    Ya que eres bastante nuevo en Ajax, yo diría que un poco más de detalles.

    1. Debe haber sólo un ScriptManager en la misma página.
      ( Si está utilizando la página principal, agregar a la página principal y no hay necesidad de agregar más en el contenido anidado página )

    2. Agregar UpdatePanel y agregar los controles para ContentTemplate de UpdatePanel.

    3. Agregar AutoPostBack=»True» a su principal dropdownlist.

    4. Agregar evento SelectedIndexChanged haciendo doble clic en el principal dropdownlist.

    5. En el evento SelectedIndexChanged de los principales dropdownlist, desactive la ddlDrillDown elementos mediante la adición de ddlDrillDown.Elementos.Método Clear() y volver a enlazar los datos de lo que sea necesario, basándose en el valor del principal de la lista desplegable.

  4. 1

    Como se sugiere usted puede utilizar un UpdatePanel. Y por favor, no utilice ClientIDMode="Static" a menos que usted realmente necesita.

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

    Ahora el problema con Él es que no se actualice la página, pero no recargar el DOM. De modo que los cambios realizados con jQuery se pierden. Es por eso que usted pierde el DropKick CSS.
    Usted necesita para desencadenar $("#ID").dropkick( de nuevo. Y para que se puede usar 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>

    También se propone el uso de un servicio para obtener los valores para el DropDownList. Esto es posible, pero dado que este es webforms que usted necesita para deshabilitar la validación con el fin de prevenir la Invalid postback or callback argument excepción.

  5. 1

    Otra manera que usted puede utilizar es Asp.Net [Webmethod] Atributo.

    Crear un método con [Webmethod] atributo en el código del lado del servidor.
    En la parte delantera, el uso de la ventana.PageMethods.(su nombre de método) para invocar la llamada de servidor.

Dejar respuesta

Please enter your comment!
Please enter your name here