javascript - Ajax.BeginForm unobtrusive ajax not firing -

i have form inside partial view, form not firing client side javascript method specified in ajaxoptions , cannot see why.

i have following form.

@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>             instant callback fill in 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 name..." } })                 @html.validationmessagefor(x => x.name, null, new { @class = "text-danger" })                  @html.editorfor(x => x.telephone, new { htmlattributes = new { @class = "form-control", placeholder = "enter 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> 

with js is;

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 contents         // injected <div id="result"></div> node         console.log("ajax success func");         $.validator.unobtrusive.parse($(result));     } }; 

i have installed nuget package unobtrusive-ajax using

install-package microsoft.jquery.unobtrusive.ajax

and in web.config have

<add key="webpages:enabled" value="false" /> <add key="clientvalidationenabled" value="true" /> <add key="unobtrusivejavascriptenabled" value="true" /> 

finally, have added unobtrusive-ajax link bundling;

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

i no console errors @ post hitting controller action , none of ajax console logs registered.

any ideas doing wrong here?

your code looks fine. make sure onbegin property value correct. should contact.onbegin not contatc.onbegin

onbegin function defined on contact, not contatc

this should work.

@using (ajax.beginform(                         "quickcontact",                         "contact",                         new ajaxoptions                         {                             onfailure = "contact.onfailure",                             onbegin = "contact.onbegin",                             oncomplete = "contact.oncomplete",                             onsuccess = "contact.onsuccess",                             updatetargetid = "quickcontactform"                         })) {   <!-- form controls goes here -->  } 

i tried code , logged messages console.

you may want include jquery.validate.unobtrusive.js library well.