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 (i.e 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

first thought is have a "row" of hidden fields then use javascript/jquery to populate the hidden row with the values. not the best solution by far but workable. — Brian
– Brian, Commented Mar 16, 2012 at 13:08

Shyju · Accepted Answer · 2012-03-16 13:19:23Z

3

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

edited Mar 16, 2012 at 13:19

answered Mar 16, 2012 at 13:07

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bala3569 Over a year ago

forums.asp.net/p/1709268/4549152.aspx/… like this?

Shyju Over a year ago

that is a good example. You may need to customize it based on your dom structure to read the data. post is short form of ajax. so you should be good

zszep · Accepted Answer · 2012-03-17 08:04:37Z

1

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.

answered Mar 17, 2012 at 8:04

zszep

4,4835 gold badges41 silver badges58 bronze badges

Comments

Brian Warfield · Accepted Answer · 2012-03-16 14:17:15Z

0

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.

answered Mar 16, 2012 at 14:17

Brian Warfield

3771 silver badge11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related