jquery - 用 Kendo MVC 项目替换 Kendo Dialog 的内容？

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

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

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

所以我只想在打开对话框时加载 Treeview (或渲染它)，并在关闭时再次“清除”它。

关于如何解决这个问题的任何想法？

我试图用 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, ""))");

并且“有效”，但它不会呈现并且只显示原始 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")))

那里没有什么不寻常的地方。
当用户单击显示对话框的按钮时，在网格中调用一个函数，我将 Treeview 注入(inject)对话框，然后打开对话框，以下是我如何将生成的 Treeview 代码保存为 javascript 中的字符串并将其注入(inject)到对话框中(注意，为了便于阅读，上述方法中的周围代码已被删除):

$("#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”。

为了确保我不会因为一遍又一遍地替换 Treeview 而遇到麻烦，我在对话框中添加了一个事件，该事件在对话框关闭时清理 Treeview :

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

选择“隐藏”事件是因为这是对话框关闭时触发的最后一个事件。