[转载]使用jQuery.Ajax向ASP.NET MVC控制器Post数据

[转载]使用jQuery.Ajax向ASP.NET MVC控制器Post数据 – Killmyday – 博客园.

JQuery自带了Ajax的函数,你可以使用它从远程服务器下载网页,但问题是,大部分Ajax都是通过GET这种方式与远程服务器交互的。

但如果你想通过Ajax向远程服务器传递数据呢?当然JQuery.Ajax里面有一个参数data参数允许你传递发送到服务器的数据。 但问题是,这个数据默认是采用GET方式,即附加在请求字符串(URL QueryString)后面实现的,也就是说你会受到URL最大不能超过4KB的限制。而如果你尝试用POST方法向ASP.NET MVC控制器发送数据的时候,在控制器一端,你会发现数据没有传入到控制器上。比如说下面的JQuery代码:

代码


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>Tools</title>
<link href=”http://ajax.googleapis.com/ajax/libs/jQueryui/1.8/themes/base/jQuery-ui.css” rel=”stylesheet” type=”text/css”/>
<LINK rel=”stylesheet” href=”http://jQueryui.com/demos/demos.css” />
<script type=”text/JavaScript src=”Scripts/jquery-1.4.2.min.js”></script>
<script type=”text/JavaScript src=”Scripts/jquery-ui-1.8.6.custom.min.js”></script>
<script type=”text/javascript” src=”Scripts/tinymce/tiny_mce.js”></script>
<script type=”text/javascript” src=”Scripts/tinymce/jquery.tinymce.js”></script>
</script>
<script language=”javascript” type=”text/javascript”>
var editor_selector = #note_editor;
var annotation_catalog_url = /Comment/Save;

function show_annotation_dialog() {
$(editor_selector).tinymce({
mode:
textareas,
theme:
simple
});
}

function save_handler() {
if (tinyMCE.get(note_editor)) {
var html = tinyMCE.get(note_editor).getContent();
var comment = {
Id:
1,
User:
,
PageUrl:
+ window.location.href,
Content: html
};

$.ajax({
url: annotation_catalog_url,
type: POST,
dataType:
json,
data: comment,
contentType:
application/json; charset=utf-8,
success:
function (data) {
if (data != null)
$(
#result).html(data.Message);
}
});
}
}

$(document).ready(function () {
$(
#submit).click(save_handler);
});
</script>
</head>
<body>
<div id=”note_editor”>
</div>
<input type=”button” value=”提交” id=”submit” />

<div id=”result”>
</div>
</body>

点击提交后,在控制器一端根本没有被调用,这是因为虽然你的jQuery代码指明了数据类型是json,但是数据格式并不是json格式的。你需要将对象序列化成json格式,使用json2.js就可以做这个事情,下载地址是:http://www.json.org/js.html

代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>Tools</title>
<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/>
<LINK rel=”stylesheet” href=”http://jqueryui.com/demos/demos.css” />
<script type=”text/javascript” src=”Scripts/jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”Scripts/jquery-ui-1.8.6.custom.min.js”></script>
<script type=”text/javascript” src=”Scripts/tinymce/tiny_mce.js”></script>
<script type=”text/javascript” src=”Scripts/tinymce/jquery.tinymce.js”>
<script type=text/javascript src=Scripts/json2.js></script>
</script>
</script>
<script language=”javascript” type=”text/javascript”>
var editor_selector = #note_editor;
var annotation_catalog_url = /Comment/Save;

function show_annotation_dialog() {
$(editor_selector).tinymce({
mode:
textareas,
theme:
simple
});
}

function save_handler() {
if (tinyMCE.get(note_editor)) {
var html = tinyMCE.get(note_editor).getContent();
var comment = {
Id:
1,
User:
,
PageUrl:
+ window.location.href,
Content: html
};

$.ajax({
url: annotation_catalog_url,
type: POST,
dataType:
json,
data: JSON.stringify(comment),
contentType:
application/json; charset=utf-8,
success:
function (data) {
if (data != null)
$(
#result).html(data.Message);
}
});
}
}

$(document).ready(function () {
$(
#submit).click(save_handler);
});
</script>
</head>
<body>
<div id=”note_editor”>
</div>
<input type=”button” value=”提交” id=”submit” />

<div id=”result”>
</div>
</body>

如果你在服务器的控制器一端,发生数据没有被正确地反序列化(如果你用ASP.NET MVC 3 RC之前的版本应该就会碰到这个问题)。这是因为虽然客户端指明了数据是json对象,但是,服务器MVC路由器不知道如何解释这个对象,要在服务器端加上json反序列化支持,请在global.asax.csApplication_Start()函数里,添加下面一行代码(表示你要支持json反序列化):

ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());

ASP.NET MVC 3 RC以后的版本就不需要添加这一行代码了。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏