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

一.前言

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

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

 

二.准备工作

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

 

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

namespace MvcStudy.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index([Bind(Prefix="name")]String reg)
        {
            return PartialView("Result", reg);
        }
    }
}

 

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

 

 

三.利用Ajax提交表单

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

@{
    ViewBag.Title = "Index";
    AjaxOptions option = new AjaxOptions
    {
        UpdateTargetId = "targetdiv"
    };
}

@using (Ajax.BeginForm(option))
{
    <div id="targetdiv">
    </div>
    @Html.TextBox("name")
    <div>
        <input type="submit" value="注册" />
    </div>
}

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

 

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

@{
    String text = (string)Model;
}

@text

 

 

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

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

 

 

四.实现加载中效果

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

@{
    ViewBag.Title = "Index";
    AjaxOptions option = new AjaxOptions
    {
        UpdateTargetId = "targetdiv",
        LoadingElementId = "wait",
        LoadingElementDuration = 1000
    };
}

<div id="wait" style="display:none" >
    耐心等待会...
</div>
@using (Ajax.BeginForm(option))
{
    <div id="targetdiv">
    </div>
    @Html.TextBox("name")
    <div>
        <input type="submit" value="注册" />
    </div>
}

 

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

 

 

五.Ajax链接

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

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

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

 

 

六.Ajax回调

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

@Ajax.ActionLink("点我","Index",new {name= "oh no"},new AjaxOptions{
    UpdateTargetId = "targetdiv",
    Confirm = "确定吗？",
    HttpMethod = "Post",
    OnBegin = "onbegin",
    OnComplete = "oncomplete",
    OnFailure = "onfailure",
    OnSuccess = "onsuccess"
});

<script type="text/javascript">
    function onbegin() {
        console.log("开始啦");
    }

    function oncomplete(request, status) {
        console.log("完成了，好下班了");
    }

    function onfailure(request, error) {
        console.log("报错了，要加班了");
    }

    function onsuccess(data) {
        console.log("改好了，走人喽");
    }
</script>

 

 

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

 

当然个人认为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学习之模型验证篇