本文的开始简要地讨论了用于链接两个 DropDownList 的两种传统方法当选定的索引更改时返回页或者将所有可能的数据加载到 JavaScript 数组并动态显示希望您可以看到 AJAX 如何替代这两种解决方案
首先让我们来看一下我们的数据界面并从该数据界面驱动示例我们的数据访问层将提供两种方法第一种方法将检索系统支持的国家/地区的列表第二种方法将获取国家/地区 ID 并返回州/省的列表由于这是纯数据访问因此我们只需要使用方法
//C# public static DataTable GetShippingCountries();
public static DataView GetCountryStates(int countryId);
VBNET Public Shared Function GetShippingCountries() As DataTable
Public Shared Function GetCountryStates(ByVal countryId As Integer)
As DataView
现在让我们转到相反面创建简单的 Web 窗体
< asp:DropDownList ID=countries Runat=server />
< asp:DropDownList ID=states Runat=server />
< asp:Button ID=submit Runat=server Text=Submit />
Page_Load 事件同样简单和前述的 Web 窗体一样我们使用数据访问层来检索可用的国家/地区并将其绑定到 countriesDropDownList 中
//C#ASPNET AJAX示例 if (!PageIsPostBack)
{
countriesDataSource = DALGetShippingCountries();
countriesDataTextField = Country;
countriesDataValueField = Id;
countriesDataBind();
countriesItemsInsert( new ListItem(Please Select ));
}
通常代码到此为止首先我们将创建要从 JavaScript 调用的服务器端函数
VBNETASPNET AJAX示例 < AjaxAjaxMethod()> _ Public Function GetStates (ByVal countryId As Integer) As DataView Return DALGetCountryStates(countryId) End Function 这与您通常使用的任何其他函数一样它需要我们想要获得的国家/地区的 ID并将该请求传递给 DAL唯一的不同是我们已使用 AjaxMethodAttribute 标记了该方法最后剩余的服务器端步骤是通过调用 RegisterTypeForAjax 使用 AjaxNET 来注册包含上述方法的类（在此情况下是我们的下面的代码）
//C# AjaxUtilityRegisterTypeForAjax(typeof(Sample)); VBNET AjaxUtilityRegisterTypeForAjax(GetType(Sample)) 我们已基本完成剩余的就是从 JavaScript 调用 GetStates 方法和处理响应当用户从国家/地区列表中选择新项时我们想在逻辑上调用 GetStates为此我们将触发 JavaScript onChange 事件这样就稍微更改了我们的 Web 窗体代码
< asp:DropDownList onChange=LoadStates(this) ID=countries Runat=server /> JavaScript LoadStates 函数将负责通过由 AjaxNET 创建的代理发出异步请求请记住默认情况下AjaxNET 创建的代理的格式为 < RegisteredTypeName>< ServerSideMethodName>在我们的示例中将为 SampleGetStates我们还想传入国家/地区 ID 参数和完成服务器端函数后 AjaxNET 应调用的回调函数
//JavaScriptASPNET AJAX示例 function LoadStates(countries)
{
var countryId = countriesoptions[countriesselectedIndex]value;
SampleGetStates(countryId LoadStates_CallBack);
}
最后一个步骤是处理我们的 LoadStates_CallBack 函数中的响应AjaxNET 最有用的功能大概是它支持很多 NET 类型（我已经多次提到这一点）回顾一下返回 DataView 的服务端函数JavaScript 知道 DataView 什么？什么也不知道但是 JavaScript 是面向对象的语言而且 AjaxNET 不只能够创建与 NET DataView 相似的对象还能将该函数返回的值映射到 JavaScript 副本您应该记住 JavaScript DataView 只不过是实际 DataView 的副本目前除了能够遍历行和访问列值以外不支持其他更多功能（例如设置 RowFilter 或 Sort 属性的功能）
function LoadStates_CallBack(response)
{
//如果服务器端代码出现异常 if (responseerror != null)
{
//我们应该能做得更好 alert(responseerror);
return;
}
var states = responsevalue;
//如果不是我们所希望的响应
if (states == null || typeof(states) != object)
{
return;
}
//获得州下拉列表 var statesList = documentgetElementById(states);
statesListoptionslength = ; //重置州下拉列表 //记住其长度不是 JavaScript 中的 Length
for (var i = ; i < stateslength; ++i)
{
//如命名属性一样公开行的列 statesListoptions[statesListoptionslength] = new Option(states[i]State states[i]Id);
}
}
经过一些错误检查之后前面的 JavaScript 获得州下拉列表遍历响应的值并动态地将选项添加到该下拉列表中代码清晰简单并与 C# 和 Visual Basic NET 非常相似就我个人而言（作为基于服务器端变量创建了 JavaScript 数组并将它们链接在一起的开发人员）我还要一段时间才能相信它真的起作用了
有一个可能不太明显的主要问题由于 DropDownList 是在 JavaScript 中动态创建的因此它的项不属于 ViewState并且不被维护这意味着按钮的 OnClick 事件处理程序需要进行一些额外的修改
VBNET Private Sub submit_Click(sender As Object e As EventArgs)
Dim selectedStateId As String = RequestForm(statesUniqueID) 应进行一些用户验证 statesDataSource = DALGetCountryStates(ConvertToInt(countriesSelectedIndex))
statesDataTextField = State statesDataValueField = Id statesDataBind()
statesSelectedIndex = statesItemsIndexOf(statesItemsFindByValue(selectedStateId))
End Sub 首先我们不能使用 statesSelectedValue 属性而必须使用 RequestForm其次如果我们想向用户重新显示该列表需要重新使用相同的数据访问方法绑定州 DropDownList最后必须以编程方式设置选定的值
以上就是ASPNET AJAX示例链接的下拉列表的实现
