asp.net-mvc-4 - 如何将 kendo ui mvc 网格绑定(bind)到对象列表

Question

我正在尝试使用 kendo ui mvc 包装网格绑定(bind)到对象列表。

此外，我在每行的第一列添加了一个复选框，并且网格是表单中的包装器。然后，我想在提交时利用(顺序或非顺序)列表的默认模型绑定(bind)。

我遇到的问题是写 隐藏和 复选框对于 被索引的辅助方法。

如果我要自己编写表格布局，它将是这样的:

<table>
    <tbody>
        @for (var i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    <input type="hidden" name="Index" autocomplete="off" value="@i" />
                    @Html.HiddenFor(m => Model[i].Id)
                    @Html.CheckBoxFor(m => Model[i].Selected)
                </td>
                ...

这将产生以下 HTML 输出。

<input type="hidden" name="Index" autocomplete="off" value="0" />
<input id="[0].Id" name="[0].Id" type="hidden" value="1234" />
<input id="[0].Selected" name="[0].Selected" type="checkbox" value="true" />
<input name="[0].Selected" type="hidden" value="false" />

怎么可能？服务器 使用 kendo ui mvc 网格包装器进行侧面绑定(bind)？

我尝试使用在网格外部定义的计数器并在 .RowAction 和绑定(bind)列内增加它，但结果不一，没有给我想要的结果。

var counter = 0;
@(Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Id)
            .Template(
                @<text>
                    <input type="hidden" name="Index" autocomplete="off" value="@counter" />
                    @Html.HiddenFor(m => Model[counter].Id)
                    @Html.CheckBoxFor(m => Model[counter].Selected)
                </text>)
                ...

我遇到的问题是增加计数器。也许有更好的解决方案？

我做的另一个尝试是自己编写表格 html，然后应用 javascript 网格绑定(bind) $("grid").kendoGrid(...)。但是，我随后失去了在我的 tr/td 元素上动态定义 css 类的能力。

Answer 1

试试这样(未经测试):

var counter = -1;
@(Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns
            .Bound(c => c.Id)
            .Template(
                @<text>
                    @{counter++;}
                    <input type="hidden" name="Index" autocomplete="off" value="@counter" />
                    @Html.HiddenFor(m => m[counter].Id)
                    @Html.CheckBoxFor(m => m[counter].Selected)
                </text>);

        ... some other columns
    }
)