Preenchimento de uma lista usando CascadingDropDown (C#)

por Christian Wenz

Descarregar PDF

O controlo CascadingDropDown no AJAX Control Toolkit estende um controlo DropDownList para que as alterações num DropDownList carreguem valores associados noutro DropDownList. (Por exemplo, uma lista apresenta os estados dos EUA, e a lista seguinte é preenchida com as principais cidades desse estado.) O primeiro desafio a resolver é realmente preencher uma lista suspensa usando este controlo.

Descrição geral

O controlo CascadingDropDown no AJAX Control Toolkit estende um controlo DropDownList para que as alterações num DropDownList carreguem valores associados noutro DropDownList. (Por exemplo, uma lista apresenta os estados dos EUA, e a lista seguinte é preenchida com as principais cidades desse estado.) O primeiro desafio a resolver é realmente preencher uma lista suspensa usando este controlo.

Passos

Para ativar a funcionalidade do ASP.NET AJAX e do Control Toolkit, o ScriptManager controlo deve ser colocado em qualquer lugar da página (mas dentro do <form> elemento):

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

Depois, é necessário um controlador DropDownList:

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

Para esta lista, é adicionado um extensor CascadingDropDown. Enviará um pedido assíncrono para um serviço web que depois devolverá uma lista de entradas a serem exibidas na lista. Para que isto funcione, é necessário definir os seguintes atributos CascadingDropDown:

• ServicePath: URL de um serviço web que entrega as entradas da lista
• ServiceMethod: Método web que fornece as entradas da lista
• TargetControlID: ID da lista suspensa
• Category: Informação de categoria que é submetida ao método web quando chamada
• PromptText: Texto exibido ao carregar assíncronamente dados da lista do servidor

Aqui está a marcação para o CascadingDropDown elemento. A única diferença entre C# e VB é o nome do serviço web associado:

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

O código JavaScript proveniente do CascadingDropDown extensor chama um método de serviço web com a seguinte assinatura:

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

Portanto, o aspeto importante é que o método precisa de devolver um array de tipo CascadingDropDownNameValue (definido pelo ASP.NET AJAX Control Toolkit). No CascadingDropDownNameValue construtor, primeiro deve ser fornecido o texto da entrada da lista e depois o seu valor, tal como <option value="VALUE">NAME</option> acontece em HTML. Aqui estão alguns dados de exemplo:

<%@ WebService Language="C#" Class="CascadingDropdown0" %>
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 CascadingDropdown0 : 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();
 }
}

Carregar a página no navegador fará com que a lista seja preenchida com três fornecedores.

A lista é preenchida automaticamente (Clique para ver a imagem em tamanho real)