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

Question

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

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

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

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

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

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

ли к сведению, что вам нужно добавить типа входа скрытого со значением идентификатора в противном случае идентификаторы не получить сериализации - все, что вам нужно указать является атрибут имени

<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

Вы можете возьмите все идентификаторы с чем-то вроде этого:

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

В вашем scenerio, сделать что-то вроде этого:

$(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 3

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