用 Kendo MVC 项替换 Kendo 对话框的内容？

Question

我有这个 kendo mvc ui 项目：

@(Html.Kendo().Dialog()
  .Name("Details")
  .Title(GetText("menutreeselectionbutton", "Role/ManageRoleTemplates"))
  .Content(
      Html.Kendo().TreeView()
          .Name("menuTreeView")
          .TemplateId("treeview-template")
          .LoadOnDemand(false)
          .AutoScroll(true)
          .DataSource(source =>
          {
              source.Model(model => model.Id("MenuItemId")
                  .HasChildren("HasChildren"))
              .Read(read => read.Action("_GetMenuItems", "Role").Data("GetRoleIdFromHiddenField"))
              .Events(e => e.RequestEnd("requestEndHandler"));
          })
          .ToHtmlString()
    )
  .Visible(false)
  .Modal(true)
  .Width(400)
  .Actions(actions =>
  {
      actions.Add().Text(GetText(Constant.CANCEL, Constant.TEXT_GLOBAL));
      actions.Add().Text(GetText(Constant.SAVE, Constant.TEXT_GLOBAL)).Primary(true).Action("saveMenuTreeSelection");
  }))

想法是有一个包含一些信息的网格，您可以为每个条目单击一个按钮，打开一个带有树视图的对话框，然后您可以在那里进行一些选择。

问题是，这个树视图是在页面加载时加载的，这会花费很多不必要的后端访问。当您关闭对话框并为网格中的另一个条目打开它时，它也会带来问题，因为显示了先前选择的树视图，同时获取了新数据以便可以重新加载。

所以我只想在打开对话框时加载树视图（或渲染它），并在关闭时再次"clear"它。

关于如何解决这个问题有什么想法吗？

我试图用 javascript 替换读取操作，但我无法让它工作。我也试过像这样替换内容（为了便于阅读，这里略作修改）：

$("#Details").data("kendoDialog").content("@(Html.Kendo().TreeView()
        .Name("menuTreeView")
          .TemplateId("treeview-template")
          .LoadOnDemand(false)
          .AutoScroll(true)
          .DataSource(source =>
          {
              source.Model(model => model.Id("MenuItemId")
                  .HasChildren("HasChildren"))
              .Read(read => read.Action("_GetMenuItems", "Role").Data("GetRoleIdFromHiddenField"))
              .Events(e => e.RequestEnd("requestEndHandler"));
          })
          .ToHtmlString().Replace(Environment.NewLine, ""))");

还有那个 "works"，但它不呈现，只显示原始 html 代码，如下所示：

我很茫然。它按原样运行良好，但根本不是最佳选择。

Answer 1

想出了我自己的解决方案。我会为任何解决类似问题并寻求帮助的人添加这个。这是对话框的代码：

@(Html.Kendo().Dialog()
  .Name("Details")
  .Title(GetText("menutreeselectionbutton", "Role/ManageRoleTemplates"))
  .Content(string.Empty)
  .Visible(false)
  .Modal(true)
  .Width(400)
  .Actions(actions =>
  {
      actions.Add().Text(GetText(Constant.CANCEL, Constant.TEXT_GLOBAL));
      actions.Add().Text(GetText(Constant.SAVE, Constant.TEXT_GLOBAL)).Primary(true).Action("saveMenuTreeSelection");
  })
  .Events(e => e
    .Hide("onDialogHide")))

没什么特别的。当用户单击显示对话框的按钮时，在网格中调用一个函数，我将树视图注入对话框，然后打开对话框，以下是我如何将生成的树视图代码保存为字符串 javascript 并将其注入对话框（注意，为了便于阅读，上述方法中的周围代码已被删除）：

$("#Details").data("kendoDialog").content('@Html.Raw(HttpUtility.JavaScriptStringEncode(Html.Kendo().TreeView()
                    .Name("menuTreeView")
                    .TemplateId("treeview-template")
                    .LoadOnDemand(false)
                    .AutoScroll(true)
                    .DataSource(source =>
                    {
                        source.Model(model => model.Id("MenuItemId")
                            .HasChildren("HasChildren"))
                        .Read(read => read.Action("_GetMenuItems", "Role").Data("GetRoleIdFromHiddenField"))
                        .Events(e => e.RequestEnd("requestEndHandler"));
                    })
                    .ToString()))');

请注意我如何使用 Razor（或 MVC）的助手来编码 Kendo 的输出，还将 "ToHtmlString" 更改为 "ToString"。

为了确保我不会运行因反复更换树视图而遇到麻烦，我向对话框添加了一个事件，当对话框关闭时它会清理树视图：

function onDialogHide(e) {
    $("#menuTreeView").data("kendoTreeView").destroy();
    $("#menuTreeView").remove();
}

选择 "Hide" 事件是因为这是对话框关闭时触发的最后一个事件。

用 Kendo MVC 项替换 Kendo 对话框的内容？

Replace content of Kendo Dialog with a Kendo MVC item?

asp.net-mvc

jquery

kendo-ui

kendo-treeview

kendo-asp.net-mvc