如何手动关闭 Kendoui 弹出窗口

Question

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

edituser.cshtml
changepasssword.cshtml

当用户从 edituser 页面单击更改密码按钮时，它会弹出 ChangePassword 页面。此页面有自己的保存按钮。我想在更改密码后关闭弹出的保存按钮。

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.cshtml 代码：

    <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.cshtml）

谢谢

Answer 1

当你想关闭弹出窗口时，在点击保存按钮时写下：

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

Answer 2

我做了什么来解决这个问题。我设置了 iframe = false 并通过 jquery 调用了弹出窗口的关闭单击，如下所示。

$('span.k-i-close').click();

它对我有用。

Answer 3

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

顺便说一句，您应该在 observable 中定义动作并将其绑定到视图，或者在 Kendo Window 实例中绑定功能，请参阅custom action bindings。

例子：

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

            }

    });