在我的网页中,我有一系列表,这些表基本上只包含信息行。这些都在for循环中指定了一个ID,我正在尝试从外部引用它们。我向表和“保存更改”按钮都添加了类。
本质上,我的目标是使用户能够在周围拖放行,从而更改顺序。然后,他们可以单击“保存更改”按钮,这将与相关信息一起发回到服务器。
我在将按钮与相关表进行匹配时遇到麻烦,因此无法将每行的ID提交回数组中的服务器。我已经编写了能够从每个表及其当前顺序获取ID的代码,但是我不知道如何从单击jQuery的按钮中将其分配给数组。
这是视图:
@foreach (var collection in Model.Collections)
{
<h2>@collection.Season</h2>
@Html.ActionLink("Delete Collection", "DeleteCollection", new { controller = "Edit", brand = collection.Brand.Name, season = collection.Season })
@Html.ActionLink("Edit Collection", "EditCollection", new { controller = "Edit", brand = collection.Brand.Name, season = collection.Season })
@Html.ActionLink("Add Image", "CreateImages", new { controller = "Edit", season = collection.Season })
<p>
To change the ordering of images, drag and drop to your desired position and then click the Save Changes button on the appropriate collection.
</p>
<table class="table-collection" id="table-@collection.Id">
<tr class="nodrop nodrag">
<th>
Id
</th>
<th>
Description
</th>
<th>
Image
</th>
<th>
Options
</th>
</tr>
@foreach (var image in collection.Images)
{
<tr id="@collection.Id-@image.Id">
<td class="dragHandle showDragHandle">
@image.Id
</td>
<td>
@image.Description
</td>
<td>
<img src="@Url.Content("~/" + image.Location)" alt="@image.Description" />
</td>
<td>
<ul>
<li>
@Html.ActionLink("Edit", "EditImage", new { controller = "Edit", brand = image.Collection.Brand.Name,
season = image.Collection.Season, imageId = @image.Id } )
</li>
<li>
@Html.ActionLink("Delete", "DeleteImage", new
{
controller = "Edit",
brand = image.Collection.Brand.Name,
season = image.Collection.Season,
imageId = @image.Id
})
</li>
</ul>
</td>
</tr>
}
</table>
<p>
<input type="submit" value="Save Changes" class="save-order" id="saveTable-@collection.Id"/>
</p>
}
到目前为止,这是jQuery:
$(document).ready(function () {
$(".table-collection").tableDnD();
$(".save-order").click(function (e) {
e.preventDefault();
$.ajax({ url: window.location.href,
type: 'POST',
data: { ids: $("--ASSIGN ARRAY HERE--"
});
遍历每一行的jQuery本质上是这样的:
function(table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Row dropped was "+row.id+". New order: ";
for (var i=0; i<rows.length; i++) {
debugStr += rows[i].id+" ";
}
最佳答案
我看到您正在使用专门用于回发表单的输入类型Submit。您需要做的是将每个表都包装成这样的形式:
@using(Html.BeginForm("Action", "Controller", new{ collectionId = collection.Id }))
{
<input type="submit" value="Save Changes" class="save-order" />
}
请注意,这将导致表单“回发”到Action,Controller。在路由值内指定集合ID,以标识特定集合。
请注意,您需要添加隐藏有ID值的输入类型,否则ID不会序列化-您只需指定name属性即可
<td class="dragHandle showDragHandle">
<input type="hidden" name="ids" value="@(image.Id)" />
@image.Id
</td>
然后,您可以拦截呼叫,然后通过ajax使用以下命令进行操作:
$(".save-order").click(function(e) {
e.preventDefault();
var form = $(this).closest('form');
if(form.validate()) {
$.post(form.attr('action'), form.serialize(), function() {
alert('The new image order has been saved.');
});
}
return false;
});
接受控制器操作方法可能会具有此签名
public ActionResult Action(int collectionId, int[] ids)
{
//Do stuff here
return Request.IsAjaxRequest() ? null : View();
}
现在,如果禁用了javascript,它应该支持正常降级(是否以正常形式提交,否则通过ajax提交)
希望这可以帮助 :)