代码之家  ›  专栏  ›  技术社区  ›  Jack Ukleja

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

  •  11
  • Jack Ukleja  · 技术社区  · 16 年前

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

    我在mvcontrib中看到有一个HTML助手来呈现表。有用…但是如果我希望用户能够编辑该表呢?从我所看到的来看,它对那里没有帮助。

    最好的方法是什么?

    有桌子的传统形式?如果是这样,MVC是否足够聪明,能够将发布的数据解析回行集合中?那怎么办?

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

    我还需要能够向这个表中添加行。我不需要分页支持。

    有现成的解决方案吗?

    我应该回到Web窗体吗?:)

    4 回复  |  直到 8 年前
        1
  •  4
  •   BengtBe    16 年前

    看看菲尔·哈克的博客,他在博客中描述了如何 model bind to a list .

    也许这有帮助?

        2
  •  3
  •   matma    16 年前

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

    因此,我使用mvcontrib的网格扩展生成一个表:

    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”属性: 模型[here goes index].rest.of.path中集合的名称 ,因此在这个特定的情况下(示例):

    InvoiceLines[2].LineItem.ItemDescription
    

    希望它能有所帮助,因为富网格并不总是一个答案;)

    当做 马特乌斯

        3
  •  1
  •   Todd Smith Brandon    16 年前

    我将首先签出一个javascript UI库:

    当需要快速开发丰富的用户界面(如可编辑网格)时,WebForms更容易实现。

        4
  •  0
  •   Jack Ukleja    16 年前

    昨晚,我实现了一个简单的解决方案:在内部使用表单+表,在具有命名约定的单元格中使用输入字段,如中所述。 Phil Haack's blog (感谢@bengtbe提供链接)。

    它可以工作,但有点麻烦(例如,用jquery添加行需要我计算出下一个未使用的索引)。

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

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