Использование jQuery для отправки обратно в контроллер

Question

На моей веб-странице есть ряд таблиц, которые в основном содержат только строки информации. Каждому из них присваивается идентификатор в цикле for, и я пытаюсь ссылаться на них извне. Я добавил классы в таблицу и на кнопку «Сохранить изменения».

По сути, моя цель состоит в том, чтобы пользователь мог перетаскивать строки, изменяя их порядок. Затем они могут нажать кнопку «Сохранить изменения», после чего на сервер будет отправлена ​​соответствующая информация.

У меня возникают проблемы при сопоставлении кнопки с соответствующей таблицей и, следовательно, при отправке идентификаторов каждой строки обратно на сервер в массиве. Я написал код, чтобы иметь возможность получать идентификаторы из каждой из таблиц и их текущий порядок, но я не знаю, как назначить это массиву из нажатия кнопки 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

Я вижу, вы используете тип ввода submit , который используется исключительно для обратной отправки форм. Вам нужно обернуть каждую таблицу в форму примерно так:

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

Обратите внимание, что это приведет к «обратной передаче» формы в Action, Controller. Укажите идентификатор коллекции внутри значений маршрута, чтобы идентифицировать конкретную коллекцию.

Обратите внимание, вам нужно добавить тип ввода скрытый со значением идентификатора, иначе идентификаторы не будут сериализованы - все, что вам нужно указать - это имя атрибут

<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 2

Я создал демо в jsfiddle, используя json http://jsfiddle.net/viyancs/4ffb3/11/ если вы используете такую ​​демоверсию на своем сервере, после этого необходимо получить параметр `JSONFile ', после чего проанализируйте этот json на предмет того, что вы хотите. На самом деле демо не совпадает с вашим делом, но я думаю, что вы можете использовать это по своей логике.

Answer 3

Вы можете получить все идентификаторы примерно так:

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

} })