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"
        }
    })
)

我的viewmodel：

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"
        }
    })
)

最后，您必須在Index方法中填充ViewData中的默認值，或者直接在網格的DefaultValue填充默認值。