Usar el postback automático con CascadingDropDown (C#)

por Christian Wenz

Descargar código o Descargar PDF

El control CascadingDropDown en el kit de herramientas de control de AJAX extiende un control DropDownList para que los cambios en un objeto DropDownList carguen los valores asociados en otro DropDownList. Sin embargo, cuando se usa el control CascadingDropDown, ASP. La característica de postback del control DropDownList de la red no funciona, puesto que la carga de datos de forma asincrónica en la lista genera un postback (innecesario). Con algún código JavaScript, se puede evitar este efecto.

Información general

El control CascadingDropDown en el kit de herramientas de control de AJAX extiende un control DropDownList para que los cambios en un objeto DropDownList carguen los valores asociados en otro DropDownList. (Por ejemplo, una lista proporciona una lista de Estados de EE. UU. y la siguiente lista se rellena con las ciudades principales en ese estado). Sin embargo, cuando se usa el control CascadingDropDown, ASP. La característica de postback del control DropDownList de la red no funciona, puesto que la carga de datos de forma asincrónica en la lista genera un postback (innecesario). Con algún código JavaScript, se puede evitar este efecto.

Pasos

Para activar la funcionalidad de ASP.NET AJAX y el kit de herramientas de control, el control ScriptManager debe colocarse en cualquier parte de la página (pero dentro del <formelemento >):

<asp:ScriptManager ID="asm" runat="server" />

A continuación, se requiere un control DropDownList:

<div>
 Vendor: <asp:DropDownList ID="VendorsList" runat="server"/>
</div>

En esta lista, se agrega un extensor CascadingDropDown, que proporciona la dirección URL del servicio Web y la información del método:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown3.cs.asmx" ServiceMethod="GetVendors"
 TargetControlID="VendorsList" Category="Vendor" />

A continuación, el extensor CascadingDropDown llama de forma asincrónica a un servicio Web con la siguiente firma de método:

public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, string category)

El método devuelve una matriz de tipo CascadingDropDown Value. El constructor del tipo espera primero el título de la entrada de la lista y, a continuación, el valor (atributo de value HTML).

<%@ WebService Language="C#" Class="CascadingDropdown3" %>
using System.Web.Script.Services;
using AjaxControlToolkit;
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
[ScriptService]
public class CascadingDropdown3 : System.Web.Services.WebService
{
 [WebMethod]
 public CascadingDropDownNameValue[] GetVendors(string knownCategoryValues, 
 string category)
 {
 List<CascadingDropDownNameValue> l = new List<CascadingDropDownNameValue>();
 l.Add(new CascadingDropDownNameValue("International", "1"));
 l.Add(new CascadingDropDownNameValue("Electronic Bike Repairs & Supplies", "2"));
 l.Add(new CascadingDropDownNameValue("Premier Sport, Inc.", "3"));
 return l.ToArray();
 }
}

La carga de la página en el explorador rellenará la lista desplegable con tres proveedores y la segunda se preseleccionará. Además, ASP.NET define el método JavaScript __doPostBack(). Una vez cargada la página, esta llamada de JavaScript se agrega a la lista desplegable, pero solo si hay elementos en ella. Si no hay ningún elemento en la lista, el kit de herramientas de control lo está cargando actualmente, por lo que el código de JavaScript usa un tiempo de espera y vuelve a intentarlo en un medio segundo.

<script type="text/javascript">
 function pageLoad()
 {
 addAutoPostBack();
 }
 function addAutoPostBack()
 {
 if ($get("VendorsList").options.length > 0)
 {
 $get("VendorsList").setAttribute("onchange","javascript:setTimeout('__doPostBack(\\'VendorsList\\',\\'\\')', 0)");
 }
 else
 {
 setTimeout("addAutoPostBack()", 500);
 }
 }
</script>

De este modo, solo se ejecuta un postback cuando realmente hay elementos en la lista y el usuario selecciona una entrada.

seleccionar un elemento de lista provoca un postback

Al seleccionar un elemento de lista, se produce un postback (hacer clic para ver la imagen de tamaño completo)