Ajax.BeginForm unobtrusive ajax not firing

Question

У меня есть форма внутри частичного представления, форма не запускает javascript-метод на стороне клиента, указанный в AjaxOptions, и я не могу понять, почему.

У меня есть следующий вид.

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

Я также установил NuGet пакет для ненавязчивого-Аякса использования

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

и в моем web.config у меня есть

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

Наконец, я добавил ссылку ненавязчивого 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 обдувают действия контроллера, и ни один из моих АЯКСОВ журналов консоли не зарегистрированы.

Любые идеи, что я делаю неправильно здесь?

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.