Ajax.BeginForm 눈에 띄지 않는 아약스가 발사되지 않습니다.

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> 

with my 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 패키지를 설치 한 Microsoft.jQuery.Unobtrusive.Ajax

패키지를 설치하고 내 Web.config의에서 나는

이

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

마지막으로, 내 번들링에 눈에 잘 띄지 않는 아약스 링크를 추가했습니다.

 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.onBegincontatc.onBegin

onBegin 기능을하지 contatc

이 작동합니다, contact에 정의되어 있지.

@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 라이브러리도 포함 할 수 있습니다.