Использование автоматической обратной передачи с помощью CascadingDropDown (VB)

Кристиан Венц (Christian Wenz)

Загрузить PDF-файл

Элемент управления CascadingDropDown в наборе элементов управления AJAX расширяет элемент управления DropDownList, чтобы изменения в одном DropDownList загружали связанные значения в другой DropDownList. Однако при использовании элемента управления CascadingDropDown используется ASP. Функция AutoPostBack элемента управления DropDownList в NET не работает, так как асинхронная загрузка данных в список создает (ненужную) обратную передачу. При использовании кода JavaScript этого эффекта можно избежать.

Общие сведения

Элемент управления CascadingDropDown в наборе элементов управления AJAX расширяет элемент управления DropDownList, чтобы изменения в одном DropDownList загружали связанные значения в другой DropDownList. (Например, один список содержит список штатов США, а следующий список заполняется крупными городами в этом штате.) Однако при использовании элемента управления CascadingDropDown используется ASP. Функция AutoPostBack элемента управления DropDownList в NET не работает, так как асинхронная загрузка данных в список создает (ненужную) обратную передачу. При использовании кода JavaScript этого эффекта можно избежать.

Этапы

Чтобы активировать функциональные возможности ASP.NET AJAX и control Toolkit, ScriptManager элемент управления должен размещаться в любом месте страницы (но в элементеform<> ):

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

Затем требуется элемент управления DropDownList:

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

Для этого списка добавляется расширитель CascadingDropDown, предоставляющий URL-адрес веб-службы и сведения о методе:

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

Затем расширитель CascadingDropDown асинхронно вызывает веб-службу со следующей сигнатурой метода:

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

Метод возвращает массив типа CascadingDropDown. Конструктор типа ожидает сначала подпись записи списка, а затем значение (атрибут 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

При загрузке страницы в браузере в раскрывающемся списке будут указаны три поставщика, второй из которых будет предварительно выбран. Кроме того, ASP.NET определяет __doPostBack() метод JavaScript. После загрузки страницы этот вызов JavaScript добавляется в раскрывающийся список, но только при наличии в нем элементов. Если в списке нет элементов, набор средств управления загружает их, поэтому код JavaScript использует время ожидания и пытается повторить попытку через полсекунда.

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

Таким образом, обратная связь выполняется только в том случае, если в списке есть фактические элементы и пользователь выбирает запись.

Выбор элемента списка приводит к обратной отправке (щелкните для просмотра полноразмерного изображения)

Назад