Używanie automatycznego ogłaszania zwrotnego za pomocą polecenia CascadingDropDown (C#)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList wczytywały odpowiednie wartości w innej kontrolce DropDownList. Jednak w przypadku używania kontrolki CascadingDropDown funkcja AutoPostBack kontrolki DropDownList platformy ASP.NET nie działa, ponieważ asynchroniczne ładowanie danych do listy samo generuje (niepotrzebny) postback. W przypadku kodu JavaScript można uniknąć tego efektu.

Przegląd

Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList wczytywały odpowiednie wartości w innej kontrolce DropDownList. (Na przykład jedna lista zawiera listę stanów USA, a następna lista jest wypełniona głównymi miastami w tym stanie). Jednak w przypadku używania kontrolki CascadingDropDown kontrolki DropDownList platformy ASP.NET funkcja AutoPostBack nie działa, ponieważ asynchroniczne ładowanie danych do listy powoduje wygenerowanie (niepotrzebnego) odświeżenia strony. W przypadku kodu JavaScript można uniknąć tego efektu.

Kroki

Aby aktywować funkcjonalność ASP.NET AJAX i zestawu narzędzi control Toolkit, kontrolka ScriptManager musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecie<form>):

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

Następnie wymagana jest kontrolka DropDownList:

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

Na potrzeby tej listy dodano rozszerzenie CascadingDropDown, udostępniając adres URL usługi internetowej i informacje o metodzie:

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

Rozszerzenie CascadingDropDown następnie wykonuje asynchroniczne wywołanie serwisu sieciowego z następującym podpisem metody:

public CascadingDropDownNameValue[] MethodNameHere(string knownCategoryValues, string category)

Metoda zwraca tablicę typu CascadingDropDown value. Konstruktor typu oczekuje najpierw podpisu wpisu listy, a następnie wartości (atrybut HTML value ).

<%@ 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();
 }
}

Załadowanie strony w przeglądarce spowoduje wypełnienie listy rozwijanej trzema dostawcami, a druga jest wstępnie wybrana. Ponadto ASP.NET definiuje metodę __doPostBack() JavaScript. Po załadowaniu strony to wywołanie języka JavaScript zostanie dodane do listy rozwijanej, ale tylko wtedy, gdy znajdują się w niej elementy. Jeśli na liście nie ma żadnych elementów, zestaw narzędzi Control Toolkit aktualnie je ładuje, więc kod JavaScript używa limitu czasu i spróbuje ponownie w połowie sekundy.

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

Dzięki temu postback jest wykonywany tylko wtedy, gdy lista zawiera elementy, a użytkownik wybiera wpis.

Wybranie elementu listy powoduje powrót (kliknij, aby wyświetlić obraz pełnowymiarowy)