ASP.NET AJAX示例:下拉列表

开发 后端
本文提供了一个ASP.NET AJAX示例:下拉列表的实现。

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

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

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

  1. //C#  
  2. public static DataTable GetShippingCountries();  
  3. public static DataView GetCountryStates(int countryId);  
  4. 'VB.NET  
  5. Public Shared Function GetShippingCountries() As DataTable  
  6. Public Shared Function GetCountryStates(ByVal countryId As Integer)  
  7. As DataView  

现在,让我们转到相反面,创建简单的 Web 窗体。

  1. < asp:DropDownList ID="countries" Runat="server" /> 
  2. < asp:DropDownList ID="states" Runat="server" /> 
  3. < asp:Button ID="submit" Runat="server" Text="Submit" /> 

Page_Load 事件同样简单,和前述的 Web 窗体一样。我们使用数据访问层来检索可用的国家/地区,并将其绑定到 countriesDropDownList 中。

  1. //C#:ASP.NET AJAX示例  
  2. if (!Page.IsPostBack)  
  3. {  
  4. countries.DataSource = DAL.GetShippingCountries();  
  5. countries.DataTextField = "Country";  
  6. countries.DataValueField = "Id";  
  7. countries.DataBind();  
  8. countries.Items.Insert(0, new ListItem("Please Select""0"));  
  9. }  

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

  1. 'VB.NET:ASP.NET AJAX示例  
  2. < Ajax.AjaxMethod()> _  
  3. Public Function GetStates (ByVal countryId As IntegerAs DataView  
  4. Return DAL.GetCountryStates(countryId)  
  5. End Function 

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

  1. //C#  
  2. Ajax.Utility.RegisterTypeForAjax(typeof(Sample));  
  1. 'VB.NET  
  2. Ajax.Utility.RegisterTypeForAjax(GetType(Sample))  

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

  1. < asp:DropDownList onChange="LoadStates(this)"   
  2. ID="countries" Runat="server" /> 

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

  1. //JavaScript:ASP.NET AJAX示例  
  2. function LoadStates(countries)  
  3. {  
  4. var countryId = countries.options[countries.selectedIndex].value;  
  5. Sample.GetStates(countryId, LoadStates_CallBack);  
  6. }  

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

  1. function LoadStates_CallBack(response)  
  2. {  
  3. //如果服务器端代码出现异常  
  4. if (response.error != null)  
  5.  {  
  6. //我们应该能做得更好  
  7. alert(response.error);   
  8. return;  
  9.  }  
  10. var states = response.value;  
  11. //如果不是我们所希望的响应  
  12. if (states == null || typeof(states) != "object")  
  13.  {  
  14. return;  
  15.  }  
  16. //获得州下拉列表  
  17. var statesList = document.getElementById("states");  
  18. statesList.options.length = 0; //重置州下拉列表  
  19. //记住,其长度不是 JavaScript 中的 Length  
  20. for (var i = 0; i <  states.length; ++i)  
  21.  {  
  22. //如命名属性一样公开行的列  
  23. statesList.options[statesList.options.length] =  
  24. new Option(states[i].State, states[i].Id);  
  25.  }  
  26. }  

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

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

  1. 'VB.NET  
  2. Private Sub submit_Click(sender As Object, e As EventArgs)  
  3. Dim selectedStateId As String = Request.Form(states.UniqueID)  
  4. '应进行一些用户验证...  
  5. states.DataSource =  
  6. DAL.GetCountryStates(Convert.ToInt32(countries.SelectedIndex))  
  7. states.DataTextField = "State" 
  8. states.DataValueField = "Id" 
  9. states.DataBind()  
  10. states.SelectedIndex =   
  11. states.Items.IndexOf(states.Items.FindByValue(selectedStateId))  
  12. End Sub 

首先,我们不能使用 states.SelectedValue 属性,而必须使用 Request.Form。其次,如果我们想向用户重新显示该列表,需要重新使用相同的数据访问方法绑定州 DropDownList。***,必须以编程方式设置选定的值。

以上就是ASP.NET AJAX示例:链接的下拉列表的实现。

【编辑推荐】

  1. AJAX.NET安装配置全指南
  2. Ajax.Net快速入门
  3. ASP.NET AJAX软件下载
  4. ASP.NET之父强烈推荐:ASP.NET AJAX著作
  5. Asp.net Ajax控件之AutoComplete控件几点浅析
责任编辑:yangsai 来源: MSDN
相关推荐

2009-08-07 16:27:59

ASP.NET AJA

2009-08-07 16:39:08

ASP.NET AJA

2009-07-22 16:11:43

ASP.NET AJA

2009-07-22 16:25:41

ASP.NET AJA

2009-07-22 16:17:39

ASP.NET AJA

2009-07-24 13:41:15

ASP.NET AJA

2009-07-22 16:05:34

ASP.NET AJA

2009-07-22 15:58:52

ASP.NET AJA

2009-07-31 13:24:43

ASP.NET AJA

2009-07-29 13:50:26

UpdatePanelASP.NET

2009-07-20 10:16:13

配置ASP.NET A

2009-07-28 09:02:32

asp.net aja

2009-07-29 15:53:22

ASP.NET AJA

2009-07-21 17:18:26

UpdateProgrASP.NET AJA

2009-07-20 13:14:25

安装ASP.NET A

2009-07-20 17:39:36

WCF服务ASP.NET AJA

2009-07-20 13:54:31

ScriptManagASP.NET AJA

2009-07-24 17:31:56

ASP.NET AJA

2009-07-20 17:59:07

JavaScript调ASP.NET AJA

2009-07-21 09:53:55

ASP.NET AJAWCF服务
点赞
收藏

51CTO技术栈公众号