使用 jQuery 回传到控制器

Question

在我的网页中，我有一系列基本上只包含信息行的表格。这些中的每一个都在 for 循环中给出了一个 id，我试图从外部引用它们。我向表格和“保存更改”按钮添加了类。

基本上，我的目标是让用户能够拖放行，从而改变顺序。然后他们可以单击“保存更改”按钮，这将与相关信息一起发回服务器。

我无法将按钮与相关表匹配，从而将每行的 id 以数组的形式提交回服务器。我编写了代码，以便能够从每个表中获取 ids 及其当前顺序，但我不知道如何通过单击 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+" ";
        }

Answer 1

您可以通过以下方式获取所有 ID：

var IDs = []; 
$("#mydiv").find("span").each(function(){ IDs.push(this.id); });

在你的场景中，做这样的事情：

$(document).ready(function () 
{ 


$(".table-collection").tableDnD();      
  $(".save-order").click(function (e) 
  { 
var IDs = [];
$("#yourtable").find("draggable-tr-class").each(function(){ IDs.push(this.id); });

e.preventDefault();  

$.ajax(
  { 
    url: window.location.href,             
    type: 'POST',             
    data: { ids: IDs }
);

} })

Answer 2

我看到您正在使用专门用于回发表单的输入类型提交。您需要做的是将每个表格包装成一个表格，如下所示：

@using(Html.BeginForm("Action", "Controller", new{ collectionId = collection.Id }))
{
    <input type="submit" value="Save Changes" class="save-order" /> 
}

请注意，这将导致表单“回发”到 Action、Controller。在路由值中指定集合 id 以标识特定集合。

请注意，您需要在 input type hidden 中添加 id 的值，否则 ids' 将不会被序列化 - 您只需 指定 就是 名称属性

<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 提交）

希望这会有所帮助:)

Answer 3

我已经在 jsfiddle 中使用 json 创建了演示 http://jsfiddle.net/viyancs/4ffb3/11/ 如果您在服务器中使用该演示，则必须在解析此 json 后获取参数“JSONFile”以获取您想要的内容。实际上该演示与您的情况不同，但我认为您可以按照您的逻辑使用它。