桦山涧

桦山涧
Asp.net ---->知识改变命运!
posts - 261, comments - 171, trackbacks - 6, articles - 3
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Ajax.NET(学习资料笔记一)

Posted on 2006-09-25 22:54 桦林 阅读(...) 评论(...) 编辑 收藏

AJAX.NET 文档(英文)和网站(英文)对开发人员快速入门非常有用。在介绍使用此技术的一些具体示例之前,我们将简要回顾您所需要知道的核心步骤。

首先从 AJAX.NET 项目网站(英文)上下载并解压缩 AJAX 文件,然后按照您的喜好在 Visual Basic .NET 或 C# 中创建新的 ASP.NET 项目,再向 AJAX.dll 文件添加引用(英文)。唯一的额外配置步骤是在 <system.web> 元素中(位于 web.config 文件中)添加以下代码。

<configuration> 
<system.web>
<httpHandlers>
<!-- Register the ajax handler -->
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
</system.web>
</configuration>

为了使服务器端函数在 JavaScript 中可用,必须做两件事情。首先,要使用的函数必须标有 Ajax.AjaxMethodAttribute。其次,在页加载事件期间,必须通过调用 Ajax.Utility.RegisterTypeForAjax 来注册包含这些函数的类。听起来似乎有些复杂,但请不必担心;实际上只需要在代码中多加两行。让我们看一个示例。

//C# public class Sample :System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) 
{ //注册我们感兴趣的包含服务器端函数
//的类
Ajax.Utility.RegisterTypeForAjax(typeof(Sample));
}
[Ajax.AjaxMethod()]
public string GetMessageOfTheDay()
{ return "Experience is the mother of wisdom"; }
}
'VB.NET Public Class Sample Inherits System.Web.UI.Page
Private Sub Page_Load(sender AsObject, e As EventArgs)
Handles MyBase.Load
'注册我们感兴趣的包含服务器端函数
'的类 Ajax.Utility.RegisterTypeForAjax(GetType(Sample))
End Sub
<Ajax.AjaxMethod()> _
Public Function GetMessageOfTheDay() As String
Return "Experience is the mother of wisdom"
End Function
End Class

以上示例首先告知 Ajax.NET 在 Sample 类中查找友好的 Ajax 方法。它正好是与实际页相同的类,但是它可以是任意 .NET 类,或可以注册多个类。然后,Ajax.NET 将浏览指定的类,来查找标有 AjaxMethodAttribute 的所有方法,其中 Sample 类有一个 GetMessageOfTheDay。

完成后,剩下唯一要做的就是在 JavaScript 中使用它。Ajax.NET 自动创建与注册的类具有相同名称的 JavaScript 变量(在本例中将为 Sample),它提供与 AjaxMethod 具有相同名称的函数(在本例中为 GetMessageOfTheDay)。如下所示。

<script language="javascript">
Sample.GetMessageOfTheDay(GetMessageOfTheDay_CallBack);
function GetMessageOfTheDay_CallBack(response)
{ alert(response.value); }
</script>

除了 JavaScript 回调函数以外,JavaScript GetMessageOfTheDay 还需要与其服务器端对应部分相同的参数(在此情况下,没有参数),以便在完成时执行并传递响应。在此,我们看到 AJAX 在工作时的异步特性,因为对 GetMessageOfTheDay 的调用不阻碍执行其他 JavaScript 代码,也不阻碍用户继续在页上进行操作。完成服务器端处理时,Ajax.NET 调用指定的回调函数 GetMessageOfTheDay_CallBack,并向其传递由服务器端返回值组成的响应。

服务器端代码和 JavaScript 代码之间的映射可能有些混乱。图 1 简要显示了服务器端代码和 JavaScript 代码,以及两者之间的映射。


图 1:服务器端代码和 JavaScript 代码之间的映射

当然令人感兴趣的 Ajax.NET 还有更多内容值得介绍,例如对 .NET 类型的支持和丰富的回调响应(它不仅仅是值)。以下示例将会重点介绍某些功能,希望帮助您理解 AJAX 如何帮助您创建成功的应用程序。

示例 1:链接的下拉列表

本文的开始简要地讨论了用于链接两个 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# 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 <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 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

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