Uso de CascadingDropDown con una base de datos (VB)

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. Para que esto funcione, se debe crear un servicio web especial.

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). Para que esto funcione, se debe crear un servicio web especial.

Pasos

En primer lugar, se requiere un origen de datos. En este ejemplo se usa la base de datos AdventureWorks y Microsoft SQL Server 2005 Express Edition. La base de datos es una parte opcional de una instalación de Visual Studio (incluida la edición express) y también está disponible como una descarga independiente en https://go.microsoft.com/fwlink/?LinkId=64064. La base de datos AdventureWorks forma parte de las muestras y bases de datos de ejemplo de SQL Server 2005 (descarga en https://www.microsoft.com/download/details.aspx?id=10679). La manera más fácil de configurar la base de datos es usar Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) y adjuntar el AdventureWorks.mdf archivo de base de datos.

En este ejemplo, se supone que se llama SQLEXPRESS a la instancia de SQL Server 2005 Express Edition y reside en la misma máquina que el servidor web; también es la configuración predeterminada. Si la configuración es diferente, debe adaptar la información de conexión de la base de datos.

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

En el paso siguiente, se requieren dos controles DropDownList. En este ejemplo, usamos la información de proveedor y contacto de AdventureWorks, por lo que creamos una lista para los proveedores disponibles y otra para los contactos disponibles:

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

A continuación, se deben agregar dos extensores CascadingDropDown a la página. Una rellena la primera lista (proveedores) y la otra rellena la segunda lista (contactos). Se deben establecer los atributos siguientes:

• ServicePath: dirección URL de un servicio web que entrega las entradas de lista.
• ServiceMethod: método web que entrega las entradas de lista
• TargetControlID: ID de la lista desplegable
• Category: información de categoría que se envía al método web al ser llamado.
• PromptText: texto que se muestra al cargar datos de lista de forma asincrónica desde el servidor.
• ParentControlID: (opcional) lista desplegable primaria que desencadena la carga de la lista actual

Según el lenguaje de programación usado, el nombre del servicio web en cuestión cambia, pero todos los demás valores de atributo son los mismos. Este es el elemento CascadingDropDown de la primera lista desplegable:

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

Los extensores de control de la segunda lista deben establecer el ParentControlID atributo para que la selección de una entrada en la lista de proveedores desencadene la carga de elementos asociados en la lista de contactos.

<ajaxToolkit:CascadingDropDown ID="ccd2" runat="server"
 ServicePath="CascadingDropdown1.vb.asmx" ServiceMethod="GetContactsForVendor"
 TargetControlID="ContactsList" ParentControlID="VendorsList"
 Category="Contact"
 PromptText="Select Contact" />

A continuación, el trabajo real se realiza en el servicio web, que se configura de la manera siguiente. Tenga en cuenta que se usa el [ScriptService] atributo ; de lo contrario, ASP.NET AJAX no puede crear el proxy de JavaScript para acceder a los métodos web desde el código de script del lado cliente.

<%@ WebService Language="VB" Class="CascadingDropdown1" %>
Imports System.Web.Script.Services
Imports AjaxControlToolkit
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.Data.SqlClient
<ScriptService()> _
Public Class CascadingDropdown1
 Inherits System.Web.Services.WebService
 ' ...
End Class

La firma de los métodos web a los que llama CascadingDropDown es la siguiente:

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

Por lo tanto, el valor devuelto debe ser una matriz de tipo CascadingDropDownNameValue definida por el Kit de herramientas de control. El GetVendors() método es bastante fácil de implementar: el código se conecta a la base de datos AdventureWorks y consulta a los primeros 25 proveedores. El primer parámetro del CascadingDropDownNameValue constructor es el título de la entrada de lista, el segundo su valor (atributo value en el elemento HTML<option>). Este es el código:

<WebMethod()> _
Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand( _
 "SELECT TOP 25 VendorID, Name FROM Purchasing.Vendor", conn)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("Name").ToString(),dr("VendorID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

Obtener los contactos asociados para un proveedor (nombre de método: GetContactsForVendor()) es un poco más complicado. En primer lugar, se debe determinar el proveedor que se ha seleccionado en la primera lista desplegable. Control Toolkit define un método auxiliar para esa tarea: el ParseKnownCategoryValuesString() método devuelve un StringDictionary elemento con los datos desplegables:

<WebMethod()> _
Public Function GetContactsForVendor(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
 Dim VendorID As Integer
 CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)

Por motivos de seguridad, estos datos deben validarse primero. Por lo tanto, si hay una entrada de Proveedor (porque la Category propiedad del primer elemento CascadingDropDown se establece en "Vendor"), se puede recuperar el identificador del proveedor seleccionado:

If Not kv.ContainsKey("Vendor") Or Not Int32.TryParse(kv("Vendor"),VendorID) Then
 Throw New ArgumentException("Couldn't find vendor.")
 End If

El resto del método es bastante sencillo, entonces. El identificador del proveedor se usa como parámetro para una consulta SQL que recupera todos los contactos asociados para ese proveedor. Una vez más, el método devuelve una matriz de tipo CascadingDropDownNameValue.

Dim conn As New SqlConnection("server=(local)\SQLEXPRESS; Integrated Security=true; Initial Catalog=AdventureWorks")
 conn.Open()
 Dim comm As New SqlCommand("SELECT Person.Contact.ContactID, FirstName, LastName FROM Person.Contact,Purchasing.VendorContact WHERE VendorID=@VendorID AND Person.Contact.ContactID=Purchasing.VendorContact.ContactID",conn)
 comm.Parameters.AddWithValue("@VendorID", VendorID)
 Dim dr As SqlDataReader = comm.ExecuteReader()
 Dim l As New List(Of CascadingDropDownNameValue)
 While (dr.Read())
 l.Add(New CascadingDropDownNameValue(dr("FirstName").ToString() & " " & dr("LastName").ToString(),dr("ContactID").ToString()))
 End While
 conn.Close()
 Return l.ToArray()
End Function

Cargue la página ASP.NET y, después de un breve tiempo, la lista de proveedores se rellene con 25 entradas. Elija una entrada y observe cómo se rellena la segunda lista desplegable con datos.

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

La segunda lista se rellena según la selección de la primera lista (haga clic para ver la imagen de tamaño completo).