如何手动关闭Kendoui弹出窗口

Question

我将kendo-ui控件与asp.net MVC一起使用。我有两种不同的看法。

edituser.cshtml
changepasssword.cshtml

当用户点击编辑用户页面中的更改密码按钮时，会弹出更改密码页面。这个页面有自己的保存按钮。我想在更改密码后关闭保存按钮上的弹出窗口。

EditUser.cshtml代码：

<div id="winUserInfo" style="display: none; overflow: hidden;"></div>
  var winUserInfo = $('#winUserInfo');
if (!winUserInfo.data('kendoWindow')) {
    winUserInfo.kendoWindow({
        width: 400,
        height: 140,
        title: 'Change Password',
        modal: true,
        iframe: true
    })
    }

   $('#btnChangePwd').click(function (e) {
    e.preventDefault();
    var w = winUserInfo.data('kendoWindow');
    w.refresh({
        url: '/tools/ChangePassword/?loginID=@(Model.LoginID)'
    }).open().center();
});

ChangePassword.chtml代码：

    <div style="padding: 10px;">
<table class="data-form">
    <tr>
        <td style="text-align: right;"><label>New Password</label></td>
        <td><input id="txtPassword1" class="required" type="password" style="width: 200px;" /></td>
    </tr>
    <tr>
        <td style="text-align: right;"><label>Re-type New Password</label></td>
        <td><input id="txtPassword2" class="required" type="password" style="width: 200px;" /></td>
    </tr>
</table>
<div style="padding-top: 15px;">
    @*<button id="btnClose" class="k-button" onclick="javascript:window.close();">Close</button>*@
    <button id="btnSaveCP" class="k-button"">Save</button>
    <span id="loader"></span>
    <label id="lblMessage" style="display: none; color: green;"></label>
</div>

   <script type="text/javascript">
    $('#btnSaveCP').click(function () {
    var d = JSON.stringify({
        password1: $('#txtPassword1').val(),
        password2: $('#txtPassword2').val(),
        loginID: '@(ViewBag.LoginID)'
    });
    nf.control.disable($('.k-button'));
    nf.progress.start($('#loader'));
    $('#lblMessage').hide();
    nf.ajax(
        "/Users/ChangePassword",
        d,
        function (e) {
            nf.control.enable($(".k-button"));
            nf.progress.stop($('#loader'));
            if (e.HasError) {
                nf.msgBox.error(e.ErrorMessage);
                return;
            }
            $('#lblMessage').html('Password has been changed').show();
            $('#txtPassword1').val('');
            $('#txtPassword2').val('');
        },
        function (e) {
            nf.control.enable($(".k-button"));
            nf.progress.stop($('#loader'));
            nf.msgBox.ajaxError(e);
        }
    );
});
$(function () {
    $('#txtPassword1').focus();
});

我想在点击弹出窗口中的保存按钮时关闭弹出窗口（changepassword.cs.html）

感谢

Answer 1

当您想关闭弹出窗口时，点击保存按钮，写下以下内容：

$("#winUserInfo").data("kendoWindow").close();

Answer 2

我解决问题的方法。我设置iframe=false，并通过jquery调用了弹出窗口的关闭点击，如下所示。

$（'span.k-i-close'）.click（）；

它对我有效。

Answer 3

使用close()方法强制关闭剑道窗口实例。

顺便说一句，您应该在可观察对象中定义操作并将其绑定到视图，或者在Kendo Window实例中绑定功能，请参阅自定义操作绑定。

示例：

var localView: kendo.View = new kendo.View(
    'foo',
    {   
        // Your function is data; bind it to the view
        // you could change your template s.t. 
        //    a clickable has data-bind="click: mySaveFunction"
        model: { mySaveFunction: mySaveFunction },
        evalTemplate: true,
        init: function() {
        // another way: inject the custom save logic into 
        // the kendo window when it is constructed
            $("<div />").append(localView.render())
                .appendTo("body")
                .kendoWindow({
                    actions: ["customSave"]
                    modal : true,
                    pinned: true,
                    resizable : false,                                                                   
                    title : "Confirm Delete",
                    width: 500
                }).data("kendoWindow").wrapper.find("#custom-save")
                    .click(function(e) {
                        //save logic
                        alert("Saved");
                        this.close();
                    }).center().open();
            }
    });