我想重用包含 ajax 表单的 Kendo Window

Question

我有一个包含 ajax 表单的 Kendo UI 窗口。我面临的问题是，在成功 POST 之后，我关闭了窗口，我重新打开了窗口以重用它，但是下次我提交表单时它会 POST 两次，依此类推。如果我第三次提交，它将发布三次等等。

我已经尝试过使用 destroy() 函数，从 DOM 中完全删除窗口，然后通过 jQuery 重建它，但效果相同。我还尝试在使用标记代码加载窗口之前清空窗口的内容。

我一直在阅读 Telerik 的 documentation，他们建议将 UpdateTargetId 放在表单之外，我也尝试过同样的效果。我知道缺少某些东西，但我无法确定它。

我应该如何继续使用带有表单的 Kendo Window 作为可重复使用的窗口（不发布与我使用窗口相同的编号）？

我在窗口内的 ajax 表单：

//abbreviated
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
//abbreviated
<div id="paymentFormId">
    @using (Ajax.BeginForm("action", "controller", new { id = id }, new AjaxOptions
        {
            HttpMethod = "POST",
            UpdateTargetId = "paymentFormId",
            InsertionMode = InsertionMode.Replace,
            LoadingElementId = "loader"
        }, new { id = "payment-form" }))
    {
        @Html.Partial("PaymentForm", new PaymentForm())
    }
</div>
//abbreviated

我的 PaymentForm 标记：

//abbreviated
//bunch of text fields to submit
//abbreviated
<button type="submit" class="k-button">Submit</button>
<button onclick="closeWindow()" class="k-button">Close</button>

我的窗口声明：

@(Html.Kendo().Window()
    .Name("Window")
    .Title("My Win")
    .Content("Loading info...")
    .Modal(true)
    .Draggable()
    .Visible(false)
    .HtmlAttributes(new { style = "padding: 10px 15px; max-width: 400px;" })
    .AutoFocus(true)
    .Position(p => p.Top(100).Left(400))
    .Events(e => e.Close("onWindowClose"))
)

一些脚本：

//This script is the one that triggers the window to open
function openWindow(id) {
    var window = $("#Window").data("kendoWindow");
    window.refresh({
        url: "/controller/action",
        data: {
            id: id
        },
        error: function (xhr, textStatus, exceptionThrown) {
            window.close();
            alert($.parseJSON(xhr.responseText));
        }
    });
    window.open();
}

//This is the registered close event
function onWindowClose(e) {
    var id = $("#ID").val();
    if (id != null) {
        $.ajax("/controller/action", {
            type: "POST",
            dataType: "json",
            data: {
                id: id
            },
            success: function (data) {
                //TODO: derp
            },
            error: function (xhr, textStatus, exceptionThrown) {
                alert($.parseJSON(xhr.responseText));
            }
        });
    }
    //var myWin = new $("#Window").data("kendoWindow");
    //myWin.destroy();
    $(this.element).empty();
    $(this.element).html("Loading content...");
}

Answer 1

我有一个我重用的剑道窗口，其中包含一个表单元素，该元素又包含一些文本输入框和一个文件输入框。为了防止该表单重新提交文件输入，我在剑道窗口关闭时重置了表单。我不得不在主线程之外完成它，以防止通过调用类似的东西来阻止正在发生的 POST

closeAddAttachmentWindow: function () {
        var window = $("#addAttachmentWindow").data("kendoWindow");
        window.close();

        setTimeout(function () {
            $("#formUpload").trigger('reset');
        }, 200);
    },

您是否在 OnWindowClose(e) 函数中尝试过类似的操作？