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

 更新时间:2010年05月07日 22:26:13   作者:  
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;
}
}
}

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

后台json反序列化使用了Newtonsoft.Json 组件,有关资料请参考:http://james.newtonking.com/

相关文章

  • jQuery控制TR显示隐藏的几种方法

    jQuery控制TR显示隐藏的几种方法

    使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,其他方法祥看本文
    2014-06-06
  • jQuery简单实现QQ空间点赞已经取消点赞

    jQuery简单实现QQ空间点赞已经取消点赞

    这篇文章主要介绍了jQuery简单实现QQ空间点赞已经取消点赞的代码,非常的好用,这里推荐给大家,有需要的小伙伴参考下。
    2015-04-04
  • Jquery通过ajax请求NodeJS返回json数据实例

    Jquery通过ajax请求NodeJS返回json数据实例

    本篇文章主要是介绍Jquery通过ajax请求NodeJS返回json数据,具有一定的参考价值,有需要的可以了解一下。
    2016-11-11
  • jQuery选择器_动力节点Java学院整理

    jQuery选择器_动力节点Java学院整理

    选择器是jQuery的核心,一个选择器写出来类似$('#dom-id')。下面给大家分享jQuery选择器的相关知识,感兴趣的朋友一起看看吧
    2017-07-07
  • javascript 全角转换实现代码

    javascript 全角转换实现代码

    当客户端用户切换输入法至全角时可能您的表单提交会有漏洞哦!不过事实上js有这功能 可以将其转换为非全角字符!
    2009-07-07
  • 基于jQuery的淡入淡出可自动切换的幻灯插件

    基于jQuery的淡入淡出可自动切换的幻灯插件

    基于jQuery淡入淡出可自动切换的幻灯插件,原型是前几天写的一个幻灯效果,因为一个小bug卡了两天,然后清空之前写的代码,重新整理思路写出来的. 思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路.
    2010-08-08
  • jQuery AJAX应用实例总结

    jQuery AJAX应用实例总结

    这篇文章主要介绍了jQuery AJAX应用,结合实例形式总结分析了jQuery 使用AJAX访问各种格式数据相关应用操作实现技巧,需要的朋友可以参考下
    2020-05-05
  • JQuery困惑—包装集 DOM节点

    JQuery困惑—包装集 DOM节点

    我使用了JQuery进行了一段时间的前端开发,它让我从选择需要操作的元素痛苦中解放出来,因为提供的选择功能是如此的强大。 同时在开发过程中我被一个问题困惑了很久,也许在别人看来这根本不是问题!
    2009-10-10
  • [jQuery] 事件和动画详解

    [jQuery] 事件和动画详解

    这篇文章主要介绍了JQ事件和动画,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 原生JS实现在线问卷调查投票特效

    原生JS实现在线问卷调查投票特效

    本文主要分享了原生JS实现在线问卷调查投票特效的实例代码。可直接复制保存HTML运行查看效果。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论