ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

前言：写这篇随笔的时候，在url上漏写了斜线，找了好久错误，整个人都很不好。#我是猪系列

背景：之前介绍过一篇如何构建ASP.NET MVC4&JQuery&AJax&JSon示例，这一篇单独讲解如何在View和Action间传递并处理数据。

1，前台HTML代码：

    <div>
        <button type="button" id="btn">从视图向控制器中传递数据</button>
        <p id="info"></p>
    </div>

2，前台JS代码：

        $("#btn").click(function() {
            $.ajax({
                async:true,
                type: "POST",
                url: "/AjaxTest/AjaxBackData",
                cache: false,
                data: {
                    Name: "SharpL", City: "北京", Age: 18
                },
                success: function (result) {
                    $("#info").text(result);
                }
            });
        });

JS代码讲解：注意url: "/AjaxTest/AjaxBackData",AjaxTest前的‘/'千万不能漏掉，博主已经开始怀疑人生了。

　　　　　data: {Name: "SharpL", City: "北京", Age: 18}，数据就是这样以匿名对象的方式传递过去的。

或者JS代码这样来写：

    $(function () {
        $("#btn").click(function () {
            var data = "";
            data += "&Name=" +encodeURI("SharpL");
            data += "&Age=" + encodeURI(18);
            data += "&City=" + encodeURI("北京");
            $.ajax({
                async:true,
                type: "POST",
                url: "/AjaxTest/AjaxBackData",
                cache: false,
                data: data,
                success: function (result) {
                    $("#info").text(result);
                }
            });
        });
    });

或者JS代码这样来写：

    $(function () {
        $("#btn1").click(function () {
            $.ajax({
                type: "POST",
                url: "/TestAjax/Test?City=北京&Name=SharpL&Age=18",
                cache: false,
                data: null,
                success: function (result) {
                    if (result) {
                        $("#pDisplay").text("返回信息为 " + result.Message + "
" + "随机数为" + result.RandomNum);
                    }
                }
                });
        });
    })

三者的结果完全相同。

3，后台代码如下：

        public ActionResult AjaxBackData(STU stu)
        {
            string name = stu.Name;
            int age = stu.Age;
            string city = stu.City;
            string tmp=string.Format("{0}年龄{1}岁，来自{2}",name,age,city);
            return Content(tmp);
        }

注意Action的参数为STU，直接获取以ajax方式传递过来的数据。

或者后台代码如下：(项目中所使用的经典方式）

        public ActionResult AjaxBackData()
        {
            var stu = new STU();
            this.UpdateModel(stu);
            string tmp=string.Format("{0}年龄{1}岁，来自{2}",stu.Name,stu.Age,stu.City);
            return Content(tmp);
        }

或者后台代码如下：（以显示ContentResult的方式返回）前两种方式返回Content，其返回值仍然是ContentResult。

            var actionResult = default(ContentResult);
            var stu =new Stu();
            this.UpdateModel(stu);
            actionResult=new ContentResult(){
                Content=string.Format("{0}{1}岁，来自{2}",stu.Name,stu.Age,stu.City)
            };
            return actionResult;

Content只能够返回Content，当需要返回多项数据时，返回Json(),代码如下：

        public ActionResult Test()
        {
            var stu = new Stu();
            this.UpdateModel(stu);
            var tmp= string.Format("{0}{1}岁，来自{2}", stu.Name, stu.Age, stu.City);
            Random r=new Random();
            int t=r.Next(1,10);
            return Json(new { Message = tmp, RandomNum = t });
        }

2.2同时前台Ajax接收的代码修改如下：

                success: function (result) {
                    if (result) {
                        $("#pDisplay").text("返回信息为 " + result.Message + "
" + "随机数为" + result.RandomNum);
                    }
                }

类似的，可以将Json修改为显式返回JsonResult对象，代码如下：

        public ActionResult Test()
        {
            var actionResult = default(JsonResult);
            var stu = new Stu();
            this.UpdateModel(stu);
            var tmp= string.Format("{0}{1}岁，来自{2}", stu.Name, stu.Age, stu.City);
            Random r=new Random();
            int t=r.Next(1,10);
            actionResult = new JsonResult()
            {
                Data = new { Message = tmp, RandomNum = t }
            };
            return actionResult;
        }