通过 CascadingDropDown 使用自动回发 (C#)

作者 ：Christian Wenz

下载 PDF

AJAX 控件工具包中的 CascadingDropDown 控件扩展 DropDownList 控件，以便一个 DropDownList 中的更改在另一个 DropDownList 中加载关联的值。 但是，使用 CascadingDropDown 控件时，ASP。NET 的 DropDownList 控件的 AutoPostBack 功能不起作用，因为将数据异步加载到列表中会生成 (不必要的) 回发本身。 使用某些 JavaScript 代码，可以避免这种影响。

概述

AJAX 控件工具包中的 CascadingDropDown 控件扩展 DropDownList 控件，以便一个 DropDownList 中的更改在另一个 DropDownList 中加载关联的值。 (例如，一个列表提供美国各州的列表，然后下一个列表将填充该州的主要城市。) 但是，在使用 CascadingDropDown 控件时，ASP。NET 的 DropDownList 控件的 AutoPostBack 功能不起作用，因为将数据异步加载到列表中会生成 (不必要的) 回发本身。 使用某些 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 扩展程序，提供 Web 服务 URL 和方法信息：

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

然后，CascadingDropDown 扩展程序使用以下方法签名异步调用 Web 服务：

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

方法返回 CascadingDropDown 值类型的数组。 该类型的构造函数首先需要列表条目的描述文字，然后 (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();
 }
}

在浏览器中加载页面将在下拉列表中填充三个供应商，第二个供应商将被预选。 此外，ASP.NET 定义 __doPostBack() JavaScript 方法。 加载页面后，此 JavaScript 调用将添加到下拉列表中，但前提是其中存在元素。 如果列表中没有元素，则 Control Toolkit 当前正在加载它们，因此 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>

这样，仅当列表中存在实际元素并且用户选择条目时，才会执行回发。

选择列表元素会导致回发 (单击以查看全尺寸图像)

上一页下一页