Question

在我的网页中，我有一系列基本上只包含信息行的表。每个都在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+" ";
        }

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以标识特定集合。

请注意，您需要添加带有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

我使用json在jsfiddle中创建了demo http://jsfiddle.net/viyancs/4ffb3/11/ 如果你在你的服务器中使用那样的demo必须得到参数`JSONFile'之后解析这个json你想要什么。实际上这个演示与你的情况不一样但我想你可以用你的逻辑来使用它。

使用jQuery回发到Controller

3 个答案: