异步Ajax

Ajax异步刷新应用在Web开发中经常用到，在过去WebForm中通常是使用JQuery和一般处理程序或者aspx页面来实现；

在MVC中，虽然依然可以使用一般处理程序，但是一般还是通过在Controller中新建Action方法来实现。

一、 JQuery+一般处理程序实现异步Ajax

1.新建一个空MVC项目，命名为AjaxDemo

2. 右键项目，选择“添加->HTML页”，命名为ShowDateTime.html，引入jquery文件（NuGet下载jquery），代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <script src="Scripts/jquery-3.1.1.min.js"></script>

    <script>

        $(function () {

            $("#btnGetDateTime").click(function () {

                $.post(

                    "GetDateTimeHandler.ashx",

                    {},

                    function (data) {

                        $("#divDateTime").html(data);

                    });

            });

        })

    </script>

</head>

<body>

    <input type="button" value="获取时间" id="btnGetDateTime" />

    <div id="divDateTime"></div>

</body>

</html>

3. 右键项目，选择“添加->新建项->一般处理程序”，并设置名称为GetDateTimeHandler.ashx，修改代码：

 public class GetDateTimeHandler : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            context.Response.Write(DateTime.Now.ToString());

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

4. 运行ShowDateTime.html（右键该文件，在浏览器中查看），如下图：

二、Jquery+Action 实现异步Ajax

1. 在Models文件夹下新建一个User实体

 public class User

    {

        public int Id { get; set; }

        public string UserName { get; set; }

        public int Age { get; set; }

        public string TelPhone { get; set; }

    }

2. 新建HomeController，添加UserList方法

 public class HomeController : Controller

    {

        // GET: Home

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult UserList()

        {

            List<User> list = new List<User>()

            {

                new User() {Id = ,UserName="小明",Age=,TelPhone="" },

                new User() {Id = ,UserName="小王",Age=,TelPhone="" },

                new User() {Id = ,UserName="小赵",Age=,TelPhone="" },

                new User() {Id = ,UserName="小李",Age=,TelPhone="" },

                new User() {Id = ,UserName="小胡",Age=,TelPhone="" },

            };

            return Json(list);

        }

3. 新建Index视图，使用$.post异步调用HomeController中的UserList方法，并更新界面

@{

    ViewBag.Title = "Index";

}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>

    $(function () {

        $("#btnUserList").click(function () {

            $.post("/Home/UserList", {}, function (data) {

                var result = data;

                $.each(result,function(key,value){

                    $("#divUserList").append(result[key].Id + "\t"

                        + result[key].UserName + "\t"

                        + result[key].Age + "\t"

                        + result[key].TelPhone + "<br/>");

                });

            });

        });

    })

</script>

<h2>Index</h2>

<div>

    <input type="button" id="btnUserList" value="获取用户信息" />

    <div id="divUserList"></div>

</div>

4. 运行结果如下：

三、Ajax辅助方法 Ajax.ActionLink

在ASP.Net MVC框架中包含一组Ajax辅助方法，它们可以用来创建异步表单和指向控制器的异步链接。当使用这些辅助方法时，不需要编写任何脚本代码就可以实现程序异步。

这些Ajax辅助方法依赖于非侵入式MVC的jQuery扩展。如果使用这些辅助方法，就需要引入脚本文件jquery.unobtrusive-ajax.js，并在视图中添加此脚本引用。

1.在项目中添加非侵入式Ajax脚本

使用NuGet搜索“Microsoft JQuery”，安装非侵入式Ajax脚本，如下图

2.在Home控制器中添加AjaxTest方法，并右键方法添加AjaxTest视图

        public ActionResult AjaxTest()

        {

            return View();

        }

3.在Home控制器中添加PartialViewTest方法返回局部视图，并右键方法创建局部视图页

 [HttpPost]

        public PartialViewResult PartialViewTest()

        {

            ViewBag.Msg = "Hello World";

            return PartialView();

        }

PartialViewTest视图

<h2>@ViewBag.Msg</h2>

4.在AjaxTest视图脚本节点中引入非侵入式Ajax脚本

@section scripts{

  <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

}

5.使用@Ajax.ActionLink创建异步链接按钮

@Ajax.ActionLink("链接文本","PartialViewTest",new AjaxOptions() {

    UpdateTargetId = "divMsg",

    InsertionMode = InsertionMode.Replace,

    HttpMethod = "Post"

})

AjaxTest视图整体代码如下：

@{

    ViewBag.Title = "AjaxTest";

}

<h2>AjaxTest</h2>

@Ajax.ActionLink("链接文本","PartialViewTest",new AjaxOptions() {

    UpdateTargetId = "divMsg",

    InsertionMode = InsertionMode.Replace,

    HttpMethod = "Post"

})

<div id="divMsg"></div>

@section scripts{

  <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

}

6.运行Home/AjaxTest，结果如下：

四、Ajax辅助方法 Ajax.BeginForm

1.在Home控制器下创建AjaxForm和UserInfo方法，代码如下：

        public ActionResult AjaxForm()

        {

            return View();

        }

        [HttpPost]

        public ActionResult UserInfo(string txtName)

        {

            List<User> list = new List<User>()

            {

                new User() {Id = ,UserName="小明",Age=,TelPhone="" },

                new User() {Id = ,UserName="小王",Age=,TelPhone="" },

                new User() {Id = ,UserName="小赵",Age=,TelPhone="" },

                new User() {Id = ,UserName="小李",Age=,TelPhone="" },

                new User() {Id = ,UserName="小胡",Age=,TelPhone="" },

            };

            var result = list.Where(u => u.UserName == txtName).FirstOrDefault();

            return Content("姓名："+result.UserName+"\t"+"年龄："+result.Age+"\t"+"电话："+result.TelPhone);

        }

2.添加AjaxForm视图，引入非侵入式Ajax脚本，使用Ajax.BeginForm创建异步表单，代码如下：

@{

    ViewBag.Title = "AjaxForm";

}

<h2>AjaxForm</h2>

@using (Ajax.BeginForm("UserInfo","Home",new AjaxOptions() {

    UpdateTargetId ="divMsg",/*局部更新容器Id*/

    InsertionMode = InsertionMode.Replace,/*替换方式*/

    HttpMethod = "post",

    OnFailure="fail",/*失败后回调js函数*/

    OnSuccess="success",/*成功后回调js函数*/

    LoadingElementId = "loadingMsg"/*加载元素Id*/

}))

{

    <input type="text" name="txtName" />

    <input type="submit" />

}

<div id="loadingMsg" style="display:none">加载中......</div>

<div id="divMsg"></div>

@section scripts{

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script>

        function fail(txt) {

            alert("查询失败，失败信息："+txt);

        }

        function success(txt) {

            alert("查询成功，查询信息："+txt);

        }

    </script>

}

3.运行/Home/AjaxForm，结果如下：

巴特西

异步Ajax

最新文章

热门文章