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

我的剑道网格中有一个下拉列表列。我想将DataSource中的ViewData[“genres”]更改为GenreViewModel属性“AllGenres”。我该怎么做?别忘了我使用的是js版本的网格(不是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"]))

我的下拉列表:

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();
        }
    }
}