通过 CascadingDropDown 使用自动回发 (C#)
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>
这样,仅当列表中存在实际元素并且用户选择条目时,才会执行回发。
选择列表元素会导致回发 (单击以查看全尺寸图像)