Uso de postback automático com CascadingDropDown (C#)

por Christian Wenz

Baixar código ou baixar PDF

O controle CascadingDropDown no AJAX Control Toolkit estende um controle DropDownList para que as alterações em uma DropDownList carreguem valores associados em outra DropDownList. No entanto, ao usar o controle CascadingDropDown, o ASP. O recurso AutoPostBack do controle DropDownList da NET não funciona, pois o carregamento de dados de forma assíncrona na lista gera um postback (desnecessário) em si. Com algum código JavaScript, esse efeito pode ser evitado.

Visão geral

O controle CascadingDropDown no AJAX Control Toolkit estende um controle DropDownList para que as alterações em uma DropDownList carreguem valores associados em outra DropDownList. (Por exemplo, uma lista fornece uma lista de Estados dos EUA e a próxima lista é então preenchida com cidades principais nesse estado.) No entanto, ao usar o controle CascadingDropDown, o ASP. O recurso AutoPostBack do controle DropDownList da NET não funciona, pois o carregamento de dados de forma assíncrona na lista gera um postback (desnecessário) em si. Com algum código JavaScript, esse efeito pode ser evitado.

Etapas

Para ativar a funcionalidade do ASP.NET AJAX e do kit de ferramentas de controle, o controle de ScriptManager deve ser colocado em qualquer lugar na página (mas dentro do elemento <form>):

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

Em seguida, um controle DropDownList é necessário:

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

Para essa lista, um extensor CascadingDropDown é adicionado, fornecendo a URL do serviço Web e informações do método:

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

Em seguida, o extensor CascadingDropDown chama assincronamente um serviço Web com a seguinte assinatura de método:

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

O método retorna uma matriz do tipo valor CascadingDropDown. O construtor do tipo espera primeiro a legenda da entrada da lista e, em seguida, o valor (HTML value atributo).

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

Carregar a página no navegador preencherá a lista suspensa com três fornecedores, a segunda sendo selecionada. Além disso, ASP.NET define o __doPostBack() método JavaScript. Depois que a página for carregada, essa chamada JavaScript será adicionada à lista suspensa, mas somente se houver elementos nela. Se não houver nenhum elemento na lista, o kit de ferramentas de controle está carregando-os no momento, portanto, o código JavaScript usa um tempo limite e tenta novamente em um meio 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>

Dessa forma, um postback só é executado quando há elementos na lista e o usuário seleciona uma entrada.

selecionar um elemento de lista causa um postback

A seleção de um elemento de lista causa um postback (clique para exibir a imagem em tamanho normal)