无法理解我的Jquery问题... 我一直在寻找并找到一些解决方案,但它们似乎没有用。
我有一个MVC项目,在一个视图中我使用的是可排序的,它就像一个魅力。
问题是当我想将列表的新订单发送回控制器时..
我正在使用alert(items)
并向我显示我想要的字符串..
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>ArrangeAttributesViewModel</legend>
<div id="contentWrap">
<p>
</p>
<p>
</p>
<div>
_category.CategoryName</div>
<div id="attributeList" class="container">
<ul>
@foreach (var _category in Model.AttributeList)
{
<li id="@("a_" + _category.CategoryID.ToString())">
@_category.CategoryName
</li>
}
</ul>
</div>
<p>
</p>
<p>
<input type="submit" id="SaveButton" value="Save Changes" />
</p>
</div>
</fieldset>
}
以下是剧本:
<script type="text/javascript">
$(document).ready(function () {
$("li").hover(function () {
$(this).css('cursor', 'move');
$(this).css('background-color', '#2c87b2');
},
function () {
$(this).css('cursor', 'auto');
$(this).css('background-color', '#5c87b2');
});
$("#attributeList ul").sortable({
opacity: 0.6,
cursor: 'move',
update: function () {
items = $(this).sortable('toArray');
alert(items);
}
});
var items;
$("#SaveButton").click(function () {
alert(items);
$.post({
url: '/Profile/ArrangeCategories',
type: 'POST',
data: { items: items },
traditional: true
});
});
});
</script>
我正在使用
[AcceptVerbs(HttpVerbs.Post), Authorize]
public ActionResult ArrangeCategories(int ProfileID, string[] items)
控制器中的..
非常感谢任何帮助!
编辑: 在用户输入之后我已经改变了一些代码..
现在一切正常,直到发送变量,换句话说,当我按下按钮时,我看到警报......
答案 0 :(得分:2)
您的变量“items”超出$ .post的范围。在.sortable()
之外声明变量 var items; // <-- declare the variable here.
$("#attributeList ul").sortable({
opacity: 0.6,
cursor: 'move',
update: function () {
items = $(this).sortable('toArray');
alert(items);
}
});
$('submit').click(function () {
$.post({
url: '/Profile/ArrangeCategories',
type: 'POST',
data: { items: items }
});
});
答案 1 :(得分:0)
好的,所以我解决了这个问题..
首先,我将控制器的输入定义为string[]
,这是不正确的。它应该是List<string>
。
其次,我将$.post
更改为$.ajax
,这就是我最终的结果(忽略变量名称的更改,项目更改为itemIds):
$("#SaveButton").click(function () {
var order = $("#attributeList ul").sortable('toArray');
alert(order);
$.ajax({
data: { itemIds: order },
type: 'POST',
traditional: true
});
});
希望这对其他人有用!