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

Кристиан Венц

Скачать в формате PDF

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

Обзор

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

Шаги

Чтобы активировать функциональные возможности ASP.NET AJAX и набора средств управления, элемент 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. Конструктор типа ожидает сначала заголовок записи списка, а затем значение (атрибут 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

Загрузка страницы в браузере заполняет раскрывающийся список тремя поставщиками, причем второй из них выбран по умолчанию. Кроме того, 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>

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

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