Question

我在kendo-ui使用asp.net MVC控件。我有两种不同的观点。

edituser.cshtml
changepasssword.cshtml

当用户从编辑页面点击更改密码按钮时，它会弹出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闭'）点击（）;

它对我有用。

Answer 3

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

顺便说一下，您应该在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();

            }

    });

如何手动关闭Kendoui弹出窗口

3 个答案: