Ajax.BeginForm不引人注目的ajax不触发

Question

我在局部视图中有一个表单，该表单没有触发AjaxOptions中指定的客户端javascript方法，我看不到为什么。

我有以下表格。

@model QuickContact

<div id="quickContactForm" class="row">
    <div class="col-md-4 push-md-9 box">

        <h4>Quick Contact</h4>

        <div id="contactForm"></div>

        <p>
            For an instant callback simply fill in the form below.
        </p>

        @using (Ajax.BeginForm(
            "QuickContact",
            "Contact",
            new AjaxOptions
            {
                OnFailure = "contact.onFailure",
                OnBegin = "contatc.onBegin",
                OnComplete = "contact.onComplete",
                OnSuccess = "contact.onSuccess",
                UpdateTargetId = "quickContactForm"
            }))
        {
            @Html.AntiForgeryToken()

            <div class="form-group">
                @Html.EditorFor(x => x.Name, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your name..." } })
                @Html.ValidationMessageFor(x => x.Name, null, new { @class = "text-danger" })

                @Html.EditorFor(x => x.Telephone, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your telephone..." } })
                @Html.ValidationMessageFor(x => x.Telephone, null, new { @class = "text-danger" })

                <input type="submit" class="btn btn-block btn-primary" value="Submit" />
            </div>
        }

        <div id="loading" class="row">
            <div class="col-md-12">
                <p class="text-lg-center">
                    <i class="fa fa-spinner" aria-hidden="true"></i>
                </p>
            </div>
        </div>

    </div>
</div>

用我的js是;

var contact = {

    onBegin: function() {
        console.log("loading...");
        $('#loading').show();
    },

    onComplete: function() {
        console.log("complete");
        $("#loading").hide();
    },

    onFailure: function(ajaxContext) {
        console.log("error occured.");
        var response = ajaxContext.responseText;
        alert("Error Code [" + ajaxContext.ErrorCode + "] " + response);
        $('#loading').hide();
    },

    onSuccess: function(result) {
        // enable unobtrusive validation for the contents
        // that was injected into the <div id="result"></div> node
        console.log("ajax success func");
        $.validator.unobtrusive.parse($(result));
    }
};

我还使用以下方法安装了用于unajax-ajax的nuget软件包：

安装包Microsoft.jQuery.Unobtrusive.Ajax

在我的web.config中

<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

最后，我在捆绑中添加了unobtrusive-ajax链接；

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive-ajax.js",
                    "~/Scripts/jquery.validate*",
                    "~/Scripts/tether/tether.js"));

我完全没有控制台错误，但是POST击中了控制器操作，并且我的ajax控制台日志都未注册。

有什么想法我在这里做错了吗？

Answer 1

您的代码看起来不错。 只要确保您的OnBegin属性值正确即可。 应该是contact.onBegin而不是contatc.onBegin

onBegin函数是在contact而不是contatc上定义的

这应该工作。

@using (Ajax.BeginForm(
                        "QuickContact",
                        "Contact",
                        new AjaxOptions
                        {
                            OnFailure = "contact.onFailure",
                            OnBegin = "contact.onBegin",
                            OnComplete = "contact.onComplete",
                            OnSuccess = "contact.onSuccess",
                            UpdateTargetId = "quickContactForm"
                        }))
{
  <!-- Your form controls goes here -->

}

我尝试了此代码，并将消息记录到控制台。

您可能还希望包括jquery.validate.unobtrusive.js库。