代码改变世界

ASP.NET MVC学习之Ajax（完结）

2014-05-30 09:12  y-z-f  阅读(20132)  评论(20)  编辑  收藏  举报

一.前言

通过上面的一番学习，大家一定收获不少。但是总归会有一个结束的时候，但是这个结束也意味着新的开始。

如果你是从事ASP.NET开发，并且也使用了第三方控件，那么一定会觉得ASP.NET开发ajax十分的简单，而ASP.NET MVC学习到现在页面都是刷新的，所以这节就是ASP.NET MVC的最后一节，通过这节的学习我们将能够实现通过ajax提交表单，下面我们开始继续学习。

 

二.准备工作

1、首先确保引用了以下js库在_Layout中：

 

2、新建一个HomeController，然后在其中写入如下代码：

 1 namespace MvcStudy.Controllers
 2 {
 3     public class HomeController : Controller
 4     {
 5         public ActionResult Index()
 6         {
 7             return View();
 8         }
 9 
10         [HttpPost]
11         public ActionResult Index([Bind(Prefix="name")]String reg)
12         {
13             return PartialView("Result", reg);
14         }
15     }
16 }
View Code

 

3、在Views下新建一个Home文件夹，并在其中新建一个Index视图，同时在Views/Shared中新建一个Result视图，到此为止准备工作完成了。

 

 

三.利用Ajax提交表单

首先我们打开刚才新建的Index视图，然后在其中写入如下代码：

 1 @{
 2     ViewBag.Title = "Index";
 3     AjaxOptions option = new AjaxOptions
 4     {
 5         UpdateTargetId = "targetdiv"
 6     };
 7 }
 8 
 9 @using (Ajax.BeginForm(option))
10 {
11     <div id="targetdiv">
12     </div>
13     @Html.TextBox("name")
14     <div>
15         <input type="submit" value="注册" />
16     </div>
17 }

其中AjaxOptions同来设置ajax相关的参数，而Ajax.BeginForm则表示该表单采用ajax方式提交，其中AjaxOptions中的UpdateTargetId表示完成ajax请求之后内容的输出的容器。

 

打开Views/Shared下的Result视图，写入：

1 @{
2     String text = (string)Model;
3 }
4 
5 @text

 

 

作为简单的示例，笔者直接输出了Model。

然后我们就可以F5运行，在文本框中输入值，最后可以发现页面并没有刷新。但是内容却从指定的div中呈现了，这里的原理很简单，ASP.NET MVC就是利用jquery中的ajax来将表单中的参数提交给指定的动作，然后由这个动作直接返回一段html代码，最后在从指定的id的容器中输出。

 

 

四.实现加载中效果

如今很多网站都会在进行ajax请求过程中呈现一段表示加载中的标记，而ASP.NET MVC中的ajax也提供给我们这个功能，下面我们就修改Index视图：

 1 @{
 2     ViewBag.Title = "Index";
 3     AjaxOptions option = new AjaxOptions
 4     {
 5         UpdateTargetId = "targetdiv",
 6         LoadingElementId = "wait",
 7         LoadingElementDuration = 1000
 8     };
 9 }
10 
11 <div id="wait" style="display:none" >
12     耐心等待会...
13 </div>
14 @using (Ajax.BeginForm(option))
15 {
16     <div id="targetdiv">
17     </div>
18     @Html.TextBox("name")
19     <div>
20         <input type="submit" value="注册" />
21     </div>
22 }
View Code

 

我们通过LoadingElementId来设置加载的标签而LoadingElementDuration则表示动画持续的时间，这里我们写了一个div用来呈现，并且该div的display要设置为none，这样我们重新打开页面再提交一次，就可以看到加载中的效果了。

 

 

五.Ajax链接

很多时候并不总是需要提交表单来实现ajax，也有很多仅仅只是通过点击按钮的方式来进行ajax请求，下面我们就利用Ajax.ActionLink来实现，我们只要在Index视图中的下面填上如下代码：

1 @Ajax.ActionLink("点我","Index",new {name= "oh no"},new AjaxOptions{
2     UpdateTargetId = "targetdiv",
3     Confirm = "确定吗？",
4     HttpMethod = "Post"
5 });

这里就不介绍了，因为和Html.ActionLink的用法十分类似，唯一的区别就是多了一个AjaxOptions参数，我们刷新页面。点击这个链接就可以看到效果了，如果你想问按钮在哪呢，这个问题似乎没有可问性，不是有万能的CSS吗？

 

 

六.Ajax回调

对于部分喜爱写javascript的读者来说，上面这些无疑是灾难。这样你的javascript水平如何体现呢，其实ASP.NET MVC自带的依然有很多问题，所以这个时候我们可以监听它的过程，从而可以更好的完成功能，下面我们监听它的所有事件，我们仍然是修改Index视图的代码：

 1 @Ajax.ActionLink("点我","Index",new {name= "oh no"},new AjaxOptions{
 2     UpdateTargetId = "targetdiv",
 3     Confirm = "确定吗？",
 4     HttpMethod = "Post",
 5     OnBegin = "onbegin",
 6     OnComplete = "oncomplete",
 7     OnFailure = "onfailure",
 8     OnSuccess = "onsuccess"
 9 });
10 
11 <script type="text/javascript">
12     function onbegin() {
13         console.log("开始啦");
14     }
15 
16     function oncomplete(request, status) {
17         console.log("完成了，好下班了");
18     }
19 
20     function onfailure(request, error) {
21         console.log("报错了，要加班了");
22     }
23 
24     function onsuccess(data) {
25         console.log("改好了，走人喽");
26     }
27 </script>
View Code

 

 

这里我们监听了所有的事件，下面我们可以看到正确调用下的输出：

 

当然个人认为ASP.NET MVC的ajax还是有点鸡肋，用个backbone.js框架加上ASP.NET Web API基本上直接秒杀了，当然对于简单的页面用用自带的还是蛮快捷的。

 

七.ASP.NET MVC系列所有链接

ASP.NET MVC学习之路由篇（1）

ASP.NET MVC学习之路由篇（2）

ASP.NET MVC学习之路由篇（3）

ASP.NET MVC学习之过滤器篇（1）

ASP.NET MVC学习之过滤器篇（2）

ASP.NET MVC学习之控制器篇扩展性

ASP.NET MVC学习之视图（1）

ASP.NET MVC学习之视图篇（2）

ASP.NET MVC学习之模型模板篇

ASP.NET MVC学习之模型绑定（1）

ASP.NET MVC学习之模型绑定（2）

ASP.NET MVC学习之模型验证篇