Using jQuery to post back to Controller

Question

In my web page, I have a series of tables that basically just contain rows of information. Each of these is given an id in a for loop and I'm trying to reference them from outside that. I added classes to both the table and a 'Save Changes' button.

Essentially, my goal is for the user to be able to drag and drop rows around, thereby changing the order. Then they can click the 'Save Changes' button and this will post back to the server with the relevant information.

I am having trouble matching up the button to the relevant table and thereby submitting the id's of each row back to the server in an array. I have written the code to be able to be able to get the ids from each of the tables and their current order, but I don't know how to assign this to an array from within the button click jQuery.

Here is the View:

@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>
}

Here is the jQuery so far:

$(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--"
});

The jQuery to iterate through each row is essentially this:

 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

i have been create demo in jsfiddle using json http://jsfiddle.net/viyancs/4ffb3/11/ if you use like that demo in your server must be get parameter `JSONFile' after that parse this json for what do you want.actually the demo not same with your case but i think you can use this by your logic.

Answer 2

I see you are using input type submit which is exclusively used to postback forms. What you need to do is wrap every table up in a form with something like this:

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

Note that this will cause a 'post-back' of the form to Action, Controller. Specify the collection id inside the route values to identify the specific collection.

Do note, you need to add input type hidden with the id's value otherwise the ids' won't get serialised - all you have to specify is the name attribute

<td class="dragHandle showDragHandle"> 
    <input type="hidden" name="ids" value="@(image.Id)" />
    @image.Id
</td>

Then you can intercept the call then do it via ajax with:

$(".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;
});

The accepting controller action method will probably have this signature

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

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

Now it should support graceful degradation if javascript is disabled (does a normal form submit, otherwise does it via ajax)

Hope this helps :)

Answer 3

You can grab all of the IDs with something like this:

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

In your scenerio, do something like this:

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

} })