Диалог jQuery - используйте jquery / ajax для редактирования табличных данных.

Question

У меня есть какие-то сомнения, в настоящее время я использовал модальное диалоговое окно jquery для отображения деталей экземпляра db. Диалог загружает частичное представление, которое отображает данные в виде таблицы. Я хочу разрешить пользователю нажимать кнопку «Редактировать» и напрямую редактировать данные в таблице (точнее, я хочу вызвать изменение каждого @ Html.DisplayFor в редактируемое поле). Я понятия не имею, как это можно сделать. Нужно ли открывать другое диалоговое окно после того, как пользователь нажмет кнопку «Изменить»? Любой другой возможный способ сделать это ??

Очень ценю любую помощь ...

---

Я вызываю мой диалог в View следующим образом:

        //Call Details action to display the food details
        var url = 'Details?cid=' + id;

        $detaildialog.dialog({ open: function () { $(this).load(url) } });
        $detaildialog.dialog('open');

Действие Details вернет мое частичное представление, то есть таблицу, которую я использовал для отображения всех подробностей моего экземпляра Food (ниже приводится его часть):

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.FoodName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.FoodAmount)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.StorageDate)
    </td>

Любая подсказка ?? Пожалуйста, помогите ..

Answer 1

Вы можете динамически скрывать показ метки / ввода для самостоятельного редактирования, но с использованием таблицы jQuery, которая уже имеет эту функцию, может быть проще :

• Вот статья, использующая DataTables с некоторыми плагинами для встроенного редактирования. Я широко использовал DataTables, и они хорошо справляются со своей работой. http://www.codeproject.com/KB/aspnet/MVC-CRUD-DataTable.aspx

• jqGrid также поддерживает встроенное редактирование http://trirand.com/blog/jqgrid/jqgrid.html#

Answer 2

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

class = "editablefield"

и в jquery

$(".editablefield").live("change", function(){

//your code to handle change here

});

я использовал live на всякий случай для обработки динамически добавленных элементов в DOM

jquery .live

jquery .change