Ajax.BeginForm unaufdringlich Ajax nicht feuern

Question

Ich habe ein Formular in einer Teilansicht, das Formular feuert nicht die Client-Seite Javascript-Methode in den AjaxOptions angegeben und ich kann nicht sehen, warum.

Ich habe folgendes Formular.

@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> 

mit meiner js ist;

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

Ich habe auch installiert das nuget Paket für eine unauffällige-Ajax

mit

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

und ich habe in meinem web.config

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

schließlich habe ich die unaufdringliche Ajax-Verbindung zu meiner Bündelung hinzugefügt;

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

ich keine Konsole Fehler bei allen außer dem POST die Controller-Aktion trifft und keiner meiner Ajax-Konsolenprotokolle registriert sind.

Irgendwelche Ideen, was ich hier falsch mache?

Answer 1

Ihr Code sieht gut aus. Stellen Sie nur sicher, dass Ihr OnBegin Eigenschaftswert korrekt ist. Es sollte auf contact, nicht contatc

Dies sollte funktionieren contact.onBegin nicht contatc.onBegin

onBegin Funktion definiert sein.

Ich habe diesen Code ausprobiert und protokolliert die Nachrichten auf meiner Konsole. Sie können auch die Bibliothek jquery.validate.unobtrusive.js mit einschließen