Как редактировать табличные данные (ASP MVC) - PullRequest
11 голосов
/ 23 мая 2009

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

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

Как лучше всего подойти к этому?

Традиционная ФОРМА с СТОЛОМ внутри? Если да, достаточно ли у MVC умения разбирать опубликованные данные обратно в набор строк? Как это будет работать в любом случае?

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

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

Есть ли готовое решение?

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

Ответы [ 4 ]

5 голосов
/ 23 мая 2009

Взгляните на блог Фила Хаака, где он описывает, как привязка модели к списку .

Может быть, это может помочь?

3 голосов
/ 01 июля 2009

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

Итак, я генерирую таблицу, используя расширение GCC MVContrib:> 1005 *

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': Имя коллекции в Model [здесь идет index] .rest .of.path , поэтому в данном конкретном случае (пример):

InvoiceLines[2].LineItem.ItemDescription

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

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

1 голос
/ 24 мая 2009

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

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

0 голосов
/ 25 мая 2009

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...