在我的网页中,我有一系列表,这些表基本上只包含信息行。这些都在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提交)

希望这可以帮助 :)

10-05 22:46
查看更多