Utilização do Auto-Postback com CascadingDropDown (VB)

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. No entanto, ao usar o controlo CascadingDropDown, a funcionalidade AutoPostBack do controlo DropDownList do ASP.NET não funciona, pois carregar dados de forma assíncrona na lista gera um postback (desnecessário) por si mesmo. Com algum código JavaScript, este efeito pode ser evitado.

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 fornece uma lista dos estados dos EUA, e a próxima lista é então preenchida com as principais cidades desse estado.) No entanto, ao usar o controlo CascadingDropDown, a funcionalidade AutoPostBack do controlo DropDownList do ASP.NET não funciona, pois o carregamento assíncrono de dados na lista gera um postback (desnecessário) por si só. Com algum código JavaScript, este efeito pode ser evitado.

Passos

Para ativar a funcionalidade do ASP.NET AJAX e do Control Toolkit, o controlo ScriptManager 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 o extensor CascadingDropDown, que fornece informações sobre o URL e o método do serviço web.

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

O extensor CascadingDropDown chama então 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 devolve um array de tipo CascadingDropDown value. O construtor do tipo espera primeiro a legenda da entrada da lista e depois 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

Carregar a página no navegador preenche a lista suspensa com três fornecedores, sendo o segundo pré-selecionado. Além disso, ASP.NET define o __doPostBack() método JavaScript. Depois de carregada a página, esta chamada JavaScript é adicionada à lista suspensa, mas apenas se houver elementos nela. Se não houver elementos na lista, o Control Toolkit está a carregá-los, por isso o código JavaScript usa um timeout 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>

Desta forma, um postback só é executado quando existem efetivamente elementos na lista e o utilizador seleciona uma entrada.

Selecionar um elemento da lista origina um postback (Clique para ver a imagem em tamanho real)