使用剑道菜单打开多个窗口

Posted

技术标签:

【中文标题】使用剑道菜单打开多个窗口【英文标题】:Opening multiple windows with Kendo menu 【发布时间】:2015-07-01 06:37:54 【问题描述】:

我有一个剑道菜单,我希望每个菜单都打开一个新窗口。我怎样才能做到这一点?

这是我在_layout中的当前代码:

<div class="k-rtl">
@(html.Kendo().Menu()
    .Name("menu")
    .Items(items =>
    
        items.Add().Text("Menu 1").Items(child =>
        
            child.Add().Text("1").LinkHtmlAttributes(new  onClick = "menu('1');" );
            child.Add().Text("2");
        );
    )
)
</div>
<script>
function menu(text) 
    var window = $("#win1").data("kendoWindow");
    switch (text) 
        case "1":
            window.refresh( url: "@Url.Action("Index", "1")" ).title("1");
            break;
        case "2":
            window.refresh( url: "@Url.Action("Index", "2")" ).title("2");
            break;
    
    window.open();

</script>

我在我的索引中创建了这个默认窗口:

@(Html.Kendo().Window()
    .Name("win1")
    .Title("default")
    .LoadContentFrom("Index", "default")
    .Draggable()
    .Resizable()
    .Actions(actions => actions.Close().Minimize().Refresh())
    .Position(p => p.Top(100))
)

这段代码有两个问题:

    我想要多个窗口。 窗口的刷新按钮会加载上一页的旧内容。

【问题讨论】:

【参考方案1】:

要拥有多个窗口,您可以创建一个局部视图,将其注入您的 HTML 代码 (@Html.Partial("MyGenericWindow")),确保每次都生成一个新的窗口 ID(名称)。

像这样:

@
    var windowId = Guid.NewGuid().ToString();


@(Html.Kendo().Window()
    .Name(windowId )
    .Draggable()
    .Resizable()
    .Actions(actions => actions.Close().Minimize().Refresh())
    .Position(p => p.Top(100))
)

要解决刷新问题,试试这个:

function menu(text) 
    var window = $("#@windowId").data("kendoWindow");
    window.title(text);
    window.refresh(
        url: '@Url.Action("Index")',
        data:  myParam: text 
    );

    window.bind("refresh", function () 
        window.center();
        window.open();
    );

【讨论】:

谢谢 Vash。它解决了刷新问题。我只是不明白在哪里渲染我的局部视图以及如何获取它的句柄来加载内容?我在 js 代码中遇到错误。 我目前正在尝试这样的事情:var a = $(".body-content").append("@Html.Partial("_GenericWindow")"); 嘿Vash,你看到我的评论了吗!?我在等待! :D 对不起,我周末不使用 ***。 :)【参考方案2】:

嗯,这是我的最终解决方案。 :)

_Layout中的JS脚本:

<script>
function menu(text) 
  $('.body-content').load('/Home/win?window='.concat(text));

</script>

Home 控制器的win 动作:

public ActionResult win(string window)

    WindowViewModel model = new WindowViewModel();
    model.Name = window;
    switch (window)
    
        case "1":
        default:
            model.Title = "1";
            model.Url = Url.Action("Index", "1");
            break;
        case "2":
            model.Title = "2";
            model.Url = Url.Action("Index", "2");
            break;
    
    return PartialView("GenericWindow", model);

我的GenericWindowPartialView:

@model WindowViewModel

@(Html.Kendo().Window()
    .Name(Model.Name)
    .Draggable()
    .Actions(actions => actions.Close().Minimize().Refresh()).LoadContentFrom(Model.Url)
    .Title(Model.Title)
)

还有WindowViewModel:

public class WindowViewModel

    public string Title  get; set; 
    public string Url  get; set; 
    public string Name  get; set; 

【讨论】:

以上是关于使用剑道菜单打开多个窗口的主要内容,如果未能解决你的问题,请参考以下文章

如何防止剑道抽屉在点击时折叠? (角度 - 剑道用户界面)

如何操作页面多个窗口?

剑道网格单元模板中的引导下拉菜单

在剑道时间选择器中选择时间时,剑道 UI Angular 过滤器菜单会自动关闭

如何在 MVC 剑道树列表编辑器中实现剑道自动完成下拉菜单

剑道网格自定义列菜单