如何在不使用ViewData的情况下将对象属性绑定到DropDownList中的数据源

Question

我的kendo Grid中有一个DropDownList列。我想将DataSource中的ViewData [“genres”]更改为GenreViewModel属性“AllGenres”。我怎样才能做到这一点？不要忘记我使用js版本的Grid（不是mvc）。

我认为应该看起来像：

dataSource: @html.Raw(new System.Web.Script.Serialization.javascriptSerializer().Serialize("AllGenres"))

要么

dataSource: "AllGenres"

反对：

dataSource: @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewData["genres"]))

我的DropDownList：

function genreDropDownEditor(container, options) {
    $('<input required name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataTextField: "GenreName",
            dataValueField: "GenreId",
            dataSource: @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ViewData["genres"]))               
});
<script type="text/kendo" id="genresTemplate">
    #if(data.Genre != null)
    { #

    #: Genre.GenreName #

    # } #

我的GenreViewModel：

public class GenreViewModel
{
    public int GenreId { get; set; }
    public string GenreName { get { return Enum.GetName(typeof(Genre), GenreId); } }

    public static List<GenreViewModel> AllGenres
    {
        get
        {
            return Enum.GetValues(typeof(Genre)).Cast<Genre>().Select(v => new GenreViewModel
            {
                GenreId = ((int)v)
            }).ToList();
        }
    }
}