用 Kendo MVC 项目替换 Kendo Dialog 的内容？答案

【问题标题】：Replace content of Kendo Dialog with a Kendo MVC item?用 Kendo MVC 项目替换 Kendo Dialog 的内容？
【发布时间】：2017-06-27 13:14:56
【问题描述】：

我有这个 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");
  }))

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

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

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

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

我试图用 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 代码，如下所示：

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

【问题讨论】：

您的替换内容不起作用，因为您不能使用 MVC 包装器语法将内容动态添加到 DOM，因为 MVC 包装器格式仅在构建从控制器返回的视图时在服务器上有效。您可以尝试使用等效的 javascript jquery 语法。
感谢您的回复。但是 AFAIK 它应该可以工作，因为 MVC 包装器所做的只是为您生成 javascript，它只是输出一些 html 和 javascript，由服务器在页面加载时生成。一旦它生成，它就像你自己制作的一样。这完全符合我的想法。它只是显示原始代码的对话框。我会用截图更新我原来的帖子。

标签： jquery asp.net-mvc kendo-ui kendo-asp.net-mvc kendo-treeview

【解决方案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();
}

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

【讨论】：