APS.NET MVC + EF (10)---使用AJAX

在Web系统中，Ajax技术已经成为提高用户体验的必备技术。开发Ajax程序，涉及两方面的内容：一是客户端技术，二是服务器端技术。

（1）客户端技术

核心工作是通过JavaScript向服务器发送数据和接收数据。初次之外还涉及两个工作，一是数据的展示，因此涉及Html DOM、CSS等相关技术；二是数据处理，因此涉及JSON、XML等数据格式处理技术。在实际开发过程中，可以借助一些客户端框架，来提高工作效率。

（2）服务器端技术

核心工作是完成在服务器端接收和发送数据。

10.1 使用动作方法处理Ajax请求

在动作方法中处理Ajax请求，重点关注的是如何向客户端返回数据。

对于接收数据，由于Ajax客户端程序仍是通过Get或Post方式发送数据，因此处理方式和接收非Ajax请求一致。

向服务器端发送数据，一般有如下几种形式。

10.1.1 返回纯文本数据

对于向客户端返回结构单一的数据，可以使用纯文本格式，如删除操作是否成功的提示，用法如示例1所示。

示例1

public ActionResult Delete(int? id)

{

//省略代码

if(manager.Delete(id))

{

return Content("1"); //操作成功

}

return Content("0");

}

对于示例1，客户端接收的数据是"0"或"1"，根据数据客户端可做出删除操作是否成功的提示。

10.1.2 返回分部视图

对于局部刷新的效果，多数情况是向服务器端请求一个局部的页面，示例2展示了针对Ajax请求返回一个分部视图。

示例2

/// 获取当前用户的分组信息

public ActionResult ListGroups()

{

User user = Session["CurrentUser"] as User;

if (user == null)

{

return this.Content("<script>window.location='" + Url.Action("Login", "Account") + "'</script>");

}

int userId = user.UserId;

//分组列表数据

var groups = context.PrivateGroups.Where(a => a.OwnerId == userId).ToList();

//返回分部视图

return PartialView("GroupList");

}

注意使用PartialView（）方法返回分部视图。

10.1.3 返回结构化数据

如果向客户端返回复杂结构的数据，一般需要由服务器端向客户端返回客户端支持的数据格式，如JSON格式和XML格式。在不同的服务器端平台中，都有相应的API 支持将对象转化成这些格式的数据。如示例3所示。

示例3

/// 获取当前用户分组信息

public ActionResult ListGroupsToJson()

{

User user = Session["CurrentUser"] as User;

if (user == null)

return Content("");

int userId = user.UserId;

//分组列表数据

var groups = (from g in context.PrivateGroups

where g.OwnerId == userId

select g

).ToList();

return Json(groups,JsonRequestBehavior.AllowGet);

}

示例3中， Json（）方法负责将对象序列化为JSON数据，其中第一个参数是要序列化的对象，第二个 JsonRequestBehavior 类型的参数，是一个枚举类型，包含AllowGet 和 DenyGet 两个值，分别代表允许Get 请求和不允许 Get 请求。

客户端获取JSON数据后，一般需要对JSON数据进行处理，以某种形式展示出来。多数情况会使用客户端控件来处理，比如 BootStrapTables 。

在使用ASP.NET MVC 提供的 Json（）方法返回JSON数据时，对待DateTime类型的数据处理往往不能满足我们的要求。在实际开发中我们通常会使用如下方法：

Newtonsoft.Json.JsonConvert.SerializeObject(object value)

示例3中的最后一行代码可以换做如下：

return Content( JsonConvert.SerializeObject(groups) );

10.2 使用AjaxHelper

总的来说，在Ajax程序开发中，客户端的编码工作是必不可少的，但是如果使用ASP.NET MVC 框架，这些编码工作就会大大减少，甚至在一些简单的应用场景，不需要手工编写JavaScript 代码。

ASP.NET MVC 的这种功能是由 AjaxHelper 类型的对象提供的，此类和 HtmlHelper 是对应的，也是辅助视图输出的，特殊的是它用于生成具有Ajax功能的视图。相应地，在视图基类 WebViewPage 中包含名称为 AjaxHelper 类型的对象 Ajax ，通过Ajax 对象调用相应的方法实现Ajax 功能视图的输出。

10.2.1 构造无刷新表单

最常见的一种场景是表单提交，在客户端使用jQuery 时，一般会借助于 $.ajax() 和 $.post() 提交表单。其中，大部分的编码工作是从表单中获取提交的数据，工作量往往随着表单的字段增加而增加。

在ASP.NET MVC 中，借助于 Ajax 对象提供的 BeginForm（）方法，即可完成此功能。如下语法展示了BeginForm（）一个典型的重载版本定义。

public static MvcForm BeginForm(

this AjaxHelper ajaxHelper,

string actionName,

object routeValues,

AjaxOptions ajaxOptions

)

和 HtmlHelper 中的BeginForm（）不同的是，多了AjaxOption 类型的参数，通过该类对请求发送前后进行相关的设置，主要属性如表10-1 所示。

表10-1 AjaxOptions 类的主要属性

主要属性	说明
string UpdateTargetId	服务器响应来更新的 DOM 元素的 ID
string Confirm	提交请求之前显示在确认窗口中的消息
string HttpMethod	HTTP 请求方法（"Get"或"Post"）
InsertionMode InsertionMode	将响应插入目标 DOM 元素的模式，默认为Replace
int LoadingElementDuration	控制在显示或隐藏加载元素时的动画持续时间(毫秒）
string OnBegin	在更新页面之前调用的 JavaScript 函数
string OnSuccess	在成功更新页面之后调用的 JavaScript 函数
string OnComplete	在实例化相应数据后但在更新页面前调用的JavaScript函数
string OnFailure	在页面更新失败时调用的JavaScript 函数
string Url	向服务器发送请求的

示例4展示了 Ajax.BeginForm()的使用方法。

示例4

@section scripts{

src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"> </script>

}

@using (Ajax.BeginForm("AddRecord",

new AjaxOptions { UpdateTargetId = "AddRecordMessage" }))

{

在想什么呢？记下来吧</textarea>

<p>

<a id="AddRecordMessage" class="message"></a></p>

}

//动作方法-添加记录

[HttpPost]

public ActionResult AddRecord(string Content)

{

if (ModelState.IsVaild)

{

Record record= new Record();

record.Content=Content;

db.Records.Add(record);

if (db.SaveChanges()>0)

{

return Content("记录保存成功！");

}

Else

{

return Content("记录保存失败！");

}

else

{

return Content("请按要求填写信息！");

}

在示例4中，只用到 AjaxOption 类型的一个参数 UpdateTargetId ，其值为<a>标签的Id属性，<a>标签用于显示Ajax 方式提交后，从服务器端返回的消息提示。

需要注意使用ASP.NET MVC 提供的 Ajax 功能，需要引入 jquery.unobtrusive-ajax.min.js 脚本，该文件提供非侵入方式提供 Ajax 功能，而不生成Html 和 JavaScript 混合的代码，这和验证框架处理方式是一致的。示例4中 Ajax.BeginForm() 方法生成的Html 代码如下。

<form action="/Home/AddRecord"

data-ajax="true" data-ajax-mode="replace"

data-ajax-update="#AddRecordMessage"

id="form0" method="post">

</form>

对于一些简单的应用场景，使用 Ajax.BeignForm()方法基本不需要手工编写任何 JavaScript 脚本，但对一些特殊需求，还是需要编写 JavaScripts 函数实现，这些函数可以通过 AjaxOptions 的属性赋值进行调用。示例5 展示了 AjaxOptions 的 OnSucess 属性和 Confirm 属性的用法。

示例5

function addRecordSuccess(data) {

$("#AddRecordMessage").html(data).show().hide(5000);

}

</script>

@using (Ajax.BeginForm("AddRecord", new AjaxOptions {

OnSuccess = "addRecordSuccess", Confirm="确认要提交么？" }))

{

在想什么呢？记下来吧

</textarea>

<p>

</p>

}

在示例5代码中，OnSucess 属性设置为 JavaScript 函数 addRecordsSuccess(), 使用函数实现消息显示后在5秒内自动隐藏。另外，使用 Confirm 弹出提交前的确认提示框。

10.2.2 生成无刷新链接

除了表单提交外，还有一个典型的应用场景，当点击一个链接时，在同一个页面局部加载页面内容。对于这种场景，Ajax对象提供了两种生成Ajax链接的方法，即 Ajax.ActionLink() 和 Ajax.RouteLink() ,和Html对象的两个对应的方法相比，多了一个AjaxOption参数。如示例6所示。

示例6

@foreach (Friends.Models.PrivateGroup m in ViewBag.Groups)

{

<li>

@Ajax.ActionLink(m.GroupName,"ListFriends","Friend",

new{groupId=m.GroupId},

new AjaxOptions(){OnSuccess="loadFriendsByGroup"})

@m.FriendRelations.Count()</span>

</li>

}

</ul>

示例6运行后，Ajax.ActionLink()对应生成的Html代码如下所示。

<a data-ajax="true" data-ajax-success="loadFriendsByGroup"

href="/Friend/ListFriends?groupId=4">链接内容</a>