asp.net-mvc-5 - 单击按钮时剑道窗口未关闭

Question

我创建了一个在剑道窗口中呈现的视图。我在视图上有取消按钮。当我单击取消按钮时，我想关闭窗口。我已经编写了代码来做到这一点。但似乎什么也没发生。

请参阅下面的代码和屏幕截图

剑道窗口代码

  $("#contextMenu").kendoContextMenu({
            target: "#grid",
            alignToAnchor: false,
            select: function (e) {
                var selectedItem = e.item; // check this item is add or edit and then open the kendo window

                if ($(selectedItem).text() == 'Add' || $(selectedItem).text() == 'Edit') {
                    var accessWindow = $("#addEdit").kendoWindow({
                        actions: {}, /*from Vlad's answer*/
                        draggable: true,
                        height: "700px",
                        modal: true,
                        resizable: false,
                        title: "Add new User",
                        width: "800px",
                        visible: false,


                    }).data("kendoWindow").center().open();

                    $("#btnCancel").click(function () {
                        $(this).closest("[data-role=window]").data("kendoWindow").close();
                    });

                    $("#language").kendoDropDownList({
                        filter: "startswith",
                        dataTextField: "LanguageDescription",
                        dataValueField: "LanguageCode",
                        dataSource: language
                        //dataSource: {

                        //    type: "odata",
                        //    serverFiltering: true,
                        //    transport: {
                        //        read: {
                        //            url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                        //        }
                        //    }
                        //}
                    });

                    $("#country").kendoDropDownList({
                        filter: "startswith",
                        dataTextField: "CountryDescription",
                        dataValueField: "CountryCode",
                        dataSource: country
                        //dataSource: {

                        //    type: "odata",
                        //    serverFiltering: true,
                        //    transport: {
                        //        read: {
                        //            url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                        //        }
                        //    }
                        //}
                    });



                }
            }
        });

在剑道窗口中呈现的视图

<div id="addEdit" style="width 100%; height 100%; background-color #fff;">
    <div class="demo-section k-content">
        <ul class="fieldlist">
           <li>
                <label for="simple-input" >Employee Number</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">ForeName</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">ForeName</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">Surname</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">Preferred Name</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input" class="form-horizontal">Language</label>
                <input id="language" class="form-horizontal" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">Country</label>
                <input id="country" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">Time Zone</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">Domain</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">Network Id</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">Email Address</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>
                <label for="simple-input">Status</label>
                <input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
            </li>
            <li>

                <button id="btnCancel" class="k-button">Cancel</button>&nbsp;
                <button class="k-button k-primary">Save</button>
            </li>




        </ul>
        <style>
            .fieldlist {
                margin: 0 0 -2em;
                padding: 0;
            }

                .fieldlist li {
                    list-style: none;
                    padding-bottom: 2em;
                }

                .fieldlist label {
                    display: block;
                    padding-bottom: 1em;
                    font-weight: bold;
                    text-transform: uppercase;
                    font-size: 10px;
                    color: #444;
                }
        </style>
    </div>




</div>

Answer 1

这已解决。我必须添加以下 jquery 来修复它

   $("#btnCancel").click(function () {
                                $(this).closest("[data-role=window]").data("kendoWindow").close();
                            });