提交 Ajax.BeginForm 将目标 div 替换为整个页面答案

【问题标题】：Submitting an Ajax.BeginForm replaces the target div with the whole page提交 Ajax.BeginForm 将目标 div 替换为整个页面
【发布时间】：2017-07-19 01:03:38
【问题描述】：

我有一个部分视图，其中包含一个用于获取数据以插入/更新数据库记录的表单。具有此局部视图的页面显示没有问题。填写数据并发布表格可以正常工作（记录已正确保存到数据库中）。问题是虽然我返回了部分视图 (return PartialView();)，但系统将目标 div 替换为整个页面（而不仅仅是部分视图）！！

从以上症状可以理解为：

响应的控制器是正确的（记录保存在数据库中）。
没有缺少必要的js脚本（确实ajax替换了页面的一部分）

请注意，部分视图以Layout = "" 开头（因此它不引用任何布局）。我也用Layout = null 进行了测试，结果相同。

其他细节：

Visual Studio 社区 2015
容器页面通过 Umbraco CMS 实现。

局部视图：

@using FLATS;

@model TMSCounterpartyModel
@{
    Layout = "";

    TMSCounterpartyModel myModel = (TMSCounterpartyModel)Model;

    Html.EnableClientValidation(true);
    Html.EnableUnobtrusiveJavaScript(true);

    AjaxOptions ajaxOpt = new AjaxOptions {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "frmEditCounterparty"
    };
}

@using(Ajax.BeginForm("HandlePost", "EditTMSCounterparty", null, ajaxOpt, new { @id="editCptyForm" }))
{

    @Html.AntiForgeryToken()

    <div class="row">

        <fieldset>
            @Html.HiddenFor(model => model.Id)

...

                <div class="row margin-top-20">
                    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-8 col-md-offset-2">
                        <input id="btnSubmit" type="submit" value="Save" class="form-control" />
                    </div>
                </div>

        </fieldset>

    </div>
}

控制器：

public class EditTMSCounterpartyController : System.Web.Mvc.Controller
{
    [HttpPost]
    [ValidateAntiForgeryToken()]
    public PartialViewResult HandlePost(TMSCounterpartyModel model)
    {
        string viewPath = Library.PartialViewFullPath("EditCounterparty.cshtml");

        if (ModelState.IsValid == false)
        {
            return PartialView(viewPath, model);
        }

        if (model.Save() == true)
        {
            TMSCounterpartyModel newModel = new TMSCounterpartyModel();
            newModel.LoadOrDefault(model.Id);

            return PartialView(viewPath, newModel); 
        }
        else
        {
            return PartialView(viewPath, model);
        }
    }
}

感谢任何帮助。

提前谢谢你。

【问题讨论】：

调试控制台中是否有任何脚本错误？ necessary Ajax Unobtrusive scripts 加载了吗？
嗨，Jasen，感谢您花时间回答这个问题。调试控制台中没有 js 错误，正如我提到的，所有 js 脚本都已加载（jquery、jquery.validate、jquery.validate.unobtrusive、jquery.unobtrusive-ajax）。
通常，当您在 AJAX 请求上获得完整页面加载时，不会拦截默认浏览器操作（链接单击、表单提交）。通常，这是因为存在脚本错误或缺少必要的脚本。因为，情况并非如此，我可能会在一个新的基本 MVC 站点中尝试这个（从等式中删除 Umbraco）或直接使用 jQuery.ajax。
我也遇到了同样的问题，原来我的Controller返回的是View而不是PartialView

标签： c# ajax asp.net-mvc

【解决方案1】：

最后，问题似乎与地图路线有关。我添加了RouteTable.Routes.MapRoute("EditCpty", "EditTMSCounterparty/{action}", new { controller = "EditTMSCounterparty", action= "OpenForm" });，问题就解决了。

虽然，我仍然不明白为什么 MVC 找到了控制器，但它却弄乱了返回的 PartialViewResult。无论如何。

感谢大家的努力。

【讨论】：