How to get the html table value in asp.net mvc?

Question

Here i am a dragging a table(1) row and dropping it in another table(2) using asp.net mvc similar to this one http://www.redips.net/javascript/drag-and-drop-table-row/ and the values are from database .It is working fine and what i need is the html table values (ie the values inside the td) of the table(2).how can i get those values and save it in dataset in asp.net MVC.Here is my code

<div id="drag">
    <table class="tbl1">
        <tr>
            <th colspan="2">
                Table 1
            </th>
        </tr>
        <% foreach (var item1 in Model)
    { %>
        <tr class="rl">
            <td class="rowhandler">
                <div class="drag row">
                    <%= Html.Encode(item1.Id) %>
                </div>
            </td>
            <td class="rowhandler">
                <div class="drag row">
                    <%= Html.Encode(item1.Title) %>
                </div>
            </td>
        </tr>
        <% } %>
        <tr style="display: none;">
            <td colspan="2">
                <span>Message line</span>
            </td>
        </tr>
    </table>
    <table id="tab" runat="server">
        <tr>
            <th colspan="2" class="mark">
                Table 2
            </th>
        </tr>
        <tr class="rd">
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr style="display: none;">
            <td colspan="2">
                <span>Message line</span>
            </td>
        </tr>
    </table>
</div>

Any suggesion?I am new to MVC

Answer 1

Use jQuery ajax to save the data in server. You can make a call to a controller action from your jquery with your data and it can save the data to your tables.

  var mydata="";  /// read your table cells values and store it in this string

  $.post("yourcontroller/action/", { data : mydata} ,function(response){
        //do something with the response from action
  });

Answer 2

As Brian already suggested, traversing the DOM maybe a bad idea. A better way would be to store the table2 data in a javascript array (whenever a drop event occurs add to the array, or remove from the array when cells are dragged off the table). Then have an ajax call to submit the whole array in one go.

Answer 3

If I am understanding this correctly when the page loads you have the data for both tables in the database. You can just keep a working set of the changes being made to the table and update those records accordingly. Add logic to the "drop" event in your JS to store the item's ID and it's new position.

This saves you from having to update unaffected records and also from traversing the entirety of both tables on submit.