Как получить значение html-таблицы в asp.net mvc?

Question

Здесь я перетаскиваю строку таблицы (1) и помещаю ее в другую таблицу (2), используя asp.net mvc, подобный этому http://www.redips.net/javascript/drag-and-drop-table-row/, а значения взяты из базы данных. Работает нормальночто мне нужно, это HTML-значения таблицы (то есть значения внутри td) таблицы (2). Как я могу получить эти значения и сохранить его в наборе данных в asp.net MVC. Вот мой код

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

Любое предложение? Я новичок в MVC

Answer 1

Используйте jQuery ajax для сохранения данных на сервере.Вы можете выполнить вызов действия контроллера из вашего jquery со своими данными, и он может сохранить данные в ваших таблицах.

  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

Как уже предположил Брайан, обход DOM может быть плохой идеей. Лучшим способом было бы сохранить данные table2 в массиве javascript (всякий раз, когда происходит событие удаления, добавляйте в массив или удаляйте из массива, когда ячейки перетаскиваются из таблицы). Затем вызовите ajax для отправки всего массива за один раз.

Answer 3

Если я правильно понимаю, когда страница загружается, у вас есть данные для обеих таблиц в базе данных. Вы можете просто сохранить рабочий набор вносимых изменений в таблицу и соответствующим образом обновить эти записи. Добавьте логику к событию «drop» в вашем JS, чтобы сохранить идентификатор элемента и его новую позицию.

Это избавляет вас от необходимости обновлять незатронутые записи, а также обходить обе таблицы при отправке.