Opening multiple windows with Kendo menu

问题

I have a kendo menu and I'd like each menu to open a new window. How can I achieve that?

This is my current code in _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>

And I create this default window in my Index:

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

I have two problems with this code:

1. I want to have multiple windows.
2. Window's refresh button loads the old content from previous page.

回答1:

To have multiple windows you could create a partial view which you inject into your HTML code (@Html.Partial("MyGenericWindow")), ensuring you're generating a new window ID (name) each time.

Like this:

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

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

To fix the refresh issue try this:

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

回答2:

Well, this is my final solution. :)

JS script in _Layout:

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

The win action of Home controller:

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

My GenericWindow PartialView:

@model WindowViewModel

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

And WindowViewModel:

public class WindowViewModel
{
    public string Title { get; set; }
    public string Url { get; set; }
    public string Name { get; set; }
}

来源：https://stackoverflow.com/questions/29817307/opening-multiple-windows-with-kendo-menu