提交后剑道窗口呈现为整页答案

【问题标题】：kendo window render as full page after submit提交后剑道窗口呈现为整页
【发布时间】：2013-11-05 19:39:28
【问题描述】：

我正在打开一个包含局部视图的 kendo.window。当我单击确定时，我想保存我修改的数据，关闭窗口并重新加载基本页面。由于某种原因，它不起作用。它将部分视图作为整页打开。

我该如何解决这个问题？我应该如何让我的部分视图返回以使其不作为页面打开？

谢谢，

这是我目前所拥有的。

基本页面：

<div id="windowBadgeIMGDiv" class="k-content">
    <div id="windowBadgeIMG" style="display:none">
</div>

<script type="text/javascript">
    function editDetails(id) {
        var windowBadgeIMG = $("#windowBadgeIMG");
        windowBadgeIMG.kendoWindow({
            modal: true,
            width: "950px",
            title: "Modify badge picture",
            content: {
                url: "/Home/BadgePicture",
                data: { id: id }
            },
            deactivate: function () {
            }
        });

        windowBadgeIMG.data("kendoWindow").center();
        windowBadgeIMG.closest(".k-window").css({ top: 100 });
        windowBadgeIMG.data("kendoWindow").open();
    }
</script>

局部视图：

<%using (Html.BeginForm("BadgePicture", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "ImgForm", name = "ImgForm" }))
{ %>
    <input type="hidden" name="hdnBadgeId" id="hdnBadgeId" value="<%= Model.Id%>" />
    <table>
        <!--My editable fields go here-->
        <tr>
            <td style="padding-top: 20px;" align="center" colspan="4">
                <button id="btnSubmit" type="submit"><asp:Label runat="server" Text="<%$ Resources:Global, Update %>" /></button>
            </td>
        </tr>
    </table>
<%} %>

控制器

    [HttpPost]
    public PartialViewResult BadgePicture(string[] hdnBadgeId, HttpPostedFileWrapper Image1)
    {
        //Do some work with the data
        return PartialView(model);
    }

更新：我的解决方案

将modal: true, 替换为iframe: true, 为content: "/Home/BadgePicture/" + id,，并使用视图而不是PartialView。关闭提交窗口：Close Window from within External Content

【问题讨论】：

您应该将您的答案作为答案发布，并接受它！现在，您的解决方案在您的问题中丢失了，并且接受的答案实际上并不能解决您的问题。

标签： asp.net-mvc kendo-ui window submit

【解决方案1】：

你的意思是点击保存按钮后，结果是数据被发布然后响应呈现为整页？阅读代码，看起来这就是由于表单发布而发生的事情。

浏览器将用帖子的结果替换视图。您可能想尝试让 kendo 窗口使用 iframe，以便将帖子的结果限制在 iframe 中。但是，如果您这样做，那么您的部分应该是完整的 HTML 页面而不是部分，因为它将在自己的 iframe 中呈现。 http://docs.kendoui.com/api/web/window#configuration-iframe

或者，您将不得不 AJAX 发布您的窗口数据，而不是使用表单发布，然后替换剑道窗口的内容。

【讨论】：

感谢您的回答。我的印象是我无法通过 AJAX 发布文件上传（无论如何，从来没有让它工作）。并且想避开 iframe，但我想没有办法绕过它？
我没有看到剑道有用于剑道窗口的 iframe 属性。我工作。现在当我点击提交时如何让窗口自行关闭？

【解决方案2】：

可能完全不是同一个问题，但对我来说，这实际上是this issue 的一种表现——剑道窗口 AJAX 请求实际上被取消了，而是跟随链接 URL .很难追踪，因为在这种情况下也没有调用剑道窗口错误事件，而且我实际上没有设置浏览器导航到的链接。

就我而言，我是从自定义网格工具栏按钮创建窗口：

@(Html.Kendo().Grid<SomeViewModel>()
    .Name("grid")
    .ToolBar(t =>
    {
        t.Custom().Text("Add Item").HtmlAttributes(new { id = "AddItem" });
        // would also get the current page as a default URL
    })

    ...
)

然后通过javascript绑定它：

$("#AddItem").click(function (e) {
    openNewKendoWindow(); // would open link URL in whole page
});

解决方法是将e.preventDefault(); 添加到点击处理程序，尽管return false; 显然也可以工作：

$("#AddItem").click(function (e) {
    openNewKendoWindow();
    e.preventDefault();
});

这允许打开 Kendo 窗口，同时忽略 href 属性中的任何内容。

【讨论】：