Usando o Postback Automático com CascadingDropDown (VB)

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, o recurso AutoPostBack do controle DropDownList do ASP.NET não funciona, já que carregar dados de forma assíncrona na lista gera um postback por si só (desnecessário). 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, o recurso AutoPostBack do controle DropDownList do ASP.NET não funciona, já que carregar dados de forma assíncrona na lista gera um postback (desnecessário). Com algum código JavaScript, esse efeito pode ser evitado.

Steps

Para ativar a funcionalidade do ASP.NET AJAX e do Kit de Ferramentas de Controle, o ScriptManager controle deve ser colocado em qualquer lugar da 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, é adicionado um extensor CascadingDropDown, que fornece informações sobre a URL do serviço web e o método.

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
 ServicePath="CascadingDropdown3.vb.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 Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

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

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

Ao carregar a página no navegador, a lista suspensa será preenchida com três fornecedores, sendo o segundo pré-selecionado. Além disso, ASP.NET define o __doPostBack() método JavaScript. Após o carregamento da página, essa chamada JavaScript é adicionada à lista suspensa, mas somente se houver elementos presentes nela. Se não houver elementos 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 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 (Clique para exibir imagem em tamanho real)