如何使用jQuery向asp.net Mvc传递复杂json数据

摘要:
前言jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.netmvc框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验!正文五步曲首先,第一步解决jQuery对于参数序列化的问题:引用前台处理Js文件,主要是将Json字符串进行处理将其封装到JsonNet.js文件中String.format=function(){ifreturnnull;varstr=arguments[0];for{varre=newRegExp;str=str.replace;}returnstr;}String.toSerialize=function{varransferCharForJavascript=function{varnewStr=s.replace(/[x26x27x3Cx3Ex0Dx0Ax22x2Cx5Cx00]/g,function(c){ascii=c.charCodeAt(0)return'\u00'+(ascii˂16?=undefined){returnString.toSerialize;}}第二步在页面定义两个按钮事件,并在按钮事件JavaScrpit中进行调用@{ViewBag.Title="主页";}functionTest(){vardata={UserId:"11",UserName:"2211"};$.post;}functionTestList(){vardata=[{UserId:"11",UserName:{FirstName:"323",LastName:"2323"},Keys:["xiaoming","xiaohong"]},{UserId:"22",UserName:{FirstName:"323",LastName:"2323"},Keys:["xiaoming","xiaohong"]},{UserId:"33",UserName:{FirstName:"323",LastName:"2323"},Keys:["xiaoming","xiaohong"]}];$.post;}@ViewBag.Message若要了解有关ASP.NETMVC的更多信息,请访问http://asp.net/mvc。当然还要引用刚刚封装的Js文件。

前言

jQuery提供的ajax方法能很方便的实现客户端与服务器的异步交互,在asp.net mvc 框架使用jQuery能很方便地异步获取提交数据,给用户提供更好的体验!
调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化;

如果提交的数据使用复杂的json数据,例如:

{userId:32323,userName:{firstName:"李",lastName:"李大嘴"}}

那么服务器是无法正常接收到完整的参数,因为jQuery对data的序列化,是使用了键值对拼装的方式; 参数拼装成 userId=32323&userName=object ; userName所指向的对象被序列化成字符串"object"
如何才能把一个复杂的object对象提交到后台的action参数中呢?

正文五步曲

首先,第一步解决jQuery对于参数序列化的问题: 引用前台处理Js文件,主要是将Json字符串进行处理将其封装到JsonNet.js文件中

String.format =function () {
    if (arguments.length == 0)
        return null;
    var str = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
        var re = new RegExp('\{' + (i - 1) + '\}', 'gm');
        str =str.replace(re, arguments[i]);
    }
    returnstr;
}

String.toSerialize =function (obj) {
    var ransferCharForJavascript =function (s) {
        var newStr =s.replace(
            /[x26x27x3Cx3Ex0Dx0Ax22x2Cx5Cx00]/g,
            function (c) {
                ascii = c.charCodeAt(0)
                return '\u00' + (ascii < 16 ? '0' + ascii.toString(16) : ascii.toString(16))
            });
        returnnewStr;
    }
    if (obj == null) {
        return null}
    else if (obj.constructor ==Array) {
        var builder =[];
        builder.push("[");
        for (var index inobj) {
            if (typeof obj[index] == "function") continue;
            if (index > 0) builder.push(",");
            builder.push(String.toSerialize(obj[index]));
        }
        builder.push("]");
        return builder.join("");
    }
    else if (obj.constructor ==Object) {
        var builder =[];
        builder.push("{");
        var index = 0;
        for (var key inobj) {
            if (typeof obj[key] == "function") continue;
            if (index > 0) builder.push(",");
            builder.push(String.format(""{0}":{1}", key, String.toSerialize(obj[key])));
            index++;
        }
        builder.push("}");
        return builder.join("");
    }
    else if (obj.constructor ==Boolean) {
        returnobj.toString();
    }
    else if (obj.constructor ==Number) {
        returnobj.toString();
    }
    else if (obj.constructor ==String) {
        return String.format('"{0}"', ransferCharForJavascript(obj));
    }
    else if (obj.constructor ==Date) {
        return String.format('{"__DataType":"Date","__thisue":{0}}', obj.getTime() - (new Date(1970, 0, 1, 0, 0, 0)).getTime());
    }
    else if (this.toString !=undefined) {
        returnString.toSerialize(obj);
    }
}

第二步在页面定义两个按钮事件,并在按钮事件JavaScrpit中进行调用

@{
    ViewBag.Title = "主页";
}
    <script src="@Url.Content("~/Scripts/JsonNet.js")" type="text/javascript"></script>
    <script type="text/javascript">function Test() {
            var data={UserId:"11",UserName:"2211"};
            $.post("../Home/Test", { User: String.toSerialize(data) }, function (data) { alert(String.toSerialize(data)); });
        }

        function TestList() {
            var data =[
                { UserId: "11", UserName: { FirstName: "323", LastName: "2323" }, Keys: ["xiaoming", "xiaohong"] },
                { UserId: "22", UserName: { FirstName: "323", LastName: "2323" }, Keys: ["xiaoming", "xiaohong"] },
                { UserId: "33", UserName: { FirstName: "323", LastName: "2323" }, Keys: ["xiaoming", "xiaohong"] }
            ];
            $.post("../Home/TestList", { User: String.toSerialize(data) }, function (data) { alert(String.toSerialize(data)); });
        }
    </script>
<h2>@ViewBag.Message</h2>
<p>若要了解有关 ASP.NET MVC 的更多信息,请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc</a>。
</p>
<input type="button" value="testList" onclick="TestList()" />
<input type="button" value=test onclick="Test()" />

当然还要引用刚刚封装的Js文件。

第三步在后台控制器要使用Json专类来处理,所以要专门下载类库文件进行引用http://json.codeplex.com

下载后解压

如何使用jQuery向asp.net Mvc传递复杂json数据第1张

各个.net FrameWork的版本文件都有只需要在项目中引用对应的版本即可。

第四步就是编写针对Json处理的自动绑定Model。之前有一篇简单的请求参数绑定http://www.cnblogs.com/aehyok/archive/2013/05/01/3052697.html

namespaceMvcApplication3.Helper
{
    public class JsonBinder<T>: IModelBinder
    {
        public objectBindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            //从请求中获取提交的参数数据 
            var json = controllerContext.HttpContext.Request.Form[bindingContext.ModelName] as string;
            //提交参数是对象 
            if (json.StartsWith("{") && json.EndsWith("}"))
            {
                JObject jsonBody =JObject.Parse(json);
                JsonSerializer js = newJsonSerializer();
                object obj = js.Deserialize(jsonBody.CreateReader(), typeof(T));
                returnobj;
            }
            //提交参数是数组 
            if (json.StartsWith("[") && json.EndsWith("]"))
            {
                IList<T> list = new List<T>();
                JArray jsonRsp =JArray.Parse(json);
                if (jsonRsp != null)
                {
                    for (int i = 0; i < jsonRsp.Count; i++)
                    {
                        JsonSerializer js = newJsonSerializer();
                        try{
                            object obj = js.Deserialize(jsonRsp[i].CreateReader(), typeof(T));
                            list.Add((T)obj);
                        }
                        catch(Exception e)
                        {
                            throwe;
                        }
                    }
                }
                returnlist;
            }
            return null;
        }
    }
}

提交的Json可以为单个对象实体类,也可以为实体类的数组List<T>,或者是嵌套的都可以。
第五步在Action进行绑定。

 //[JsonObject]
        public classUserInfo
        {
            public string UserId{get;set;}

            public UserName UserName{get;set;}
            public List<string> keys { get; set; }

        }
        public classUserName
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
        }

        [HttpPost]
        public ActionResult TestList([ModelBinder(typeof(JsonBinder<UserInfo>))]List<UserInfo>User)
        {
            List<UserInfo> list =User;
            returnJson(list, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult Test([ModelBinder(typeof(JsonBinder<UserInfo>))]UserInfo User)
        {
            UserInfo Userinfo =User;
            returnJson(User, JsonRequestBehavior.AllowGet);
        }

定义了两个简单的实体类并进行关联和上面通过jQuery Ajax提交过来的Json数据格式一致。
主要是通过实现了IModelBinder进行参数化绑定即可。

最后一步进行F5运行测试。

如何使用jQuery向asp.net Mvc传递复杂json数据第2张

通过代码可以看出我是将Json字符串传递到服务端,服务端对其进行解析然后又转换为Json返回到客户端的。

没有做不到,只有想不到,你想怎么传就怎么传了,想传什么样格式的数据,只要定义好即可。

示例代码下载地址http://share.weiyun.com/2081c8cd3b40fb3487c2b7c54b67719b

如何使用jQuery向asp.net Mvc传递复杂json数据第3张

如何使用jQuery向asp.net Mvc传递复杂json数据第4张

前端页面传递时的数据名与后端接收数据名称要一致

免责声明:文章转载自《如何使用jQuery向asp.net Mvc传递复杂json数据》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇海明码距离及检错纠错问题和CRC校验iOS 上架记录:Other下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

MyBatisplus 使用IPage和Page分页

@RequestMapping(value = "/cityList",method =RequestMethod.POST) public ResponseVo<IPage<GovernanceRegulationClosePo>> querySearchCityDataList(@RequestBody Map<S...

C#下的BMP图像压缩类

这几天研究比较多,其中一个成果就是下面这个图像压缩类。可以把BMP文件压成任意质量的JPEG,在.net framework 2.0下编译通过。有时间的话我会把它写成可以压缩其他格式的类,其实改一下参数就可以了。 时间原因没有写注释,(不过这个类真够简单了)还是介绍一下吧: 只有一个没有重载的构造函数,参数是待压缩BMP文件的路径,还有一个长整形的质量参数...

c#下怎么判断一个字符串是否可以转换为double类型

using System.Text.RegularExpressions; //引入Regex命名空间bool a = Regex.IsMatch(string, @"^[+-]?d*[.]?d*$"); //这个方法会返回一个布尔值,如果string字符串可以转换为double,则返回True,反之为False。bool b = Regex.IsMatc...

Jackson 框架,轻易转换JSON

Jackson能够轻松的将Java对象转换成json对象和xml文档。相同也能够将json、xml转换成Java对象。 前面有介绍过json-lib这个框架,在线博文:http://www.cnblogs.com/hoojo/archive/2011/04/21/2023805.html 相比json-lib框架,Jackson所依赖的jar包较少。简...

免费的天气Web Service接口

免费的天气Web Service接口 在android应用当中很多时候需要获取天气的信息,这里提供怎么获取天气信息: 1. http://www.ayandy.com/Service.asmx?wsdl 官网:http://www.ayandy.com 2. http://webservice.webxml.com.cn/WebServices/Weat...

Shiro快速入门

写在前面:   最近项目中使用了Shiro,虽然不是自己在负责这一块,但还是抽空学习了下,也可以让自己对shiro有基本的了解。毕竟Shiro安全框架在项目中还是挺常用的。   对于Apache Shiro的基本概念就不在这里一一描述了,资料网上都有,主要还是记录下代码相关的,能够先让自己快速学会使用。   这里的demo(可以测试登录认证,登出,以及授权...