如何编辑表格数据(ASP MVC)

Question

我需要能够在浏览器中编辑数据表。

我在MVCContrib中看到有一个用于呈现表格的helper。有用..。但是，如果我希望用户能够编辑该表呢？据我所知，它在这方面没有帮助。

实现这一目标的最好方法是什么？

里面有一张桌子的传统形式？如果是这样的话，MVC是否足够智能，能够将发布的数据解析回一个行集合？那到底是怎么回事呢？

或者，当单击一行(使用javascript等)时，它应该切换到编辑模式，然后当用户移动到另一行时，将调用AJAX操作来仅提交一行。我可以想象这里的逻辑可能会变得复杂-这可能仍然使用表单，但我必须动态地将其插入到DOM中吗？

我还需要能够向此表中添加行。我不需要寻呼支持。

有现成的解决方案吗？

我是否应该返回到web表单？:)

Answer 1

看看Phil Haack的博客，他在博客中描述了如何使用model bind to a list。

也许这能帮上忙？

Answer 2

我也有同样的问题，我找到了一个解决方案。我不认为它是最漂亮的，但它对我来说是理想的，因为我的要求之一是能够使用jQuery的Jeditable插件编辑表数据。

所以我使用MVCContrib的Grid<>扩展生成一个表：

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");

现在你可以就地编辑这些值，但是它不会升级相应的模型。所有的魔力都发生在用户点击submit按钮之后：

$(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‘属性:在Index中集合的名称在这里是index.rest.of.path，所以在这个特殊的情况下(示例)：

InvoiceLines[2].LineItem.ItemDescription

希望它能有所帮助，因为富网格并不总是解决问题的方法;)

关于Mateusz

Answer 3

我会先签出一个javascript UI库：

• ExtJS Grid
• Yahoo DataTable
• Flexigrid

当涉及到快速开发富UI的可编辑网格时，WebForms更容易。