Rellenar una lista 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. (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). La primera dificultad que hay que solventar es rellenar realmente una lista desplegable con este control.

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). La primera dificultad que hay que solventar es rellenar realmente una lista desplegable con este control.

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 control extensor CascadingDropDown. Se enviará una solicitud asincrónica a un servicio web, que devolverá una lista de entradas que se mostrarán en la lista. Para que este procedimiento funcione, es necesario establecer los siguientes atributos de CascadingDropDown:

  • ServicePath: dirección URL de un servicio web que proporciona las entradas de la lista.
  • ServiceMethod: método web que proporciona las entradas de la lista.
  • TargetControlID: identificador de la lista desplegable.
  • Category: información de categoría que se envía al método web cuando se le llama.
  • PromptText: texto que se muestra al cargar datos de lista de forma asincrónica desde el servidor.

Este es el marcado del elemento CascadingDropDown. La única diferencia entre C# y VB es el nombre del servicio web asociado:

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

El código JavaScript procedente del control extensor CascadingDropDown llama a un método de servicio web con la siguiente firma:

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

Por lo tanto, lo destacable es que el método necesita devolver una matriz de tipo CascadingDropDownNameValue (definida por el Kit de herramientas de control de ASP.NET AJAX). En el constructor CascadingDropDownNameValue, primero se debe proporcionar el texto de la entrada de lista y, a continuación, su valor, como <option value="VALUE">NAME</option> lo haría en HTML. Estos son algunos datos de ejemplo:

<%@ WebService Language="VB" Class="CascadingDropDown0" %>
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 CascadingDropDown0
 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

Cargar la página en el explorador hará que la lista se rellene con tres proveedores.

The list is filled automatically

La lista se rellena automáticamente (haga clic para ver la imagen a tamaño completo).