javascript - Ajax.Begin 正在使用 MVC 5 重新提交整个页面

Question

我对 MVC 5 Ajax.Begin 表单感到困惑。我过去使用过很多次，没有任何问题。

常见问题是开发人员忘记包含 jquery.unobtrusive-ajax.js 文件，但在本例中则不然。

我在 appSetting 部分的 webconfig 中启用了:

 <add key="ClientValidationEnabled" value="true" />
 <add key="UnobtrusiveJavaScriptEnabled" value="true" />

我包含了 3 个文件。

<script src="~/Scripts/assets/plugins/jquery/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

我什至将 Layout 设置为 null 以确保其他 js 文件不会中断。

<div id="contactSection">

</div>

@using (Ajax.BeginForm("SendContact", "Home", new AjaxOptions {UpdateTargetId = "contactSection" }))
        {
    <fieldset>

        <div class="row">
            <div class="form-group">
                <div class="col-md-4">
                    <label >Full Name *</label>

                    @Html.TextBoxFor(m => m.contactVM.fullName, new { @class = "form-control",  })
                </div>
                <div class="col-md-4">
                    <label >E-mail Address *</label>

                    @Html.TextBoxFor(m => m.contactVM.email, new { @class = "form-control", type = "email" })
                </div>
                <div class="col-md-4">
                    <label >Phone</label>
                    @Html.TextBoxFor(m => m.contactVM.phone, new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-8">
                    <label >Subject *</label>
                    @Html.TextBoxFor(m => m.contactVM.subject, new { @class = "form-control" })
                </div>

            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-12">
                    <label >Message *</label>

                    @Html.TextAreaFor(m => m.contactVM.message, new { @class = "form-control", maxlength = "10000", rows = "8" })
                </div>
            </div>
        </div>

    </fieldset>

                        <div class="row">
                            <div class="col-md-12">
                                <input type="submit" class="btn btn-primary">
                            </div>
                        </div>
}

在 Controller 中

    [HttpPost]
    public PartialViewResult SendContact(MainVM vModel)
    {
        vModel.contactVM.success = true;
        return PartialView("_ContactResults", vModel.contactVM);

    }

最后是部分 View

@if (Model.success)
{
 <!-- Alert Success -->
<div id="alert_success" class="alert alert-success margin-bottom-30">
    <button type="button" class="close" data-dismiss="alert" aria-   hidden="false">&times;</button>
    <strong>Thank You!</strong> Your message was successfully sent! As long it was not spam, we will get back to you asap.
    </div><!-- /Alert Success -->
 }
   else
{
<!-- Alert Failed -->
   <div id="alert_failed" class="alert alert-danger margin-bottom-30">
    <button type="button" class="close" data-dismiss="alert" aria-  hidden="false">&times;</button>
        <strong>[SMTP] Error!</strong> Sorry something went wrong, try again please!
</div><!-- /Alert Failed -->
 }

有什么想法吗？

Answer 1

解决了问题。在控制台中，我收到此错误 - Uncaught TypeError: a(...).live is not a function。据我所知，jquery 中的 live 函数很久以前就已经被弃用了。当我最初安装 nuget 包 Install-Package Microsoft.jQuery.Unobtrusive.Ajax 时，它安装了版本 2.0.20710 - 这是相当旧的。我必须重新安装 nuget 包并强制它下载版本 3.2.3