如何将 kendo ui mvc 网格绑定到对象列表

Question

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

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

我遇到的问题是编写索引的 HiddenFor 和 CheckBoxFor 辅助方法。

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

<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 网格包装器的 服务器 端绑定来实现这一点？

我尝试使用在网格外部定义的计数器，并在 .RowAction 和绑定列内对其进行递增，但结果好坏参半，没有给我想要的结果。

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 网格绑定 $("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
    }
)