Używanie automatycznego ogłaszania zwrotnego za pomocą kontrolki CascadingDropDown (VB)
Autor: Christian Wenz
Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList ładowały skojarzone wartości w innej kontrolce DropDownList. Jednak w przypadku korzystania z kontrolki CascadingDropDown asp. Funkcja AutoPostBack kontrolki DropDownList platformy NET nie działa, ponieważ asynchroniczne ładowanie danych do listy powoduje wygenerowanie (niepotrzebnego) ogłaszania zwrotnego. W przypadku kodu JavaScript można uniknąć tego efektu.
Omówienie
Kontrolka CascadingDropDown w zestawie narzędzi AJAX Control Toolkit rozszerza kontrolkę DropDownList, aby zmiany w jednej kontrolce DropDownList ładowały skojarzone wartości w innej kontrolce DropDownList. (Na przykład jedna lista zawiera listę stanów USA, a następna lista jest następnie wypełniona dużymi miastami w tym stanie). Jednak w przypadku korzystania z kontrolki CascadingDropDown asp. Funkcja AutoPostBack kontrolki DropDownList platformy NET nie działa, ponieważ asynchroniczne ładowanie danych do listy powoduje wygenerowanie (niepotrzebnego) ogłaszania zwrotnego. W przypadku kodu JavaScript można uniknąć tego efektu.
Kroki
Aby aktywować funkcje ASP.NET AJAX i Control Toolkit, kontrolka ScriptManager musi zostać umieszczona w dowolnym miejscu na stronie (ale w elemecieform<>):
<asp:ScriptManager ID="asm" runat="server" />
Następnie wymagana jest kontrolka DropDownList:
<div>
Vendor: <asp:DropDownList ID="VendorsList" runat="server"/>
</div>
Dla tej listy jest dodawany rozszerzenie CascadingDropDown, dostarczając adres URL usługi internetowej i informacje o metodzie:
<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server"
ServicePath="CascadingDropdown3.vb.asmx" ServiceMethod="GetVendors"
TargetControlID="VendorsList" Category="Vendor" />
Rozszerzenie CascadingDropDown następnie asynchronicznie wywołuje usługę internetową z następującym podpisem metody:
Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
Metoda zwraca tablicę typu CascadingDropDown. Konstruktor typu oczekuje najpierw podpis wpisu listy, a następnie wartość (atrybut 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
Załadowanie strony w przeglądarce spowoduje wypełnienie listy rozwijanej trzema dostawcami, a drugi jest wstępnie wybrany. 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 istnieją w niej elementy. Jeśli na liście nie ma żadnych elementów, zestaw narzędzi control toolkit jest obecnie ładowany, więc kod JavaScript używa limitu czasu i spróbuje ponownie za pół 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 ogłaszanie zwrotne jest wykonywane tylko wtedy, gdy na liście znajdują się elementy, a użytkownik wybiera wpis.
Wybranie elementu listy powoduje wyświetlenie ogłaszania zwrotnego (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
