C# jQuery sortable:如何正确发布元素id数组?
问题: 我正在使用jquerysortable。 我使用了本教程:C# jQuery sortable:如何正确发布元素id数组?,c#,jquery,asp.net,ajax,asp.net-mvc-3,C#,Jquery,Asp.net,Ajax,Asp.net Mvc 3,问题: 我正在使用jquerysortable。 我使用了本教程: 这给了我一个字符串,比如: ID[]=2&ID[]=3&ID[]=4&ID[]=1 甚至更糟糕的是,当我调用id的IDa_1、IDb_2、IDc_3、IDd_4时,它会给我 IDb[]=2&IDc[]=3&IDd[]=4&IDa[]=1 我觉得这种格式非常可怕和无用。。。 我只想要几页:[“IDb_2”、“IDc_3”、“IDd_4”、“IDa_1”] 并具有数组索引中元素的
这给了我一个字符串,比如:
ID[]=2&ID[]=3&ID[]=4&ID[]=1
甚至更糟糕的是,当我调用id的IDa_1、IDb_2、IDc_3、IDd_4时,它会给我
IDb[]=2&IDc[]=3&IDd[]=4&IDa[]=1
我觉得这种格式非常可怕和无用。。。
我只想要几页:[“IDb_2”、“IDc_3”、“IDd_4”、“IDa_1”]
并具有数组索引中元素的顺序
为了纠正这一点,我做了:
var xxx = { pages: $(this).sortable('toArray') };
alert(JSON.stringify(xxx));
这是我的家庭控制器:
public string SaveSortable(string pages)
{
string strPages = Request.Params["pages"];
Console.WriteLine(pages);
return pages;
}
public ActionResult Sortable()
{
return View();
} // End Action Sortable
问题是,“页面”和strpage都始终为空…但它进入了正确的控制器…
我做错了什么?
这是我的.cshtml:
@{
Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="all">
html {margin: 0px; padding: 0px; height: 100%;}
body {margin: 0px; padding: 0px; height: 100%;}
input{margin: 0px; padding: 0px; }
</style>
<style type="text/css" media="all">
.menu li
{
list-style: none;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #000;
background-color: #C0C0C0;
width: 150px;
display: inline;
}
</style>
<script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery-1.7.2.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jQuery/jquery-ui/1_8_21/js/jquery-ui-1.8.21.custom.min.js")"></script>
<script type="text/javascript" language="javascript">
Date.prototype.getTicksUTC = function () {
return Date.parse(this.toUTCString()) + this.getUTCMilliseconds();
} // End Function getTicksUTC
var tickURL = '@Url.Content("~/Scripts/jQuery/SlickGrid/images/tick.png")';
$(document).ready(function () {
//$('#menu-pages').sortable();
$("#menu-pages").sortable({
update: function (event, ui) {
alert("posting");
//var ElementsOrder = $(this).sortable('toArray').toString();
var ElementsOrder = $(this).sortable('toArray');//.toString();
//alert(JSON.stringify(ElementsOrder));
var xxx = { pages: $(this).sortable('toArray') };
//alert(JSON.stringify(xxx));
//document.writeln("<h1>"+ JSON.stringify(xxx) + "</h1>");
// $.post("@Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $('#menu-pages').sortable('serialize') });
// $.post("@Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $('#menu-pages').sortable('serialize', { key: 'id' }) });
$.post("@Url.Action("SaveSortable", "Home")?no_cache=" + new Date().getTicksUTC(), { pages: $(this).sortable('toArray') });
}
});
});
</script>
</head>
<body>
<ul class="menu" id="menu-pages">
<li id="ID_1">Home</li>
<li id="ID_2">Blog</li>
<li id="ID_3">About</li>
<li id="ID_4">Contact</li>
</ul>
</body>
</html>
@{
布局=空;
}
html{margin:0px;padding:0px;height:100%;}
正文{边距:0px;填充:0px;高度:100%;}
输入{边距:0px;填充:0px;}
李先生
{
列表样式:无;
填充:10px;
边缘底部:5px;
边框:1px实心#000;
背景色:#C0;
宽度:150px;
显示:内联;
}
Date.prototype.getTicksUTC=函数(){
return Date.parse(this.toutString())+this.getutcmillesons();
}//结束函数getTicksUTC
var tickURL='@Url.Content(“~/Scripts/jQuery/SlickGrid/images/tick.png”);
$(文档).ready(函数(){
//$(“#菜单页”).sortable();
$(“#菜单页”)。可排序({
更新:功能(事件、用户界面){
警报(“张贴”);
//var ElementsOrder=$(this.sortable('toArray').toString();
var ElementsOrder=$(this.sortable('toArray');//.toString();
//警报(JSON.stringify(ElementsOrder));
var xxx={pages:$(this).sortable('toArray');
//警报(JSON.stringify(xxx));
//document.writeln(“+JSON.stringify(xxx)+”);
//$.post(@Url.Action(“SaveSortable”,“Home”)?no_cache=“+new Date().getTicksUTC(),{pages:$('#菜单页').sortable('serialize')});
//$.post(@Url.Action(“SaveSortable”,“Home”)?no_cache=“+new Date().getTicksUTC(),{pages:$('#菜单页').sortable('serialize',{key:'id'))});
$.post(@Url.Action(“SaveSortable”,“Home”)?no_cache=“+new Date().getTicksUTC(),{pages:$(this.sortable('toArray'))});
}
});
});
只需使用JSON请求:
$('#menu-pages').sortable({
update: function (event, ui) {
$.ajax({
url: '@Url.Action("SaveSortable", "Home")',
type: 'POST',
cache: false,
contentType: 'application/json',
data: JSON.stringify({ pages: $(this).sortable('toArray') }),
success: function(result) {
// ...
}
});
}
});
然后:
[HttpPost]
public ActionResult SaveSortable(string[] pages)
{
// pages will contain what you need => a list of ids
...
}
记录在案,JSON请求POST负载将是这样的:
{"pages":["ID_2","ID_3","ID_1","ID_4"]}
我必须使用$.ajax吗?使用$.post不可能吗?是的,您必须使用
$.ajax
,因为它允许您将适当的请求内容类型头设置为应用程序/json
,这是$.post
无法完成的。