Uso del postback automatico con CascadingDropDown (VB)

di Christian Wenz

Scarica il PDF

Il controllo CascadingDropDown in AJAX Control Toolkit estende un controllo DropDownList in modo che le modifiche apportate a un elenco a discesa carichino i valori associati in un altro elenco a discesa. Tuttavia, quando si usa il controllo CascadingDropDown, ASP. La funzionalità AutoPostBack del controllo DropDownList di NET non funziona, poiché il caricamento asincrono dei dati nell'elenco genera un postback (non necessario). Con un codice JavaScript, questo effetto può essere evitato.

Panoramica

Il controllo CascadingDropDown in AJAX Control Toolkit estende un controllo DropDownList in modo che le modifiche apportate a un elenco a discesa carichino i valori associati in un altro elenco a discesa. Un elenco, ad esempio, fornisce un elenco di Stati Uniti e l'elenco successivo viene quindi riempito con le principali città in tale stato. Tuttavia, quando si usa il controllo CascadingDropDown, ASP. La funzionalità AutoPostBack del controllo DropDownList di NET non funziona, poiché il caricamento asincrono dei dati nell'elenco genera un postback (non necessario). Con un codice JavaScript, questo effetto può essere evitato.

Passaggi

Per attivare la funzionalità di ASP.NET AJAX e Control Toolkit, il ScriptManager controllo deve essere inserito ovunque nella pagina (ma all'interno dell'elementoform<>):

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

È quindi necessario un controllo DropDownList:

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

Per questo elenco, viene aggiunto un estensione CascadingDropDown, fornendo l'URL del servizio Web e le informazioni sui metodi:

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

L'estensione CascadingDropDown chiama quindi in modo asincrono un servizio Web con la firma del metodo seguente:

Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

Il metodo restituisce una matrice di tipo CascadingDropDown valore. Il costruttore del tipo prevede prima la didascalia della voce dell'elenco e quindi il valore (attributo HTMLvalue).

<%@ 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

Il caricamento della pagina nel browser riempirà l'elenco a discesa con tre fornitori, il secondo da preselezione. Inoltre, ASP.NET definisce il __doPostBack() metodo JavaScript. Dopo aver caricato la pagina, questa chiamata JavaScript viene aggiunta all'elenco a discesa, ma solo se sono presenti elementi. Se non sono presenti elementi nell'elenco, Control Toolkit viene attualmente caricato, quindi il codice JavaScript usa un timeout e riprova a metà secondo.

<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>

In questo modo viene eseguito un postback solo quando sono presenti elementi nell'elenco e l'utente seleziona una voce.

La selezione di un elemento elenco causa un postback (Fare clic per visualizzare l'immagine full-size)

Indietro