【Asp.net MVC】AJAXHelper 和jQueryAjax

在ASP.NET MVC中,有一个官方提供的AJAXHelper帮助我们做AJAX相关的东西。我用传统的jQuery AJAX技术和AJAXHelper分别实现同一个demo,特此记录一下。

由于是在MVC中,所以创建了一个Home控制器,里面有两个Action,Login()用于一个普通页面,GetInfo()用于返回一个json字符串,定义如下

public class HomeController : Controller
    {
        public ActionResult Login()
        {
            return View();
        }
        public JsonResult GetInfo()
        {
            return Json(new
            {
                time = DateTime.Now.ToString(),
                flag=new Info[] { new Info { Name="小明",Age=18 },new Info { Name="小秋",Age=19 } }
            },JsonRequestBehavior.AllowGet);
        }
    }
    public class Info
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

Info类是一个实体模型,主要是让返回的json字符串复杂一点,嘿嘿。

好了,后台完了,下面就分别给出两种不同的处理方法

一:jQuery AJAX:

  

<!DOCTYPE html>
<html> <head> <meta name="viewport" content="width=device-width" /> <title>Login</title> <script src="~/scripts/jquery-2.1.4.js"></script> <script src="~/scripts/jquery.unobtrusive-ajax.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#get").click(function () { $.ajax({ cache:false, type: "get",
dataType:"json", url: "getinfo", success: function (data, textStatus) { $("#main").html(data.time); var bodyTag=$("body"); bodyTag.append("<table>"); $.each(data.flag, function () { $("body").append("<tr><td>"+this.Name+"</td><td>"+this.Age+"</td></tr>"); }) bodyTag.append("</table>"); } }); }) })
</script> </head> <body><input type="button" id="get" value="获取信息" /><div id="main"></div> </body> </html>

在上面的jQuery代码中,我在dom完成加载后,给id为“get”的按钮注册了一个点击事件,点击该按钮后会发起ajax请求,请求的方式为get,返回数据类型为json格式,然后再请求成功success的回调函数中我用了一些jquery的方法操作dom,把返回的数据显示出来。

以上就是用直接调用jQuery AJAX的方法,至于ajax的请求参数我们可以任意修改,留个参考网址:http://www.jquery123.com/jQuery.ajax/

二:利用AJAXHelper

@model WebApplication1.Models.UserViewModel
@{ 
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <script src="~/scripts/jquery-2.1.4.min.js"></script>
    <script src="~/scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        function OnSuccess(data) {
            var main = document.getElementById("main");
            var table = document.createElement("table");
            for (var i = 0; i < data.flag.length; i++) {
                var tr = document.createElement("tr");
                tr.innerHTML = "<td>" + data.flag[i].Name + "</td>" + "<td>" + data.flag[i].Age + "</td>";
                table.appendChild(tr);
            }
            main.appendChild(table);
        }
    </script>
</head>
<body>
    @using (Ajax.BeginForm("getinfo",new AjaxOptions {OnSuccess= "OnSuccess", HttpMethod="Get", AllowCache=false}))
    {
        <input type="submit" id="get" value="获取信息" />
    }
   <div id="main">
    </div>
</body>
</html>

using的目的在于让表单标签闭合,可以看到AJAXHelper发起ajax请求也是比较简单。和jQuery AJAX直接操作没有区别,不过vs的智能提示还是不错的。这个只有在AJAXHelper中可以体验到。

 

总结:两种都能完成AJAX请求,但是AJAXHelper和jQuery AJAX是有区别的。具体区别等我研究通了再来记录。嘿嘿

 

做demo过程中遇到的几个问题:

1.当一个Action返回JsonResult类型时候,Json()方法如果不加JsonRequestBehavior.AllowGet参数,当用get方法请求时会发生500错误。

2.在dom中操作json字符串时候,注意大小写。

 

你可能感兴趣的:(【Asp.net MVC】AJAXHelper 和jQueryAjax)