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

我的/共享/ 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; } 
} 

的問題是，我不能結合從下拉列表到模型的值，當我從列表中選擇它們，然後編輯另一本書時，列表中的值消失。

這個實現有什麼問題，我怎麼才能做到這一點，同時使用Google搜索幾十個相同的答案，根本沒有給我提供任何幫助。

那麼，通過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")) 
    ) 

我的ViewModels：

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中。