Question

我总是使用硬编码方式在MVC中提交临时表例如：我必须在Jquery操作之后提交以下临时表

@using (Html.BeginForm("GridSumbit", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <table class="Vista" id="table1">
                                <thead>
                                    <tr>
                                        <th>
                                           col 1
                                        </th>
                                        <th>
                                           col 2
                                        </th>

                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
<input type="submit" value="Submit" />
}

Jquery

function AddRow(val1,val2) {
            var col1 = '<input name="col1" type="hidden" value="' + val1 + '" />';
            var col2 = '<input name="col2" type="hidden" value="' + val2 + '" />';
            $('#table1 tbody:last').append('<tr><td>' + col1 + '</td><td>' + val2 + '</td></tr>');
        }

控制器

public ActionResult GridSumbit(List<GridRows> grid)
        {

.....

模型

public class GridRows {

public string col1 {set;get;}
public string col2 {set;get;}

}

有没有其他方法可以做到这一点？更有条理的方式......

Answer 1

要使模型绑定器正确地将表单数据映射到您的操作方法参数（GridRow类的列表），您的表单元素的name属性值应该类似

[{index}].col1

其中{index}是基于零的索引。

因此，如果您要添加2行，那么您的输入应该是这样的

<input name="[0].col1" type="hidden" value="a" />
<input name="[0].col2" type="hidden" value="b" />

<input name="[1].col1" type="hidden" value="c" />
<input name="[1].col2" type="hidden" value="d" />

您可以通过修复AddRow方法来完成此操作。这是一个简单的解决方案，我正在读取表行长度并使用它来派生索引。根据您的HTML标记/客户端代码，对此进行调整。您只需要采用上述格式的正确名称属性值。

function AddRow(val1, val2) {
    var index = $('#table1 tr').length-1;
    var col1 = '<input name="[' + index+'].col1" type="text" value="' + val1 + '" />';
    var col2 = '<input name="[' + index +'].col2" type="text" value="' + val2 + '" />';
    $('#table1 tbody:last').append('<tr><td>' + col1 + '</td><td>' + col2 + '</td></tr>');
}

在MVC中提交临时html表的替代方法

1 个答案: