使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇

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对于参数序列化的问题:

复制代码代码如下:

/*对象序列化为字符串*/ 
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); 

}

jQuery异步请求:

复制代码代码如下:

$(function() { 
/*按钮点击事件*/ 
$("#btn_post_test").click(function() { 
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/Test", { users: String.toSerialize(data) }, function(text) { 
alert(String.toSerialize(text)); 
}, "json"); 
}); 
});

点击按钮提交数据,监控浏览器,可以发现提交的数据是json对象的序列化后的内容:

复制代码代码如下:

POST /Home/Test HTTP/1.1 
x-requested-with: XMLHttpRequest 
Accept-Language: zh-cn 
Referer: http://localhost:3149/test.html 
Accept: application/json, text/javascript, */* 
Content-Type: application/x-www-form-urlencoded 
Accept-Encoding: gzip, deflate 
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E) 
Host: localhost:3149 
Content-Length: 501 
Connection: Keep-Alive 
Cache-Control: no-cache 
Cookie: CookieGlobalLoginUserID=16063 
users=%5B%7B%22UserId%22%3A%2211%22%2C%22Name%22%3A%7B%22FirstName%22%3A%22323%22%2C%22LastName%22%3A%222323%22%7D%2C%22Keys%22%3A%5B%22xiaoming%22%2C%22xiaohong%22%5D%7D%2C%7B%22UserId%22%3A%2222%22%2C%22Name%22%3A%7B%22FirstName%22%3A%22323%22%2C%22LastName%22%3A%222323%22%7D%2C%22Keys%22%3A%5B%22xiaoming%22%2C%22xiaohong%22%5D%7D%2C%7B%22UserId%22%3A%2233%22%2C%22Name%22%3A%7B%22FirstName%22%3A%22323%22%2C%22LastName%22%3A%222323%22%7D%2C%22Keys%22%3A%5B%22xiaoming%22%2C%22xiaohong%22%5D%7D%5D

其次,后台服务器处理参数绑定:

复制代码代码如下:

using System.Collections.Generic; 
using System.Web.Mvc; 
using Newtonsoft.Json; 
using Newtonsoft.Json.Linq; 
namespace WebOS.Controllers 

[HandleError] 
public class HomeController : Controller 

/// <summary> 
/// 测试方法 
/// </summary> 
/// <param name="users">用户数据</param> 
/// <returns>提交的用户数组</returns> 
public ActionResult Test([ModelBinder(typeof(JsonBinder<User>))]List<User> users) 

return Json(users, JsonRequestBehavior.AllowGet); 


/// <summary> 
/// 对象实体 
/// </summary> 
[JsonObject] 
public class User 

[JsonProperty("UserName")] 
public UserName Name { get; set; } 
[JsonProperty("UserId")] 
public string UserId { get; set; } 
[JsonProperty("Keys")] 
public List<string> Keys { get; set; } 

/// <summary> 
/// 对象实体 
/// </summary> 
[JsonObject] 
public class UserName 

[JsonProperty("FirstName")] 
public string FirstName { get; set; } 
[JsonProperty("LastName")] 
public string LastName { get; set; } 

/// <summary> 
/// Json数据绑定类 
/// </summary> 
/// <typeparam name="T"></typeparam> 
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(); 
object obj = js.Deserialize(jsonRsp[i].CreateReader(), typeof(T)); 
list.Add((T)obj); 


return list; 

return null; 


}

前端获取到后台返回的数据,结果就是用户提交的数据: 

时间: 2024-10-01 07:49:44

使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇的相关文章

ASP.NET MVC传递Model到视图的多种方式总结

ASP.NET MVC传递Model到视图的多种方式总结 有多种方式可以将数据传递到视图,如下所示: ViewData ViewBag PartialView TempData ViewModel Tuple 场景: 在视图页面,下拉框选择课程触发事件,分别显示老师课程表.学生上课表,如图: 相关的Model: 1 public class Course 2 { 3 public int Id { get; set; } 4 public string Name { get; set; } 5

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

ASP.NET MVC传递Model到视图的多种方式总结——通用方式的使用 有多种方式可以将数据传递到视图,如下所示: ViewData ViewBag PartialView TempData ViewModel Tuple 场景: 在视图页面,下拉框选择课程触发事件,分别显示老师课程表.学生上课表,如图: ? 相关的Model: 1 public class Course 2 { 3 public int Id { get; set; } 4 public string Name { get

【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6)

目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策略(MVC5+EF6) [第四篇]ASP.NET MVC快速入门之完整示例(MVC5+EF6) [番外篇]ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6) 请关注三石的博客:http://cnblogs.com/sanshi 数据库连接字符串 上一篇文章中,我们使用MVC的

ASP.NET MVC动态加载数据

ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table> <tr> <th style="width:10px;"><input id="SelectAll" type="checkbox" /></th> <th>ID</th> <th>Port_Start&l

Fun with Asp.net MVC 3 Custom Json Model Binder

If you have been using Asp.net MVC for quite a while then your are probably familiar with the concept of model binding and more specifically Json Model Binding. Starting from MVC3, Asp.net MVC is elegantly capable of binding json string passed from c

ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL

ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流量. URL重写与优化就是搜索引擎优化的手段之一. 假如某手机网站(基于ASP.NET MVC)分类页面URL是这样的, http://www.xxx.com/category/showcategory?categoryid=1000&view=list&orderby=price&p

为ASP.NET MVC视图输出json

做个小小练习,为asp.net mvc视图输出json字符串: 创建JsonResult操作: 创建此视图: 浏览结果:

ASP.NET MVC显示UserControl控件(扩展篇)

昨晚Insus.NET有怀旧一下<念念不忘,ASP.NET MVC显示WebForm网页或UserControl控件>http://www.cnblogs.com/insus/p/3641610.html 那仅是小小尝试,还有很多不明的地方. 那一篇其中有Render用户控件ascx的.如今Insus.NET想重构它一下,让步其能在Action或是Razor语法中使用. 创建一个AscxUtility.cs,这们我们可以在应用程序中多个地方使用. 这样我们就可以重构一下昨晚那个public A

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildSelectBox(url, par, sel) {  $(sel).empty();  $.getJSON(url, { id: par }, function (json, textStatus) {   for (var i = json.length - 1; i >= 0; i--) {