Asp.Net Core 中 Kendo Grid 中的 DropDownList

Question

我需要实现简单的下拉列表来选择预定义的文化。

我的网格：

@(Html.Kendo().Grid<NewLibrary.ViewModels.BookViewModel>()
    .Name("booksGrid")
    .Columns(column =>
    {
        column.Bound(m => m.Name);
        column.Bound(m => m.Culture).EditorTemplateName("CultureSelectorTemplate");
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create();
        toolBar.Save();
    })
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(10)
    )
    .HtmlAttributes(new { style = "border-style: double; border-width: 5px" })
    .Editable(e => e.Mode(GridEditMode.InCell))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        .Model(m =>
        {
            m.Id(f => f.BookId);
            m.Field(f => f.Name);
            m.Field(f => f.Culture);
        })
        .Create(create => create.Action("CreateBooks", "Books"))
        .Read(read => read.Action("ReadBooks", "Books"))
        .Update(update => update.Action("UpdateBooks", "Books"))
        .Destroy(destroy => destroy.Action("DeleteBooks", "Books"))
    )
)

我在 /Shared/EditorTemplates 中的编辑器模板：

@(Html.Kendo().DropDownList()
    .Name("Culture")
    .DataTextField("Text")
    .DataValueField("Value")
    .BindTo(new List<SelectListItem>()
    {
        new SelectListItem()
        {
            Text = "English",
            Value = "en"
        },
        new SelectListItem()
        {
            Text = "Spanish",
            Value = "es"
        },
        new SelectListItem()
        {
            Text = "French",
            Value = "fr"
        }
    })
)

我的视图模型：

public class BookViewModel
{
    public string BookId { get; set; }

    public string Name { get; set; }

    public string Culture { get; set; }
}

问题是，我无法将下拉列表中的值绑定到模型，当我从列表中选择它们，然后要编辑另一本书时，列表中的值消失了。

这个实现有什么问题，我怎样才能做到正确，同时谷歌搜索几十个相同的答案，什么也没给我。

那么，通过 Asp.Net Core 在 Kendo Grid 中实现 DropDownList 的正确方法是什么？

Answer 1

好的，一定是这样。

我的看法：

@(Html.Kendo().Grid<BookViewModel>()
        .Name("booksGrid")
        .Columns(column =>
        {
            column.Bound(m => m.Name);
            column.Bound(m => m.Culture).ClientTemplate("#=Culture.NativeName#").EditorTemplateName("CultureSelectorTemplate");
        })
        .ToolBar(toolBar =>
        {
            toolBar.Create();
            toolBar.Save();
        })
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(10)
        )
        .HtmlAttributes(new { style = "border-style: double; border-width: 5px" })
        .Editable(e => e.Mode(GridEditMode.InCell))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)
            .Model(m =>
            {
                m.Id(f => f.BookId);
                m.Field(f => f.Name);
                m.Field(f => f.Culture).DefaultValue(ViewData["defaultCulture"] as CultureViewModel);//new SelectListItem() { Text = "English", Value = "en" });
            })
            .Create(create => create.Action("CreateBooks", "Books"))
            .Read(read => read.Action("ReadBooks", "Books"))
            .Update(update => update.Action("UpdateBooks", "Books"))
            .Destroy(destroy => destroy.Action("DeleteBooks", "Books"))
        )
        .Events(e => e.DataBound("onGridDataBound"))
    )

我的视图模型：

 public class BookViewModel
    {
        public string BookId { get; set; }

        public string Name { get; set; }

        public CultureViewModel Culture { get; set; }
    }

 public class CultureViewModel
    {
        public string NativeName { get; set; }

        public string TwoLetterCode { get; set; }
    }

我的编辑器模板：

@model CultureViewModel
@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("NativeName")
    .DataValueField("TwoLetterCode")
    .BindTo(new List<CultureViewModel>()
    {
        new CultureViewModel()
        {
            NativeName = "English",
            TwoLetterCode = "en"
        },
        new CultureViewModel()
        {
            NativeName = "Spanish",
            TwoLetterCode = "es"
        },
        new CultureViewModel()
        {
            NativeName = "French",
            TwoLetterCode = "fr"
        }
    })
)

最后，您必须在索引方法中的ViewData 中填充您的默认值，或者直接在网格的DefaultValue 中。