Uso del postback automatico con CascadingDropDown (C#)
Il controllo CascadingDropDown in AJAX Control Toolkit estende un controllo DropDownList in modo che le modifiche apportate a un oggetto DropDownList carichino i valori associati in un altro DropDownList. Tuttavia, quando si usa il controllo CascadingDropDown, ASP. La funzionalità AutoPostBack del controllo DropDownList di NET non funziona perché 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 oggetto DropDownList carichino i valori associati in un altro DropDownList. Ad esempio, un elenco fornisce un elenco degli stati Uniti e l'elenco successivo viene quindi compilato 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 perché 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 in qualsiasi punto della 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 extender CascadingDropDown, fornendo l'URL del servizio Web e le informazioni sul metodo:
<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
ServicePath="CascadingDropdown3.cs.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 CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, string category)
Il metodo restituisce una matrice di tipo CascadingDropDown. Il costruttore del tipo prevede prima il didascalia della voce di elenco e quindi il valore (attributo 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();
}
}
Il caricamento della pagina nel browser riempirà l'elenco a discesa con tre fornitori, il secondo viene pre-selezionato. 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 nell'elenco non sono presenti elementi, 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 elenco causa un postback (fare clic per visualizzare l'immagine a dimensione intera)
