C# 使用窗口中的自定义关闭按钮关闭kendoui窗口

C# 使用窗口中的自定义关闭按钮关闭kendoui窗口,c#,javascript,asp.net-mvc,modal-dialog,kendo-ui,C#,Javascript,Asp.net Mvc,Modal Dialog,Kendo Ui,我使用的是剑道UI的窗口组件,它类似于任何模式对话框 我有一个关闭按钮,如何在单击该按钮时关闭窗口(而不是单击标题栏中的默认“x”按钮) “我的窗口”中的内容是从另一个视图加载的 @(Html.Kendo().Window() .Name("window") .Title("Role") .Content("loading...") .LoadContentFrom("Create", "RolesPermi

我使用的是剑道UI的窗口组件,它类似于任何模式对话框

我有一个关闭按钮,如何在单击该按钮时关闭窗口(而不是单击标题栏中的默认“x”按钮)

“我的窗口”中的内容是从另一个视图加载的

@(Html.Kendo().Window()
           .Name("window")
           .Title("Role")
           .Content("loading...")
           .LoadContentFrom("Create", "RolesPermissions", Model.Role)
           .Modal(true)
           .Width(550)           
           .Height(300)           
           .Draggable()
           .Visible(false)
          )
在同样的观点下,我有

<span id="close" class="btn btn-inverse">Cancel</span>

剑道ui中有这样一个事件,应该是这样的

 $("#idofyourbutton").click(function () {
     $("#window").data("kendoWindow").close();
    });

在JavaScript中,HTML
window
是一个表示浏览器中打开的窗口的对象。尝试将
窗口定义为其他窗口

$(document).ready(function () {
    var wnd = $("#window").data("kendoWindow");

    $("#open").click(function (e) {
        wnd.center();
        wnd.open();
    });

    $("#close").click(function(e) {
        wnd.close();
    });
});

基本上,您已经知道如何关闭窗口-您需要使用其API的close方法来关闭窗口

$("#window").data("kendoWindow").close();
但是,为了将处理程序附加到视图内部的按钮,您需要等待内容被加载—您需要使用事件

e、 g


如果使用ajax加载的内容,Petur Subev的答案是完美的!我想给出一个使用模板的示例,它更简单(而不是所有请求都应该使用ajax)。 考虑下面的模板:

<script id="Template_Example1" type="text/kendo-tmpl">
<div class="i-contentWindow">
    <div>
        <a id="btn1" href="\#"><span class="k-icon k-i-cancel"></span>Button 1</a>
    </div>
</div>

这不起作用,因为加载到我的窗口中的内容属于另一个视图的内容。我在另一个视图中有一个id为“Close”的按钮。哦,你是说窗口中的buuton来自另一个视图。其他人还有其他想法吗?很好的解释,这正是我要找的!这个代码到哪里去了?在主视图的on ready功能中?我试过了,但是$('#theWindowId').data().kendoWindow未定义($('#theWindowId')).data()已定义,但不包含kendoWindow),您需要在初始化窗口后执行此操作。或者,您可以在配置窗口时首先指定刷新处理程序,就像这里使用的那样,那么close方法在哪里?
$('#theWindowId').data().kendoWindow.bind('refresh',function(e){
    var win = this;
    $('#close').click(function(){
         win.close();
    })
})
<script id="Template_Example1" type="text/kendo-tmpl">
<div class="i-contentWindow">
    <div>
        <a id="btn1" href="\#"><span class="k-icon k-i-cancel"></span>Button 1</a>
    </div>
</div>
function ExampleFn1(dataItem) {
    //create the template
    var template = kendo.template($("#Template_Example1").html());

    //create a kendo window to load content
    var kWindow = openKendoWindow({
        title: "Window Tests",
        iframe: false,
        resizable: false
    }).content(template(dataItem));

    // call window close from button inside template
    $("#btn1").click(function (e) {
        e.preventDefault();
        alert("btn1 on click!");
    });

    kWindow.open();
}