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

por Christian Wenz

Baixar PDF

O controle CascadingDropDown no Kit de Ferramentas de Controle AJAX estende um controle DropDownList para que as alterações em um DropDownList carreguem valores associados em outro DropDownList. No entanto, ao usar o controle CascadingDropDown, ASP. O recurso AutoPostBack do controle DropDownList do NET não funciona, pois o carregamento assíncrono de dados 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 Kit de Ferramentas de Controle AJAX estende um controle DropDownList para que as alterações em um DropDownList carreguem valores associados em outro DropDownList. (Por exemplo, uma lista fornece uma lista de estados dos EUA e a próxima lista é preenchida com as principais cidades desse estado.) No entanto, ao usar o controle CascadingDropDown, ASP. O recurso AutoPostBack do controle DropDownList do NET não funciona, pois o carregamento assíncrono de dados na lista gera um postback (desnecessário) em si. Com algum código JavaScript, esse efeito pode ser evitado.

Etapas

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

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

Em seguida, um controle DropDownList é necessário:

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

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

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

O extensor CascadingDropDown chama de forma assíncrona 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 o legenda da entrada de lista e, em seguida, o valor (atributo HTMLvalue).

<%@ 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, sendo o segundo pré-selecionado. 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 elementos na lista, o Kit de Ferramentas de Controle os carregará no momento, portanto, o código JavaScript usará um tempo limite e tentará novamente em 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á realmente elementos na lista e o usuário seleciona uma entrada.

Selecionar um elemento de lista causa um postback

Selecionar um elemento de lista causa um postback (Clique para exibir imagem em tamanho real)