asp.net-mvc - Kendo UI DropDownListFor html 包装器 - 如何将 BindTo 设置到模型中的集合？而不是 ViewData 或 Viewbag

Question

我正在学习 Kendo UI。我们正在努力将 Kendo UI 用于 MVC 应用程序 View 中的所有内容。

我正在尝试绑定(bind)到 Kendo 网格每一行中的模型对象内的集合。我们使用 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属性以获取列表该应用程序的角色...足够简单吧？

按照我现在设置的方式，选择“编辑”按钮后会显示下拉列表，但下拉列表是空的!链接到下拉列表的图像，其中没有任何内容:/image/bEcMw.png

我一直在尝试更改编辑器模板中的 BindTo 以引用 Model.appRolesList，但每次我都会收到空指针异常，因为我猜模型没有传递给此 dropdownlistFor 帮助程序？不确定...

我的团队对于如何实现此功能有点困惑。我们对使用剑道都相当陌生，因此小组中没有专家来了解此类情况的来龙去脉。

预先感谢您花时间阅读本文! :)

编辑:看起来外键方法将是实现此功能的最佳方法，但我在尝试从外键 html 包装器引用集合时遇到了问题。当我回到办公 table 前时，我会发布另一个代码片段

使用代码片段编辑 2:

这是更新后的网格，仅使用 .ForeignKey 引用而不是 .Bound。在此示例中，我仍在努力引用 AppRolesForUserVM 对象中的对象列表...有人可能有这样做的语法吗？我在 Kendo 演示中看到的大多数示例都相当简单，它们引用存储在 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 完成此操作，但另一个选择是创建一个返回角色的 Controller 操作并使用它:

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 是您将读取操作放入其中的 Controller ，ToSelectList 是我们编写的用于创建 IEnumerable 的扩展方法。

编辑我能够用来实现此功能的 final方法:我已经实现了此功能，并且它使用与此答案中类似的方法，只是稍微调整了一下。

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

@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")调用以下函数，该函数获取正在编辑的数据行，然后获取该行第一列的值；其中包含我想要传递给 Controller ​​的读取操作的 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>