使用jQuery向asp.net Mvc傳遞復(fù)雜json數(shù)據(jù)-ModelBinder篇
更新時(shí)間：2010年05月07日 22:26:13 作者：
jQuery提供的ajax方法能很方便的實(shí)現(xiàn)客戶端與服務(wù)器的異步交互,在asp.net mvc 框架使用jQuery能很方便地異步獲取提交數(shù)據(jù),給用戶提供更好的體驗(yàn)!
調(diào)用jQuery的ajax方法時(shí),jQuery會(huì)根據(jù)post或者get協(xié)議對(duì)參數(shù)data進(jìn)行序列化;
如果提交的數(shù)據(jù)使用復(fù)雜的json數(shù)據(jù),例如:
{userId:32323,userName:{firstName:"李",lastName:"李大嘴"}}
那么服務(wù)器是無(wú)法正常接收到完整的參數(shù),因?yàn)閖Query對(duì)data的序列化,是使用了鍵值對(duì)拼裝的方式;
參數(shù)拼裝成 userId=32323&userName=object ; userName所指向的對(duì)象被序列化成字符串"object"
如何才能把一個(gè)復(fù)雜的object對(duì)象提交到后臺(tái)的action參數(shù)中呢?
首先,解決jQuery對(duì)于參數(shù)序列化的問(wèn)題:
/*對(duì)象序列化為字符串*/
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異步請(qǐng)求:
$(function() {
/*按鈕點(diǎn)擊事件*/
$("#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");
});
});
點(diǎn)擊按鈕提交數(shù)據(jù),監(jiān)控瀏覽器,可以發(fā)現(xiàn)提交的數(shù)據(jù)是json對(duì)象的序列化后的內(nèi)容:
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
其次,后臺(tái)服務(wù)器處理參數(shù)綁定:
using System.Collections.Generic;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
namespace WebOS.Controllers
{
[HandleError]
public class HomeController : Controller
{
/// <summary>
/// 測(cè)試方法
/// </summary>
/// <param name="users">用戶數(shù)據(jù)</param>
/// <returns>提交的用戶數(shù)組</returns>
public ActionResult Test([ModelBinder(typeof(JsonBinder<User>))]List<User> users)
{
return Json(users, JsonRequestBehavior.AllowGet);
}
}
/// <summary>
/// 對(duì)象實(shí)體
/// </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>
/// 對(duì)象實(shí)體
/// </summary>
[JsonObject]
public class UserName
{
[JsonProperty("FirstName")]
public string FirstName { get; set; }
[JsonProperty("LastName")]
public string LastName { get; set; }
}
/// <summary>
/// Json數(shù)據(jù)綁定類
/// </summary>
/// <typeparam name="T"></typeparam>
public class JsonBinder<T> : IModelBinder
{
public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
//從請(qǐng)求中獲取提交的參數(shù)數(shù)據(jù)
var json = controllerContext.HttpContext.Request.Form[bindingContext.ModelName] as string;
//提交參數(shù)是對(duì)象
if (json.StartsWith("{") && json.EndsWith("}"))
{
JObject jsonBody = JObject.Parse(json);
JsonSerializer js = new JsonSerializer();
object obj = js.Deserialize(jsonBody.CreateReader(), typeof(T));
return obj;
}
//提交參數(shù)是數(shù)組
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;
}
}
}
前端獲取到后臺(tái)返回的數(shù)據(jù),結(jié)果就是用戶提交的數(shù)據(jù):
后臺(tái)json反序列化使用了Newtonsoft.Json 組件,有關(guān)資料請(qǐng)參考:http://james.newtonking.com/
如果提交的數(shù)據(jù)使用復(fù)雜的json數(shù)據(jù),例如:
{userId:32323,userName:{firstName:"李",lastName:"李大嘴"}}
那么服務(wù)器是無(wú)法正常接收到完整的參數(shù),因?yàn)閖Query對(duì)data的序列化,是使用了鍵值對(duì)拼裝的方式;
參數(shù)拼裝成 userId=32323&userName=object ; userName所指向的對(duì)象被序列化成字符串"object"
如何才能把一個(gè)復(fù)雜的object對(duì)象提交到后臺(tái)的action參數(shù)中呢?
首先,解決jQuery對(duì)于參數(shù)序列化的問(wèn)題:
復(fù)制代碼 代碼如下:
/*對(duì)象序列化為字符串*/
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異步請(qǐng)求:
復(fù)制代碼 代碼如下:
$(function() {
/*按鈕點(diǎn)擊事件*/
$("#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");
});
});
點(diǎn)擊按鈕提交數(shù)據(jù),監(jiān)控瀏覽器,可以發(fā)現(xiàn)提交的數(shù)據(jù)是json對(duì)象的序列化后的內(nèi)容:
復(fù)制代碼 代碼如下:
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
其次,后臺(tái)服務(wù)器處理參數(shù)綁定:
復(fù)制代碼 代碼如下:
using System.Collections.Generic;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
namespace WebOS.Controllers
{
[HandleError]
public class HomeController : Controller
{
/// <summary>
/// 測(cè)試方法
/// </summary>
/// <param name="users">用戶數(shù)據(jù)</param>
/// <returns>提交的用戶數(shù)組</returns>
public ActionResult Test([ModelBinder(typeof(JsonBinder<User>))]List<User> users)
{
return Json(users, JsonRequestBehavior.AllowGet);
}
}
/// <summary>
/// 對(duì)象實(shí)體
/// </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>
/// 對(duì)象實(shí)體
/// </summary>
[JsonObject]
public class UserName
{
[JsonProperty("FirstName")]
public string FirstName { get; set; }
[JsonProperty("LastName")]
public string LastName { get; set; }
}
/// <summary>
/// Json數(shù)據(jù)綁定類
/// </summary>
/// <typeparam name="T"></typeparam>
public class JsonBinder<T> : IModelBinder
{
public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
//從請(qǐng)求中獲取提交的參數(shù)數(shù)據(jù)
var json = controllerContext.HttpContext.Request.Form[bindingContext.ModelName] as string;
//提交參數(shù)是對(duì)象
if (json.StartsWith("{") && json.EndsWith("}"))
{
JObject jsonBody = JObject.Parse(json);
JsonSerializer js = new JsonSerializer();
object obj = js.Deserialize(jsonBody.CreateReader(), typeof(T));
return obj;
}
//提交參數(shù)是數(shù)組
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;
}
}
}
前端獲取到后臺(tái)返回的數(shù)據(jù),結(jié)果就是用戶提交的數(shù)據(jù):
后臺(tái)json反序列化使用了Newtonsoft.Json 組件,有關(guān)資料請(qǐng)參考:http://james.newtonking.com/
您可能感興趣的文章:
- SpringMVC實(shí)現(xiàn)前端后臺(tái)交互傳遞數(shù)據(jù)
- ASP.NET MVC從控制器傳遞數(shù)據(jù)到視圖的四種方式詳解
- springMVC框架下JQuery傳遞并解析Json數(shù)據(jù)
- Spring MVC 學(xué)習(xí) 之 - URL參數(shù)傳遞詳解
- jsp 顯示springmvc modelmap傳遞的對(duì)象詳細(xì)介紹
- SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的
- ASP.NET中MVC傳遞數(shù)據(jù)的幾種形式總結(jié)
- Ruby on Rails中MVC結(jié)構(gòu)的數(shù)據(jù)傳遞解析
- ASP.NET中MVC從后臺(tái)控制器傳遞數(shù)據(jù)到前臺(tái)視圖的方式
- MVC頁(yè)面之間參數(shù)傳遞解析
相關(guān)文章
這篇文章主要 介紹了jQuery利用jquery.qrcode.min.js插件實(shí)現(xiàn)二維碼掃描功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要給大家介紹了關(guān)于jQuery中g(shù)etJSON跨域原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
JqGrid是JQuery的表格插件，功能非常強(qiáng)大，基本上能想到，它都能實(shí)現(xiàn)。下面是一個(gè)例子，希望能通過(guò)這個(gè)示例，能讓你了解下JqGrid。2011-05-05
本篇文章給大家分享了關(guān)于JQuery元素查找與操作的相關(guān)技巧和流程，對(duì)此有需要的朋友可以跟著學(xué)習(xí)參考下。2018-04-04
作為jquery異步請(qǐng)求的傳輸對(duì)象，jquery請(qǐng)求后返回的結(jié)果是json對(duì)象,這里考慮的都是服務(wù)器返回JSON形式的字符串的形式2014-03-03
最近做一個(gè)報(bào)表頁(yè)面顯示位置配置的界面,剛開(kāi)始時(shí)用的是多個(gè)checkbox,選擇其中需要的報(bào)表即可。后來(lái)隨著業(yè)務(wù)變復(fù)雜，需要使用兩個(gè)select,選擇其中需要的到右邊select，然后提交到數(shù)據(jù)庫(kù)2013-10-10
學(xué)習(xí)jQuery中的noConflict()用法
在本篇文章中我們整理了關(guān)于學(xué)習(xí)jQuery中的noConflict()用法的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2018-09-09
Jquery的autocomplete插件用法及參數(shù)講解
今天小編就為大家分享一篇關(guān)于Jquery的autocomplete插件用法及參數(shù)講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-03-03 
本篇文章主要是對(duì)jquery取消選擇select下拉框示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02