Kendo UI DropDownListFor html wrapper - 如何将 BindTo 设置为模型中的集合？而不是 ViewData 或 Viewbag

Question

我正在学习剑道 UI。我们正朝着 MVC 应用程序视图中的所有内容使用 Kendo UI 的方向发展。

我正在尝试绑定到模型对象内的集合，该模型对象位于剑道网格的每一行中。我们正在使用 EditorTemplate 来实现下拉菜单，这对几个更简单的示例都有效。

然而，在这种情况下，我们正试图通过该对象中的属性值过滤此下拉菜单的来源。

模型对象：

public class AppRolesForUserVM
{
    public int AppId { get; set; }
    public string appName { get; set; }
    public AppRole appRole { get; set; }
    public AppUser appUser { get; set; }
    public List<AppRole> appRolesList { get; set; }

}

网格中的片段：

 @(Html.Kendo().Grid<AppRolesForUserVM>()
              .Name("ApplicationGrid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.AppId).Title("Application Id").Width(50);
                  columns.Bound(p => p.appName).Title("Application Name").Width(100);                    
                  columns.Bound(p => p.appRole.Id).ClientTemplate("#=appRole.Name#").EditorTemplateName("AppRolesForUser").Title("AppRole").Width(100);  // ***** 

上面代码的最后一列是我们一直在尝试实现这个下拉菜单的地方。它指的是editorTemplateName AppRolesForUser，如下：

AppRolesForUser EditorTemplate：

@model AdminAuthorization.Models.ViewModels.AppRolesForUserVM

@(Html.Kendo().DropDownListFor(p => p.appRole.Id)
    .Name("appRole.Id")
    .DataTextField("Name")
    .DataValueField("Id")
    .BindTo((IEnumerable)ViewData["ListOfRoles"]) // ***** 
)

我标记 **** 的地方是我希望弄清楚如何根据模型对象 AppRolesForUserVM 的输入参数实际提取数据的地方...传递 appId 属性以获取列表该应用程序的角色...够简单吧？

按照我现在设置的方式，选择“编辑”按钮后会显示下拉列表，但下拉列表是空的！链接到没有任何内容的下拉菜单：http://i.stack.imgur.com/bEcMw.png

我一直在尝试将编辑器模板中的 BindTo 更改为引用 Model.appRolesList，但每次我得到空指针异常，因为我猜模型没有被传递给这个 dropdownlistFor 助手？不确定...

我的团队在如何实现此功能上有些困惑。我们都是刚接触剑道的新手，因此在涉及到这类情况的来龙去脉时，团队中没有专家。

提前感谢您抽出宝贵时间阅读本文！ :)

编辑：似乎外键方法将是实现此功能的最佳方式，但我在尝试从外键 html 包装器中引用集合时遇到了问题。回到办公桌后，我将发布另一个代码 sn-p

使用代码 sn-p 编辑 2：

这是更新后的网格，仅使用 .ForeignKey 引用而不是 .Bound。在此示例中，我仍在努力引用 AppRolesForUserVM 对象中的对象列表...可能有人有这样做的语法吗？我在 Kendo Demos 中看到的大多数示例都非常简单，它们引用存储在 ViewData 或 ViewBag 中的集合。

 @(Html.Kendo().Grid<AppRolesForUserVM>()
                  .Name("ApplicationGrid")
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.AppId).Title("Application Id").Width(50);
                      columns.Bound(p => p.appName).Title("Application Name").Width(100);
                      columns.ForeignKey(p => p.appRole.Id, q.appRolesList).ClientTemplate("#=appRole.Name#").Title("App Role").Width(100);

Answer 1

我没有使用 EditorTemplate 完成此操作，但另一种选择是创建一个返回角色并使用它的控制器操作：

public JsonResult ReadRoles(int id)
{
    var roleList = context.Roles.Where(r => r.AppId == id).OrderBy(r => r.Name).ToSelectList(r => r.Id.ToString(), r => r.Name);
    var result = Json(roleList, JsonRequestBehavior.AllowGet);
    return result;
}

然后你的下拉菜单变成这样：

@(Html.Kendo().DropDownListFor(p => p.appRole.Id)
    .Name("appRole.Id")
    .DataSource(source => source.Read(read => read.Action("ReadRoles", "App", new { id = @Model.AppId })
    .DataTextField("Name")
    .DataValueField("Id")
    .HtmlAttributes(new {data_value_primitive = "true"})
)

其中 App 是您将读取操作放入其中的控制器，而 ToSelectList 是我们为创建 IEnumerable 而编写的扩展方法。

使用我能够用来使其工作的最终方法进行编辑：我已经得到了这个工作，它使用的方法与此答案中的方法类似，只是稍作调整。

我现在使用的下拉编辑器模板代码是：

@model Project.Models.ViewModels.AppRolesForUserVM

@(Html.Kendo().DropDownListFor(p => p.appRole.Id)
    .Name("appRole.Id")
    .DataSource(source => source.Read(read => read.Action("ReadRoles", "App").Data("onRead")))
    .DataTextField("Name")
    .DataValueField("Id")
    .HtmlAttributes(new { data_value_primitive = "true" })
)

数据源声明中的.Data("onRead")调用如下函数，获取正在编辑的数据行，然后从该行的第一列获取值；其中包含我要传递给控制器​​的读取操作的 ID：

    <script type="text/javascript">
        function onRead(e) {
            var row = $(event.currentTarget).find(".k-grid-edit-row");
            var id = row.find("td:first").html();
            return { id: id };
        }
    </script>