Uso del postback automatico con CascadingDropDown (VB)

di Christian Wenz

Scaricare il PDF

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

Informazioni generali

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

Gradi

Per attivare la funzionalità di ASP.NET AJAX e Control Toolkit, il ScriptManager controllo deve essere inserito in qualsiasi punto della pagina (ma all'interno dell'elemento<form>):

<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 extender 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'extender 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 valori di tipo CascadingDropDown. Il costruttore del tipo prevede prima la didascalia della voce di elenco e quindi il valore (attributo 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

Il caricamento della pagina nel browser riempie l'elenco a discesa con tre fornitori, il secondo viene pre-selezionato. Inoltre, ASP.NET definisce il __doPostBack() metodo JavaScript. Una volta caricata la pagina, questa chiamata JavaScript viene aggiunta all'elenco a discesa, ma solo se sono presenti elementi in esso contenuti. Se non sono presenti elementi nell'elenco, Control Toolkit li sta caricando, quindi il codice JavaScript usa un timeout e riprova in mezzo 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, un postback viene eseguito solo quando sono presenti elementi nell'elenco e l'utente seleziona una voce.

La selezione di un elemento della lista causa un postback

La selezione di un elemento elenco causa un postback (fare clic per visualizzare l'immagine a dimensione intera)