Usar el postback automático con CascadingDropDown (VB)

por Christian Wenz

Descargar PDF

El control CascadingDropDown del Kit de herramientas de control de AJAX extiende un control DropDownList para que los cambios en uno de estos controles carguen los valores asociados en otro de estos controles. Sin embargo, al usar el control CascadingDropDown, la característica AutoPostBack del control DropDownList de ASP.NET no funciona, ya que la carga asincrónica de datos en la lista genera un postback (innecesario) por sí solo. Con algo de código JavaScript, este efecto se puede evitar.

Información general

El control CascadingDropDown del Kit de herramientas de control de AJAX extiende un control DropDownList para que los cambios en uno de estos controles carguen los valores asociados en otro de estos controles. (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 la carga asincrónica de datos en la lista genera un postback (innecesario) por sí solo. Con algo de código JavaScript, este efecto se puede evitar.

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 elemento <form>):

<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 la dirección URL del servicio web:

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

El extensor CascadingDropDown llama entonces de forma asincrónica a un servicio web con la siguiente firma de método:

Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

El método devuelve una matriz 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="VB" Class="CascadingDropDown3" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
<ScriptService()> _
Public Class CascadingDropDown3
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim l As New List(Of 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()
 End Function
End Class

Al cargar la página en el explorador se rellenará la lista desplegable con tres proveedores, donde el segundo está ya seleccionado. Además, ASP.NET define el método __doPostBack() 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, significa que el Kit de herramientas de control los está cargando en ese momento, por lo que el código JavaScript usa un tiempo de espera y lo 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 realmente 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 a tamaño completo).

Anterior