ASP.NET AJAX示例：下拉列表

ASP.NET AJAX示例：链接的下拉列表

本文的开始简要地讨论了用于链接两个 DropDownList 的两种传统方法。当选定的索引更改时，返回页；或者将所有可能的数据加载到 JavaScript 数组并动态显示。希望您可以看到 AJAX 如何替代这两种解决方案。

首先，让我们来看一下我们的数据界面，并从该数据界面驱动示例。我们的数据访问层将提供两种方法：第一种方法将检索系统支持的国家/地区的列表，第二种方法将获取国家/地区 ID 并返回州/省的列表。由于这是纯数据访问，因此我们只需要使用方法。

//C#  



public static DataTable GetShippingCountries();  




public static DataView GetCountryStates(int countryId);  



'VB.NET  


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#：ASP.NET AJAX示例  



if (!Page.IsPostBack)  



{  


countries.DataSource = DAL.GetShippingCountries();  



countries.DataTextField = "Country";  




countries.DataValueField = "Id";  



countries.DataBind();  



countries.Items.Insert(0, new ListItem("Please Select", "0"));  



}  

通常，代码到此为止。首先，我们将创建要从 JavaScript 调用的服务器端函数。

'VB.NET：ASP.NET AJAX示例  


< Ajax.AjaxMethod()> _  



Public Function GetStates (ByVal countryId As Integer) As DataView  




Return DAL.GetCountryStates(countryId)  




End Function 

这与您通常使用的任何其他函数一样：它需要我们想要获得的国家/地区的 ID，并将该请求传递给 DAL。唯一的不同是我们已使用 AjaxMethodAttribute 标记了该方法。最后剩余的服务器端步骤是通过调用 RegisterTypeForAjax 使用 Ajax.NET 来注册包含上述方法的类（在此情况下，是我们的下面的代码）。

//C#  



Ajax.Utility.RegisterTypeForAjax(typeof(Sample));  

'VB.NET  



Ajax.Utility.RegisterTypeForAjax(GetType(Sample))  

我们已基本完成；剩余的就是从 JavaScript 调用 GetStates 方法和处理响应。当用户从国家/地区列表中选择新项时，我们想在逻辑上调用 GetStates。为此，我们将触发 JavaScript onChange 事件。这样就稍微更改了我们的 Web 窗体代码。

< asp:DropDownList onChange="LoadStates(this)"   



ID="countries" Runat="server" /> 

JavaScript LoadStates 函数将负责通过由 Ajax.NET 创建的代理发出异步请求。请记住，默认情况下，Ajax.NET 创建的代理的格式为 < RegisteredTypeName>.< ServerSideMethodName>。在我们的示例中，将为 Sample.GetStates。我们还想传入国家/地区 ID 参数和完成服务器端函数后 Ajax.NET 应调用的回调函数。

//JavaScript：ASP.NET AJAX示例  



function LoadStates(countries)  



{  



var countryId = countries.options[countries.selectedIndex].value;  



Sample.GetStates(countryId, LoadStates_CallBack);  


}  

最后一个步骤是处理我们的 LoadStates_CallBack 函数中的响应。Ajax.NET 最有用的功能大概是它支持很多 .NET 类型（我已经多次提到这一点）。回顾一下返回 DataView 的服务端函数。JavaScript 知道 DataView 什么？什么也不知道，但是 JavaScript 是面向对象的语言，而且 Ajax.NET 不只能够创建与 .NET DataView 相似的对象，还能将该函数返回的值映射到 JavaScript 副本。您应该记住 JavaScript DataView 只不过是实际 DataView 的副本，目前除了能够遍历行和访问列值以外不支持其他更多功能（例如设置 RowFilter 或 Sort 属性的功能）。

function LoadStates_CallBack(response)  


{  



//如果服务器端代码出现异常  




if (response.error != null)  



 {  



//我们应该能做得更好  



alert(response.error);   



return;  



 }  


var states = response.value;  



//如果不是我们所希望的响应  




if (states == null || typeof(states) != "object")  



 {  



return;  



 }  



//获得州下拉列表  




var statesList = document.getElementById("states");  




statesList.options.length = 0; //重置州下拉列表  




//记住，其长度不是 JavaScript 中的 Length  




for (var i = 0; i <  states.length; ++i)  



 {  



//如命名属性一样公开行的列  



statesList.options[statesList.options.length] =  



new Option(states[i].State, states[i].Id);  



 }  


}  

经过一些错误检查之后，前面的 JavaScript 获得州下拉列表，遍历响应的值，并动态地将选项添加到该下拉列表中。代码清晰、简单并与 C# 和 Visual Basic .NET 非常相似。就我个人而言（作为基于服务器端变量创建了 JavaScript 数组并将它们链接在一起的开发人员），我还要一段时间才能相信它真的起作用了。

有一个可能不太明显的主要问题。由于 DropDownList 是在 JavaScript 中动态创建的，因此它的项不属于 ViewState，并且不被维护。这意味着按钮的 OnClick 事件处理程序需要进行一些额外的修改。

'VB.NET  



Private Sub submit_Click(sender As Object, e As EventArgs)  




Dim selectedStateId As String = Request.Form(states.UniqueID)  




'应进行一些用户验证...  



states.DataSource =  


DAL.GetCountryStates(Convert.ToInt32(countries.SelectedIndex))  



states.DataTextField = "State" 




states.DataValueField = "Id" 



states.DataBind()  


states.SelectedIndex =   


states.Items.IndexOf(states.Items.FindByValue(selectedStateId))  



End Sub