Kendo 具有可编辑枚举列的 MVC 网格

Question

我有一个简单的模型，需要在 Kendo 的 MVC 网格组件中显示和编辑。

public class MyModel
{
    public int Id {get; set;}
    public string SomeProperty {get; set;}
    public MyEnum MyEnum {get; set;}
}

public enum MyEnum
{
    FirstItem = 1,
    SecondItem = 2,
    ThirdItem = 3
}

我的网格设置如下：

@(Html.Kendo()
    .Grid<MyModel>()
    .Name("grid").Columns(columns =>
    {
        columns.Bound(o => o.SomeProperty).Width(200);
        columns.Bound(o => o.MyEnum).Width(200);
        columns.Command(command =>
        {
            command.Edit().Text("Edit");
        }).Width(220);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(false)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.SomeProperty);
            model.Field(p => p.MyEnum);

        })
        .Create(...) // removed for confidentiality
        .Read(...)
        .Update(...)
        .Events(...)
    ).Filterable()
  .Sortable())

执行编辑命令后，我在 Update(...) 中定义的控制器方法中收到更新的模型。

public virtual async Task<ActionResult> Update(
        [DataSourceRequest] DataSourceRequest request,
        MyModel myModel)

但是无论我做什么，控制器中的 myModel 默认值为 MyEnum。即使我只更改 MyEnum 设置为 SecondItem 的项目的 SomeProperty，它在控制器中也将是 FirstItem。这已通过查看 POST 请求得到验证，因此问题出在网格中的某处，而不是服务器上。

如何进行正确的数据绑定以确保 Kendo 发送正确的 MyEnum 值？

Answer 1

您的模型中可能存在冲突，因为您的枚举对象属性与类型匹配。建议您将其重命名为这样的名称并尝试一下；

public class MyModel
{
    public int Id {get; set;}
    public string SomeProperty {get; set;}
    public MyEnum EnumProperty {get; set;}
}

Answer 2

我遇到了同样的问题。您应该为 MyEnum 属性:

使用 EditorTemplate（Shared\EditorTemplates 文件夹中的MyEnum.cshtml）

@model MyEnum

@(Html.Kendo().DropDownListFor(m => m)
   .Name("MyEnum")
   .BindTo(EnumHelper.GetSelectList(Model.GetType()))
   .OptionLabel("Please select MyEnum"))

Answer 3

您需要在列上使用 .ForeignKey() 而不是绑定：

@(Html.Kendo()
    .Grid<MyModel>()
    .Name("grid").Columns(columns =>
    {
        columns.ForeignKey(o => o.MyEnum, ).EditorTemplateName("GridForeignKey").Width(200);

        // SNIP

然后像这样在 Views/Shared/EditorTemplate 中定义 GridForeignKey.cshtml：

@model object

@{
    var selectList = (SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"];
}

@Html.DropDownListFor(m => m, selectList, "Choose...")

通过这种方式，您可以在网格中获得一个下拉菜单，并将在 POST 上将正确的值输入到您的控制器中。

Kendo 具有可编辑枚举列的 MVC 网格

Kendo MVC grid with editable enum column

c#

asp.net

kendo-ui

kendo-grid

kendo-asp.net-mvc