代码之家 › 专栏 › 技术社区 › Frederik T

用剑道MVC项替换剑道对话框的内容?

kendo-treeview kendo-asp.net-mvc kendo-ui asp.net-mvc jquery

Frederik T · 技术社区 · 7 年前

我有一个剑道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代码,如下所示:

我不知所措。它工作正常,但根本不是最优的。

1 回复 | 直到 7 年前

Frederik T 7 年前

我自己想出了一个解决方案。我只为任何解决类似问题并寻求帮助的人添加这个。

@(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)的助手对剑道的输出进行编码,还将“ToHtmlString”更改为“ToString”。

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

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