Uso de Auto-Postback con CascadingDropDown (C#)

de Christian Wenz

Descargar PDF

El control CascadingDropDown del Kit de herramientas de control de AJAX amplía un control DropDownList para que los cambios en una DropDownList carguen los valores asociados en otro DropDownList. Sin embargo, al utilizar el control CascadingDropDown, la característica AutoPostBack del control DropDownList de ASP.NET no funciona, ya que la carga de datos de manera asincrónica en la lista genera por sí misma un postback innecesario. Con algún código JavaScript, este efecto se puede evitar.

Visión general

El control CascadingDropDown del Kit de herramientas de control de AJAX amplía un control DropDownList para que los cambios en una 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 principales ciudades de ese estado). Sin embargo, al usar el control CascadingDropDown, la característica AutoPostBack del control DropDownList de ASP.NET no funciona, ya que al cargar datos asincrónicamente en la lista se genera un postback innecesario. Con algún código JavaScript, este efecto se puede evitar.

Pasos

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

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

A continuación, se requiere un control DropDownList:

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

Para esta lista, se agrega un extensor CascadingDropDown, que proporciona información de método y dirección URL del servicio web:

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

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 valores de tipo CascadingDropDown. El constructor del tipo espera primero el título de la entrada de lista y, a continuación, el valor (atributo HTML value ).

<%@ 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();
 }
}

Cargar la página en el navegador rellenará la lista desplegable con tres proveedores, siendo el segundo preseleccionado. Además, ASP.NET define el __doPostBack() método de JavaScript. 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 elementos en la lista, el Kit de herramientas de control los carga actualmente, por lo que el código de JavaScript usa un tiempo de espera e intenta de nuevo en 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 hay elementos en la lista y el usuario selecciona una entrada.

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