代码改变世界

转-MVC中处理Json和JS中处理Json对象

2013-03-17 19:26  Echo.  阅读(138)  评论(0)    收藏  举报

网上转来以便不时之需,Controller代码如下

　　　　public ActionResult TestString()
        {
            return Content("success");
        }

        public ActionResult TestJson()
        {
            JsonResult json = new JsonResult { Data = new { Name = "zzl", Sex = "male", } };
            return Json(json);

        }

        public JsonResult TestList()
        {
            List<User> userList = new List<User>   
            {           
                new User{Name="zzl",Email="bfyxzls@sina.com"},          
                new User{Name="zhz",Email="zhanghangzheng@sina.com"},       
            };
            JsonResult json = new JsonResult
            {
                Data = userList
            };
            return Json(json);
            //return Json(json, JsonRequestBehavior.AllowGet);//前台AJAX如果是GET用这句                    
            //什么时候用GET请求呢，当我们直接在浏览器中输入网址时，其实就是一个GET请求                      
            //如果我们直接输入/Home/TestList这个网址，它会提示我们下载这个JSON格式的文档        
        }

View代码如下

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script src="http://www.cnblogs.com/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $("#btn1").click(function () {
                $.ajax({ url: "/Home/TestString", dataType: "text", cache: false, data: null, type: "POST",
                    success: function (data) {
                        $("#msg").html(data);
                    }
                });
            });

            $("#btn2").click(function () {
                $.ajax({
                    url: "/Home/TestJson",
                    dataType: "json",
                    cache: false,
                    data: null,
                    type: "POST",
                    success: function (data) {
                        $("#msg").html(data.Data.Name);
                    }
                });
            });

            $("#btn3").click(function () {
                $.ajax({ url: "/Home/TestList",
                    dataType: "json",
                    cache: false,
                    data: null,
                    type: "POST",
                    success: function (data) {
                        var msg = "";
                        for (var i = 0, length = data.Data.length; i < length; i++) {
                            msg += "<DiV>Name:" + data.Data[i].Name + ",Email:" + data.Data[i].Email + "</div>";
                        }
                        $("#msg").html(msg);
                    }
                });
            });

        });
    </script>
</head>
<body>
    <div>
        <input type="button" id="btn1" value="test return string" />
        <br />
        <input type="button" id="btn2" value="test return json" />
        <br />
        <input type="button" id="btn3" value="test return list" />
        <div id="msg">
        </div>
    </div>
</body>
</html>