在剑道窗口内时，局部视图中的 MVC4 Ajax 表单返回整个页面

Posted 2023-05-07

【中文标题】在剑道窗口内时，局部视图中的 MVC4 Ajax 表单返回整个页面

【英文标题】：MVC4 Ajax form in partial view returns whole page when inside kendo window

【发布时间】：2013-09-17 09:31:48

【问题描述】：

我一直在寻找和寻找，我一​​生都无法弄清楚我做错了什么。我有一个像这样的 Kendo UI 窗口：

<a id="@(item.POD_ID)"  class="k-button btn-reminder" title="Add Reminder" onclick="$('#windowR@(item.POD_ID)').data('kendoWindow').open();"><span class="icon-reminder icon-only btn-reminder"></span></a
    @(html.Kendo().Window()
    .Name("windowR" + item.POD_ID)
    .Title("Set Reminder")
    .Content("loading...")
    .LoadContentFrom("_LoadReminder", "Purchasing", new  id = item.POD_ID )
    //.Iframe(true)
    .Draggable()
    //.Resizable()
    .Modal(true)
    .Visible(false)
    .Width(200)
    .Height(80)
    .Events(events => events
        .Close("onCloseReminder")
        .Open("onOpenReminder")
        .Deactivate("function()  this.refresh();")
        .Activate("function() $('#empNumBox').focus(); ")
    )
)

而且，如果窗口是 iframe，所有这些都可以正常工作，但是我不能将它作为 iframe，因为这意味着重新加载其中的所有脚本和样式，并且更难以引用父级。

所以这个窗口，像这样从局部视图中加载内容：

@using (Ajax.BeginForm("SetReminders", "Purchasing", new AjaxOptions  UpdateTargetId = "result" ))

<div id="result"></div>
<input type="number" id="empNumBox" name="empNum" style="width: 70px" class="k-textbox" required autofocus="autofocus" value="@(ViewBag.EMP_NUM)"/>
<input type="hidden" value="@ViewBag.POD_ID" name="podID" id="POD_ID_Form_Field"/>
<input type="submit" id="submitReminder_button" style="width:auto;" class="k-button submitReminder_button" value="Remind" />

该局部视图也可以很好地呈现。这是问题所在，当您提交 ajax 表单时，并且 kendo 窗口不是 iframe，它会将整个页面呈现为控制器返回的任何内容（我已经尝试了几件事，您可以在下面注释掉的代码中看到：

        [HttpPost]
    public ActionResult SetReminders(int empNum, int podID)
    
        //some database stuff that works fine

        string response;
        if (existingReminder == 0)
        
            //more db stuff that also works fine
            db.SaveChanges();
            response = "Success!";
        
        else
        
            response = "Reminder exists.";
            //return PartialView("_LoadReminder", new string[]  "Reminder already exists!" );
        
        // $('#submitReminder_button').closest('.k-window-content').data('kendoWindow').close();
        //alert('Hello world!');
        //return Content("<script type='text/javascript/>function()alert('Hello world!');</script>");
        return PartialView("_SubmitSuccess");
        //return Json(response);
        //return Content(response, "text/html");
    

如果有人好奇，_SubmitSuccess 包含的只是“成功！”这个词。

这是我发现的一个示例，其中 ajax 响应被放入一个 div 中，我遵循了该示例： http://pratapreddypilaka.blogspot.com/2012/01/htmlbeginform-vs-ajaxbeginform-in-mvc3.html

看来这里真正的问题是剑道窗口，但我还没有在他们的论坛上找到关于这个的东西，似乎没有很多使用剑道窗口加载提交的局部视图的例子通过 ajax 形成并返回要在同一窗口中加载的不同部分视图，并且不使用 iframe。

欢迎任何建议，即使是关于代码的其他部分，我一直在寻求改进。

【问题讨论】：

你能检查一下你是否返回PartialView吗？或者你的局部视图没有参考布局

返回的局部视图是局部视图，如果这就是您的意思，它没有对 _Layout.cshtml 的引用，尽管我会很高兴只是返回 Content("some text here")只要它在同一个窗口中，但无论我返回什么，它都会占据整个新页面。

【参考方案1】：

尝试将SetReminders()的返回类型改为PartialViewResult

【讨论】：

你能验证（通过调试+设置断点）它正在命中那个动作方法吗？

我以前对此很有信心（因为它确实返回了正确的东西，只是在整个页面上而不是在剑道窗口内，但是我只是仔细检查以非常确定，并且它确实击中了动作方法。

你能验证_SubmitSuccess实际上是一个部分吗？您可以在视图顶部添加@ Layout=null; 以确保。

我将其创建为局部视图，并且我只是添加了 @ Layout=null; 以确保得到相同的结果。