Как редактировать табличные данные (ASP MVC)

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

Я видел в MVCContrib есть HTML-помощник для визуализации таблицы. Полезно... но как насчет того, хочу ли я, чтобы пользователь мог редактировать эту таблицу? Из того, что я вижу, это не помогает.

Каков наилучший способ приблизиться к этому?

Традиционная форма с таблицей внутри? Если это MVC достаточно умный, чтобы проанализировать опубликованные данные обратно в коллекцию строк? Как это будет работать?

Или, возможно, он должен просто переключиться в режим редактирования, когда щелкнет строка (используя javascript и т.д.), а затем, когда пользователь переместится в другую строку, действие AJAX вызывается для отправки только одной строки. Я могу представить, что логика может быть сложной здесь - это, по-видимому, все еще будет использовать форму, но мне нужно будет динамически вставлять ее в DOM?

Мне также нужно иметь возможность добавлять строки в эту таблицу. Я не требую поддержки подкачки.

Есть ли решение на полке?

Должен ли я вернуться к веб-формам?:)

Ответы

Ответ 2

У меня такая же проблема, и я нашел для нее решение. Не думаю, что это самое красивое, но оно идеально для меня, потому что одним из моих требований было возможность редактировать данные таблицы с помощью jQuery Jeditable.

Итак, я создаю таблицу, используя MVCContrib Grid < > extension:

Html.Grid<Somenamespace.Line>( Model.InvoiceLines )
           .Attributes( id => "InvoiceGrid" )
           .Columns( column => {
               column.For( li => li.LineItem.ItemDescription ).Attributes( name => ".LineItem.ItemDescription", @class => "click" );
               column.For( li => li.LineItem.InvoiceUnitNetPrice ).Named( "Unit net price " ).Attributes( name => ".LineItem.InvoiceUnitNetPrice", @class => "click" );
               column.For( li => li.LineItem.InvoiceQuantity ).Attributes( name => ".LineItem.InvoiceQuantity", @class => "click" );
           })
           .Render();  
//rest of the code
Html.Submit("_submit", "Save");

Теперь вы можете редактировать значения на месте, но не обновлять соответствующую модель. Вся магия происходит после нажатия кнопки отправки пользователем:

$(document).ready(function() {
        $('#_submit').click(function(e) {
                e.preventDefault();
                $('#InvoiceGrid tbody tr').each(function(index) {
                    var hidden = $('<input />').attr({ type: 'hidden', name: 'InvoiceLines.Index', value: index });
                    $(this).children('td:first-child').before(hidden);
                    $(this).children('td:not(:first-child)').each(function() {
                        $(this).append($('<input />').attr({ type: 'hidden', value: $(this).text(), name: 'InvoiceLines[' + index + ']' + $(this).attr('name') }));
                    });
                });
                $('form').submit();
            });

            //editable stuff            
            $('.click').editable(function(value, settings) {
                return (value);
            }, { submit: 'OK' });
        });

В каждом TD я создаю скрытый ввод, со значением из этого TD, в каждом вводе строки с индексом, а наиболее важным здесь является атрибут name: имя коллекции в модели [здесь идет индекс].rest.of. путь, поэтому в данном конкретном случае (пример):

InvoiceLines[2].LineItem.ItemDescription

Надеюсь, что это поможет, потому что богатая сетка - это не всегда ответ;)

Отношения Матеуш

Ответ 3

Я бы сначала просмотрел одну из библиотек пользовательского интерфейса javascript:

WebForms проще, когда дело доходит до быстрой разработки богатых пользовательских интерфейсов, таких как редактируемые сетки.

Ответ 4

Вчера вечером я реализовал простое решение: form + table inside, используя поля ввода в ячейках с соглашением об именах, как описано в блог Phil Haack (благодаря @BengtBe для ссылки).

Работает, но немного немного затруднительно (например, добавление строк с jquery требует от меня разбора следующего неиспользуемого индекса).

Итак, я все еще ищу больше решений.

Я обнаружил, что библиотека extjs, которая обеспечивает очень богатую сетку. Мне еще предстоит решить, есть ли простой способ отправить данные сетки на один из моих действий с контроллером, хотя...