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));
    }
};

我还安装了用于 unobtrusive-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 库。