Question

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

我在MVCContrib中看到有一个HTML帮助器来呈现一个表。有用......但是如果我希望用户能够编辑该表呢？从我所看到的，它没有帮助。

最好的方法是什么？

传统的FORM里面有一个TABLE？如果是这样，MVC足够聪明，可以将发布的数据解析回行集合中吗？无论如何，这将如何运作？

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

我还需要能够在此表中添加行。我不需要分页支持。

那里有现成的解决方案吗？

我应该回到网络表单吗？：）

Answer 1

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

也许这会有所帮助？

Answer 2

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

所以我使用MVCContrib的Grid＆lt;＆gt;生成一个表。扩展：

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.path ，所以在这种特殊情况下（例子）：

InvoiceLines[2].LineItem.ItemDescription

希望它会有所帮助，因为丰富的网格并不总是一个答案;）

此致 Mateusz

Answer 3

我会首先检查一个javascript UI库：

在快速开发像可编辑网格这样的丰富UI时，WebForms更容易。

Answer 4

昨晚我实现了一个简单的解决方案：form + table inside，使用Phil Haack's blog中描述的命名约定的单元格中的输入字段（感谢@BengtBe链接）。

它正在运行，但它有点繁琐（例如，添加带有jquery的行需要我计算下一个未使用的索引）。

所以我仍在寻找更多解决方案。

我发现的是extjs library提供了非常丰富的网格。我还没有弄清楚是否有一种简单的方法可以将网格数据回发给我的一个控制器动作但是...

如何编辑表格数据（ASP MVC）

4 个答案: