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]);}return str;
}String.toSerialize = function (obj) {var ransferCharForJavascript = function (s) {var newStr = s.replace(/[\x26\x27\x3C\x3E\x0D\x0A\x22\x2C\x5C\x00]/g,function (c) {ascii = c.charCodeAt(0)return '\\u00' + (ascii < 16 ? '0' + ascii.toString(16) : ascii.toString(16))});return newStr;}if (obj == null) {return null}else if (obj.constructor == Array) {var builder = [];builder.push("[");for (var index in obj) {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 in obj) {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) {return obj.toString();}else if (obj.constructor == Number) {return obj.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) {return String.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" οnclick="TestList()" />
<input type="button" value=test οnclick="Test()" />

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

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

下载后解压

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

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

namespace MvcApplication3.Helper
{public class JsonBinder<T> : IModelBinder{public object BindModel(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 = new JsonSerializer();object obj = js.Deserialize(jsonBody.CreateReader(), typeof(T));return obj;}//提交参数是数组 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 = new JsonSerializer();try{object obj = js.Deserialize(jsonRsp[i].CreateReader(), typeof(T));list.Add((T)obj);}catch (Exception e){throw e;}}}return list;}return null;}}
}

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

 //[JsonObject]public class UserInfo{public string UserId{get;set;}public UserName UserName{get;set;}public List<string> keys { get; set; }}public class UserName{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;return Json(list, JsonRequestBehavior.AllowGet);}[HttpPost]public ActionResult Test([ModelBinder(typeof(JsonBinder<UserInfo>))]UserInfo User){UserInfo Userinfo = User;return Json(User, JsonRequestBehavior.AllowGet);}

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

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

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

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

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

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

转载于:https://www.cnblogs.com/sjqq/p/7551923.html

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

  1. ASP.NET MVC传递Model到视图的多种方式之通用方式的使用

    ASP.NET MVC传递Model到视图的多种方式总结--通用方式的使用 有多种方式可以将数据传递到视图,如下所示: ViewData ViewBag PartialView TempData Vi ...

  2. ASP.NET MVC3 技术(五) JSON 数据的传递

    今天微软发布了 ASP.NET MVC 3正式版,ASP.NET MVC 3 中的大多数知识点本站已经做过说明.ASP.NET MVC 3 中默认支持对 JSON 数据的接收,今天就让我们看看 JSO ...

  3. ASP.NET MVC动态加载数据

    ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table><tr><th styl ...

  4. ASP.NET提取多层嵌套json数据的方法

    ASP.NET提取多层嵌套json数据的方法 本文实例讲述了ASP.NET利用第三方类库Newtonsoft.Json提取多层嵌套json数据的方法,具体例子如下. 假设需要提取的json字符串如下: ...

  5. jquery的ajax异步请求接收返回json数据

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...

  6. Spring.NET企业架构实践之 JQuery + FlexiGrid + ASP.NET MVC + NVelocity + WCF + LINQ + NHibernate 综合应用...

    今晚看了几篇项目应用的博客感受很深,晚上怎么都睡不着觉.于是乎,下面的博客诞生了 ^-^. 我在想是不是要把我熟悉的Spring.NET框架与别的框架或技术结合起来.由于心血来潮,斗胆在园子里这么多大 ...

  7. Spring.NET企业架构实践之 JQuery + FlexiGrid + ASP.NET MVC + NVelocity + WCF + LINQ + NHibernate 综合应用

    今晚看了几篇项目应用的博客感受很深,晚上怎么都睡不着觉.于是乎,下面的博客诞生了 ^-^. 我在想是不是要把我熟悉的Spring.NET框架与别的框架或技术结合起来.由于心血来潮,斗胆在园子里这么多大 ...

  8. Spring.Net+NHibenate+Asp.Net mvc +ExtJs 系列 3 ----数据访问层

    在上一篇中,我们已经搭建起了整个解决方案的项目,并且建好了数据库,完成了实体类和Nhibernate映射文件.在本文中,将定义数据访问接口,并利用Nhibernate实现接口,利用Spring.net ...

  9. ASP.NET MVC导出excel(数据量大,非常耗时的,异步导出)

    要在ASP.NET MVC站点上做excel导出功能,但是要导出的excel文件比较大,有几十M,所以导出比较费时,为了不影响对界面的其它操作,我就采用异步的方式,后台开辟一个线程将excel导出到指 ...

最新文章

  1. android获取本地图片后缀,Android向图片文件添加扩展信息EXIF如地点,时间,人物等...
  2. 介绍开源的.net通信框架NetworkComms
  3. 控制div的大小自适应_干货 | 浅谈模糊自适应PID控制
  4. 怎样在百度地图上画圈_知识地图分享:你不是记忆差,你只是没找对方法
  5. 圆方树(bzoj 2125: 最短路)
  6. 纯干货!如何做一个成功的大数据项目
  7. 达芬奇--艺工结合先驱
  8. 数学建模:SPSS线性回归分析——逐步回归分析
  9. Inno Setup打包添加和去除管理员权限
  10. PT、CT、CVT各是什么意思?
  11. 【魔兽世界插件】魔兽世界插件实战笔记从入门到放弃的心理历程 第七节 按钮的创建和点击事件
  12. 第二本书:疯狂人类进化史20190621
  13. 计算机word基础操作知识,word文档基本操作
  14. 笔记-中项/高项学习期间的错题笔记2
  15. python乒乓球比赛规则介绍_乒乓球比赛的简要规则
  16. 第04课:了解数据必备的文本可视化技巧
  17. 一个画多个bed文件venn图的好工具
  18. C不会断句?【前后置,位,移位操作符详解】 b = ++c, c++, ++a, a++
  19. Android 找不到符号错误
  20. android 广播的权限,拒绝权限:不允许发送广播android.intent.acti...

热门文章

  1. 数据结构和算法-001 数组
  2. 解决wget下载中文乱码的方法
  3. HTML的base href = “” /
  4. 4698: Sdoi2008 Sandy的卡片
  5. Project Euler 1-25
  6. Ubuntu下 ssh : connect to host localhost port 22:Connection refused
  7. Code128 Fontware条码控件介绍
  8. Android startActivityForResult的使用
  9. 数据库设计中的14个关键技巧收藏[转]
  10. 12月24日,为我们的无线网络默哀……