C# 使用jQuery发回控制器

在我的网页中，我有一系列表，基本上只包含信息行。在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基本上如下所示：

 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+" ";
        }

函数（表、行）{
var rows=table.tBodies[0]。行；
var debugStr=“删除的行为“+Row.id+”。新订单：”；
对于（var i=0；i，您可以通过以下方式获取所有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 }
);

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

在场景中，执行以下操作：

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 }
);

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

}
})
我看到您使用的是输入类型submit，它专门用于回发表单。您需要做的是将每个表包装成一个类似以下内容的表单：

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 }
);

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

接受控制器操作方法可能具有此签名

public ActionResult Action(int collectionId, int[] ids)
{
    //Do stuff here

    return Request.IsAjaxRequest() ? null : View();
}

现在，如果禁用javascript，它应该支持优雅的降级（正常表单是否提交，否则通过ajax提交）

希望这能有所帮助：）
我一直在使用json在JSFIDLE中创建演示
如果您在服务器中使用类似的演示，则必须先获取参数“JSONFile”，然后再解析此json，以了解您需要什么。实际上，演示与您的案例不同，但我认为您可以根据自己的逻辑来使用此演示。
您想在数据中使用json格式吗？这与我当前的模型有何关系？也就是说，这到底会去哪里？很高兴我能帮上忙。享受吧！是的，这个工作非常完美：）我用了一个JSonResult，但是非常好