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庫。