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

I would checkout one of the javascript UI libraries first:

• ExtJS Grid
• Yahoo DataTable
• Flexigrid

WebForms are easier when it comes to quickly developing rich UI's like editable grids.

Вчера вечером я реализовал простое решение: форма + таблица внутри, используя поля ввода в ячейках с соглашением об именах, как описано в блоге Фила Хаака (спасибо @BengtBe за ссылка).

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

Так что я все еще ищу другие решения.

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

У меня та же проблема, и я нашел решение для нее. Не думаю, что он самый красивый, но он идеален для меня, потому что одним из моих требований была возможность редактировать данные таблицы с помощью плагина 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: Name of коллекция в Model [здесь идет индекс] .rest.of.path , поэтому в данном конкретном случае (пример):

InvoiceLines[2].LineItem.ItemDescription

Надеюсь, это поможет, потому что расширенная сетка не всегда является ответом;)

С уважением Матеуш