`

[ASP.NET MVC]14 - Unobtrusive Ajax

 
阅读更多

Ajax (Asynchronous JavaScript and XML 的缩写)，如我们所见，这个概念的重点已经不再是XML部分，而是 Asynchronous 部分，它是在后台从服务器请求数据的一种模型。MVC 框架内置了对 Unobtrusive Ajax 的支持，它允许我们通过 MVC 的 Help mothod 来定义 Ajax 的特性，而不用在 View 中参杂一大段 JavaScript 代码。

本文目录：

普通 Ajax 使用方式

在讲 MVC 中的 Unobtrusive Ajax 之前，我们先来看看 MVC 中 Ajax 的普通使用方式，读者可以在阅读后文的时候进行比较学习。
新建一个MVC应用程序（基本模板），添加一个名为 Home 的 controller，为自动生成的 Index action 添加视图，编辑 Index.cshtml 代码如下：

@{
    ViewBag.Title = "Index";
}

<script type="text/javascript">
    function test() {
        $.ajax({
            url: '@Url.Action("GetTestData")',
            type: "POST",
            success: function (result) {
                $("#lblMsg").text(result.msg);
            }
        });
    }
</script>

<h2 id="lblMsg"></h2>
<input type="button" value="测试" onclick="test();" />

在 HomeController 中添加一个名为 Test 的 action，如下：

public JsonResult GetTestData() {
    return Json(
        new { msg = "Datetime from server：" + DateTime.Now.ToString("HH:mm:ss") }
    );
}

运行程序，点击测试按钮，我们可以看到用 Ajax 从后台取回来的时间：

每次点击测试按钮时间都会刷新。这个地方有一点需要提醒大家，这个例子中 $.ajax() 方法使用的是 POST 请求，如果要使用 GET 请求，Test action 中调用 Json 方法需要设置 JsonRequestBehavior 的值为 AllowGet（默认是 DenyGet），如下：

public JsonResult GetTestData() {
    return Json(
        new { msg = "Datetime from server：" + DateTime.Now.ToString("HH:mm:ss") },
        JsonRequestBehavior.AllowGet
    );
}

另外，改成 GET 请求后，多次点击测试按钮，时间不会刷新。这是因为 GET 请求在 ASP.NET 中对于相同的URL请求返回的是缓存中的数据。

什么是 Unobtrusive Ajax

Unobtrusive Ajax 是在 Web 页面使用 JavaScript 的一种通用方式。这个术语没有明确的定义，但它有如下基本的原则（来自维基百科）：

  • 行为（JavaScript 代码）与 Web 页面的结构（Html 标记）和表现（CSS样式）分离。
  • JavaScript 最佳实现，解决JavaScript语言本身存在的传统问题（如缺乏可扩展性和开发人员编码风格不一致性）。
  • 解决浏览器兼容性问题。

为了加深理解，请观察如下某个 Unobtrusive Ajax 的“结构”部分的一段代码：

...
<form action="/People/GetPeopleData" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#tableBody" id="form0" method="post">
...

这是 MVC 开启 Unobtrusive JavaScript 后调用 Ajax.BeginForm 方法生成 的代码。这段代码和 JavaScript 是完全分离的，Html标签通过一些标记来告诉 JavaScript 所具有什么样的行为。分离出来的 JavaScript 文件（MVC中指引入的jquery.unobtrusive-ajax.min.js文件）中的代码，没有一句是专门为某个特定的Web页面中的某个 Html元素来编写的，即所有函数都是通用的。这就是 Unobtrusive Ajax 的核心思想。

相对于普通使用 Ajax 的方式，Unobtrusive Ajax 更容易阅读，增强了可扩展性和一致性，而且方便维护。

使用 MVC Unobtrusive Ajax

在 MVC 中使用 Unobtrusive Ajax ，首先要将其“开启”，需要做两个动作。一个是配置根目录下的 Web.config 文件，在 configuration/appSettings 节点下的 UnobtrusiveJavaScriptEnabled 值设为 true，如下所示：

... 
<configuration> 
    <appSettings> 
        ...
        <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
    </appSettings> 
</configuration> 
...

UnobtrusiveJavaScriptEnabled 的值在程序创建的时候默认为true，在开发的时候有时候只需要检查一下。第二个动作就是在需要使用 MVC Unobtrusive Ajax 的 View 中引入jquery库和jquery.unobtrusive-ajax.min.js文件，一般更为常见的是在 /Views/Shared /_Layout.cshtml 中引入，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

现在我们来做一个使用 Unobtrusive Ajax 的例子，从服务器获取一个简单的用户列表。为此我们需要准备一个Model，如下：

namespace MvcApplication1.Models {
    public class Person {
        public string ID { get; set; }
        public string Name { get; set; }
        public Role Role { get; set; }
    }

    public enum Role {
        Admin, User, Guest
    }
}

我一般习惯先写后台方法，再写UI。创建一个名为 People 的 controller， 在该 controller 中写好要用的 action，代码如下：

public class PeopleController : Controller {
    public class PeopleController : Controller {
        private Person[] personData = { 
            new Person {ID = "ZhangSan", Name = "张三", Role = Role.Admin}, 
            new Person {ID = "LiSi", Name = "李四", Role = Role.User}, 
            new Person {ID = "WangWu", Name = "王五", Role = Role.User}, 
            new Person {ID = "MaLiu", Name = "马六", Role = Role.Guest}
        };

        public ActionResult Index() {
            return View();
        }

        public PartialViewResult GetPeopleData(string selectedRole = "All") {
            IEnumerable<Person> data = personData;
            if (selectedRole != "All") {
                Role selected = (Role)Enum.Parse(typeof(Role), selectedRole);
                data = personData.Where(p => p.Role == selected);
            }
            return PartialView(data);
        }

        public ActionResult GetPeople(string selectedRole = "All") {
            return View((object)selectedRole);
        }
    }
}

这里添加了 GetPeopleData action方法，根据 selectedRole 获取用户数据并传递给 PartialView 方法。

接着为 GetPeopleData action 创建一个partial view：/Views/People/GetPeopleData.cshtml ，代码如下：

@using MvcApplication1.Models
@model IEnumerable<Person>

@foreach (Person p in Model) {
    <tr>
        <td>@p.ID</td>
        <td>@p.Name</td>
        <td>@p.Role</td>
    </tr>
}

再创建我们的主视图 /Views/People/GetPeople.cshtml，代码如下：

@using MvcApplication1.Models
@model string

@{
    ViewBag.Title = "GetPeople";
    AjaxOptions ajaxOpts = new AjaxOptions {
        UpdateTargetId = "tableBody"
    };
}

<h2>Get People</h2>
<table>
    <thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
    <tbody id="tableBody">
        @Html.Action("GetPeopleData", new { selectedRole = Model })
    </tbody>
</table>
@using (Ajax.BeginForm("GetPeopleData", ajaxOpts)) {
    <div>
        @Html.DropDownList("selectedRole", new SelectList(
            new[] { "All" }.Concat(Enum.GetNames(typeof(Role)))))
        <button type="submit">Submit</button>
    </div>
}

先是创建了一个 AjaxOptions 对象，通过它的一些属性（如UpdateTargetId、Url、HttpMethod等）可设置 Ajax 如何请求。这些属性可见名思意，如 UpdateTargetId 表示调用 Ajax 请求后要刷新的元素（通过元素ID来指定）。然后把需要提交到服务器的表单包括在 Ajax.BeginForm() 方法内，通过 submit 元素将该表单数据提交到服务器。

为了运行效果美观些，我们在 _Layout.cshtml 文件中为 table 元素添加一些样式，如下：

... 
table, td, th { 
    border: thin solid black; border-collapse: collapse; padding: 5px; 
    background-color: lemonchiffon; text-align: left; margin: 10px 0; 
}
...

运行程序，URL 定位到 /People/GetPeople，在页面中点击提交按钮，效果如下：

 

Ajax.BeginForm 是通过提交表单的方式向服务器发送 ajax 请求，MVC中也可以使用 Ajax.ActionLink() 方法生成链接来向服务器发送 ajax 请求。下面我们在 GetPeople.cshtml 视图中增加这种请求方式：

<div> 
    @foreach (string role in Enum.GetNames(typeof(Role))) { 
        @Ajax.ActionLink(role, "GetPeopleData",  new {selectedRole = role}, 
            new AjaxOptions {UpdateTargetId = "tableBody"}) @:&nbsp;
    } 
</div>

效果和前面是一样的：

Ajax.ActionLink() 和 Ajax.BeginForm() 不同的是，前者只能通过 Url 参数向服务器传送数据。

Unobtrusive Ajax 如何工作

Unobtrusive Ajax 是如何工作的呢？

当调用 Ajax.BeginForm 方法后，通过 AjaxOptions 对象设置的属性将会被转化成 form 元素的属性（标记），这些属性以 data-ajax 开头，如本示例生成的 form 元素：

<form action="/People/GetPeopleData" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#tableBody" id="form0" method="post">
...

当 GetPeople.cshtml 视图加载完成并呈现 Html 页面时，jquery.unobtrusive-ajax.js 库寻找所有 data-ajax 属性值为true的元素，然后根据其他以 data-ajax 开头的属性值，jQuery 库中的函数将知道如何去执行 Ajax 请求。

配置 AjaxOptions

AjaxOptions 类中的属性告诉 MVC 框架如何生成 Ajax 请求相关的 JavaScript 和 Html 代码。它包含如下属性：

这些属性 VS 的智能提示都有很好的解释，这里不一个一个讲，只选几个有代表性的讲讲。

AjaxOptions.Url 属性

在上面的示例中，我们在 Ajax.BeginForm() 方中指定了 action 名称参数，MVC 帮我们生成了Ajax请求的Url ( action="/People/GetPeopleData" )。这样做存在一个问题，当浏览器禁用JavaScript的时候，点击提交按钮页 面将发生新的请求（非Ajax请求 /People/GetPeopleData），这样服务器返回的数据将直接替换掉原来的页面。解决这个问题可以使 用 AjaxOptions.Url 属性，原因是 AjaxOptions.Url 属性会生成另外一个专门用于 ajax 请求的Url。如下我们对 /Views/People/GetPeople.cshtml 进行简单的修改：

...
@{
    ViewBag.Title = "GetPeople";
    AjaxOptions ajaxOpts = new AjaxOptions {
        UpdateTargetId = "tableBody",
        Url = Url.Action("GetPeopleData")
    };
}
...
@using (Ajax.BeginForm(ajaxOpts)) {
    ...
}

运行后我们看到的是和先前一样的结果，说明在效果上没有区别。但它生成的 form 属性却不一样：

<form id="form0" action="/People/GetPeople" method="post" data-ajax-url="/People/GetPeopleData" data-ajax-update="#tableBody" data-ajax-mode="replace" data-ajax="true"> 
...

它生成了两个 Url，分别为 action 属性 和 data-ajax-url 属性的值，前者是 Ajax.BeginForm() 方法根据当前 controller 和 action 名称生成的，后者是 AjaxOptions 的 Url 属性生成的。当浏览器没有禁用 JavaScript 时，Unobtrusive Ajax JS库会获取 data-ajax-url 属性的值作为 Url 发生 ajax 请求。当浏览器禁用了 JavaScript 时，自然 action 属性的值决定了表示提交的 Url，服务器将返回原来整个的页面。虽然局部未能刷新，但不会让用户觉得网站做得很糟糕。

Ajax 加载数据的同时给用户反馈

当加载数据需要花较长时间，为了避免假死状态，应当给用户一个反馈信息，如“正在加载...”字样。在 MVC 的 Unobtrusive Ajax 中通过 AjaxOptions 的 LoadingElementId 和 LoadingElementDuration 两个属性可轻松做到这一点。修改 GetPeople.cshtml 如下：

@using MvcApplication1.Models
@model string

@{
    ViewBag.Title = "GetPeople";
    AjaxOptions ajaxOpts = new AjaxOptions {
        UpdateTargetId = "tableBody",
        Url = Url.Action("GetPeopleData"),
        LoadingElementId = "loading",
        LoadingElementDuration = 1000,
    };
}
<h2>Get People</h2>
<div id="loading" class="load" style="display:none">
    <p>Loading Data...</p>
</div>
...

不解释，运行程序看效果：

 

弹出确认对话框

使用MVC中的 Unobtrusive Ajax 弹出确认对话框也很方便，设置一下 AjaxOptions.Confirm 属性的值却可，如下：

...
@{
    ViewBag.Title = "GetPeople";
    AjaxOptions ajaxOpts = new AjaxOptions {
        UpdateTargetId = "tableBody",
        Url = Url.Action("GetPeopleData"),
        LoadingElementId = "loading",
        LoadingElementDuration = 1000,
        Confirm = "Do you wish to request new data?" 
    };
}
...

弹出的对话框如下：

Ajax 回调函数

AjaxOptions 类中的 OnBegin、OnComplete、OnFailure 和 OnSuccess 属性允许我们在 ajax 请求周期的某个状态点定义回调函数。来看具体的用法。

在 GetPeople.cshtml 文件中加入如下4个回调函数：

<script type="text/javascript"> 
    function OnBegin() { 
        alert("This is the OnBegin Callback"); 
    }
    function OnSuccess(data) { 
        alert("This is the OnSuccessCallback: " + data); 
    } 
    function OnFailure(request, error) { 
        alert("This is the OnFailure Callback:" + error); 
    } 
    function OnComplete(request, status) { 
        alert("This is the OnComplete Callback: " + status); 
    } 
</script>

接着设置 AjaxOptions 对象的4个事件属性：

...
@{
    ViewBag.Title = "GetPeople";
    AjaxOptions ajaxOpts = new AjaxOptions {
        UpdateTargetId = "tableBody",
        Url = Url.Action("GetPeopleData"),
        OnBegin = "OnBegin", 
        OnFailure = "OnFailure", 
        OnSuccess = "OnSuccess", 
        OnComplete = "OnComplete"
    };
}
...

运行程序，弹出三个消息框如下：

  

这四个事件属性中最常用的就是 OnSuccess 和 OnFailure 两个属性了，如我们会经常在 OnSuccess 回调函数中对返回的 Json 数据进行处理。

其实我个人更倾向于普通的 Ajax 使用方式。Ajax.BeginForm() 和 Ajax.ActionLink() 用的少，习惯用 Html.BeginForm() 或 Html.ActionLink() 和手写 jQuery ajax 代码来代替。

分享到：
| [ASP.NET MVC ]08 - Area 使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ASP.NET-MVC-3-RTM-Release-Notes

    在升级过程中，需要将`jquery.unobtrusive-ajax.js`和`jquery.validate.unobtrusive.js`脚本文件从ASP.NET MVC 3项目复制到ASP.NET MVC 2项目中。这些脚本文件是ASP.NET MVC 3中引入的，用于支持无侵入式的Ajax和...

    【全网首发】ASP.NET MVC4开发指南（附带源码）

    ASP.NET MVC4是一种基于Microsoft .NET Framework的开源Web应用程序框架，设计用于构建可维护性和测试性的动态网站。这个"ASP.NET MVC4开发指南"提供了一套全面的学习资源，旨在帮助开发者掌握这一强大的Web开发技术...

    ASP.NET MVC使用JQuery系列

    8. **AjaxHelper和Unobtrusive JavaScript**：了解ASP.NET MVC中的AjaxHelper如何帮助创建无刷新的AJAX操作，以及如何配合Unobtrusive JavaScript实现更干净的代码结构。 9. **错误处理和调试**：学习如何在ASP.NET...

    ASP.NET MVC4 Web 编程 源代码

    10. **AJAX支持**：ASP.NET MVC4支持jQuery和Unobtrusive AJAX，使得网页可以实现无刷新更新，提高用户体验。 11. **WebAPI**：ASP.NET MVC4还包括WebAPI模块，用于构建RESTful服务，与移动应用、Web应用或任何支持...

    ASP.NET MVC网站编程案例精解 案例源码

    2. AJAX集成：jQuery和jQuery Unobtrusive AJAX库与ASP.NET MVC紧密配合，实现了无刷新的页面更新。 3. 错误处理：全局错误处理和异常过滤器确保在程序出错时提供恰当的反馈。 4. 测试：MVC鼓励使用单元测试和集成...

    Pro ASP.NET MVC 3 Framework 3rd Edition的源码

    Pro ASP.NET MVC 3 Framework 3rd Edition的源码 03 - First MVC App 04 - The MVC Pattern 05 - Essential Language Features 06 - Essential Tools 07 - 09 SportsStore 10 - Overview of MVC Projects 11 - URLs...

    ASP.NET MVC 3 高级编程中文完整版

    ASP.NET MVC 3 是微软开发的一个用于构建动态网站的开源框架，它结合了Model-View-Controller（MVC）设计模式、ASP.NET Web Forms以及一些Web开发的最佳实践。本资源为"ASP.NET MVC 3 高级编程中文完整版"，提供了一...

    ASP.NET-MVC-5

    5. **jQuery和Unobtrusive JavaScript**：MVC 5内置对这些客户端库的支持，简化了JavaScript和AJAX操作，提高了前端交互性能。 6. **Bundler和Minifier**：这些工具自动对CSS和JavaScript文件进行合并和压缩，减少...

    ASP.NET MVC安装包

    8. **AJAX支持**：通过jQuery和jQuery Unobtrusive AJAX，ASP.NET MVC可以实现页面部分更新，提供更好的用户体验，同时保持服务器负载均衡。 9. **单元测试**：ASP.NET MVC鼓励测试驱动开发，其解耦的架构使得单元...

    ASP.NET MVC3开发的项目例子(包含数据库文件)

    8. **Ajax支持**：利用jQuery和jQuery Unobtrusive Ajax，MVC3可以轻松实现页面的部分更新，提升用户体验。 9. **部署和配置**：项目实例还涵盖了部署和配置方面的知识，包括Web.config文件的设置、IIS托管、发布和...

    Asp.NET MVC 5 高级编程第5版 完整版 文字版 英文版.pdf

    14. **WebAPI集成**：Asp.NET MVC 5还包含了对WebAPI的支持，使得构建RESTful服务成为可能。理解WebAPI与MVC的区别，以及如何在同一个项目中使用两者。 15. **部署和性能优化**：最后，讨论如何将Asp.NET MVC应用...

    asp.net mvc3 运行环境包

    7. **AJAX支持**：通过jQuery和Unobtrusive JavaScript库，MVC3提供了更好的AJAX支持，帮助创建更流畅的用户体验。 8. **汉化支持**：提及的“中文语言包”意味着该环境包包含对简体中文的支持，使得用户界面和错误...

    《ASP.NET MVC 4高级编程(第4版)》配书源代码

    14. **WebAPI**：ASP.NET Web API是一个用于构建RESTful服务的框架，可以与MVC共存，用于创建供移动设备和Web客户端使用的数据接口。 通过《ASP.NET MVC 4高级编程(第4版)》一书的配书源代码，读者可以动手实践这些...

    asp.net MVC 使用Ajax.BeginForm 无刷新提交from表单

    在ASP.NET MVC中，Ajax.BeginForm是用来创建一个AJAX启用的表单，它使用jQuery的Ajax功能来处理表单提交。通过这种方式，我们可以更新页面的一部分，而不是整个页面，提高了交互性和响应速度。以下是使用Ajax....

    ASP.NET MVC Web 编程

    另外，ASP.NET MVC集成了AJAX支持，使得页面的部分内容可以无刷新更新，提高应用的响应速度。通过jQuery库和jQuery Unobtrusive AJAX，可以轻松实现异步交互。 总的来说，ASP.NET MVC提供了一个结构清晰、可扩展性...

    asp.net mvc3

    4. **AJAX支持**：ASP.NET MVC3增强了对AJAX的内置支持，提供了Unobtrusive JavaScript，使得页面局部刷新和异步操作更加容易实现，提升了用户体验。 5. **验证机制**：MVC3提供了强大的数据验证机制，包括客户端和...

    webservice asp.net mvc3

    【标题】"webservice asp.net mvc3" 指的是使用ASP.NET MVC3框架构建的Web服务。ASP.NET MVC是一种模型-视图-控制器（Model-View-Controller）框架，它允许开发者构建可测试、可维护的Web应用程序。在MVC3版本中，...

    Asp.net Mvc 3安装包

    ASP.NET MVC 3是微软开发的一个用于构建动态网站的应用程序框架，它基于Model-View-Controller（MVC）设计模式，提供了对Web开发的强大支持。这个安装包包含了运行和开发ASP.NET MVC 3应用程序所需的所有组件，使得...

Magicbox
Global site tag (gtag.js) - Google Analytics