MVC5에서 AJAX 호출 사용

Question

MVC5 프로젝트에서 웹에서 비슷한 예제로 AJAX 호출을 사용하려고했지만 오류가 발생할 때마다 antiforgerytoken, 500 등이 발생합니다. 적절한 AJAX 호출 메소드가 있습니다. 필요한 모든 속성을 갖고 View에서 Controller Action으로 모델 데이터를 보내는 Controller Action 메서드가 있습니다. 여기 내가 사용하는 방법은 다음과 같습니다

보기 :

@using (Html.BeginForm("Insert", "Account", FormMethod.Post, new { id = "frmRegister" })) 
{ 
    @Html.AntiForgeryToken() 
    //code omitted for brevity 
} 



<script> 

    AddAntiForgeryToken = function (data) { 
    data.__RequestVerificationToken = $('#__AjaxAntiForgeryForm input[name=__RequestVerificationToken]').val(); 
    return data; 
    }; 

$('form').submit(function (event) { 
     event.preventDefault(); 

     //var formdata = JSON.stringify(@Model); //NOT WORKING??? 
     var formdata = new FormData($('#frmRegister').get(0)); 
     //var token = $('[name=__RequestVerificationToken]').val(); //I also tried to use this instead of "AddAntiForgeryToken" method but I encounter another error 

     $.ajax({ 
      type: "POST", 
      url: "/Account/Insert", 
      data: AddAntiForgeryToken({ model: formdata }), 
      //data: { data: formdata, __RequestVerificationToken: token }, 
      //contentType: "application/json", 
      processData: false, 
      contentType: false, 

      datatype: "json", 
      success: function (data) { 
       $('#result').html(data); 
      } 
     }); 

    }); 
</script> 

컨트롤러 : 코드 antiforgerytoken 또는 유사한 문제로 인해이 작업 방법에 공격 할 수 없다.

[HttpPost] 
[AllowAnonymous] 
[ValidateAntiForgeryToken] 
public JsonResult Insert(RegisterViewModel model) 
{ 
    try 
    { 
     //... 
     //code omitted for brevity 
    } 
} 

MVC5의 CRUD 작업에 사용할 수있는 적절한 AJAX 및 Action 메소드가 필요합니다. 어떤 도움을 주시면 감사하겠습니다. UPDATE

: 여기 내가 명확히해야하는에 대한 몇 가지 포인트입니다 :

1) 우리는 "__RequestVerificationToken"를 사용하지 않았고 우리가 제대로 컨트롤러로 전송하면 나는 확실하지 않다 (이 보인다 파이어 버그의 요청 헤더에 쿠키로 존재하지만 괜찮은지 확실하지 않습니다.) 어떤 생각?

2) var formdata = new FormData ($ ('# frmRegister'). get (0))를 사용해야합니까? 파일을 업로드 할 때?

3)이 시나리오에서 processData 및 contentType을 사용하지 않는 이유는 무엇입니까?

4) 컨트롤러 메소드와 AJAX 메소드의 오류 부분이 정상입니까? 아니면 거기에 빠진 부분이 있습니까? 다음 중 하나 new FormData($('#frmRegister').get(0))를 사용하거나, 뷰에서 모델이 RegisterViewModel하고 올바르게 강하게 HtmlHelper 방법을 입력 사용하여 양식 컨트롤을 생성 한 경우

Answer 1

을 시도해야한다 $('#frmRegister').serialize()은 토큰을 포함하여 <form> 태그 내의 모든 양식 컨트롤 값을 올바르게 전송하므로 토큰을 다시 추가 할 필요가 없습니다. 양식 파일의 입력을 포함하지 않는 경우

, 다음 코드는

$('form').submit(function (event) { 
    event.preventDefault(); 
    var formData = $('#frmRegister').serialize(); 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("Insert", "Account")', // do not hard code your url's 
     data: formData, 
     datatype: "json", // refer notes below 
     success: function (data) { 
      $('#result').html(data); 
     } 
    }); 
}); 

이상 단순히

$.post('@Url.Action("Insert", "Account")', $('#frmRegister').serialize(), function(data) { 
    $('#result').html(data); 
}); 

당신이 파일을 업로드하는 경우, 그럼 당신은 당신이 FormData을 사용할 필요가 필요가 있어야한다 코드가 필요합니다 (this answer 및

$('form').submit(function (event) { 
    event.preventDefault(); 
    var formData = new FormData($('#frmRegister').get(0)); 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("Insert", "Account")', 
     data: formData, 
     processData: false, 
     contentType: false, 
     datatype: "json", // refer notes below 
     success: function (data) { 
      $('#result').html(data); 
     } 
    }); 
}); 

FormData으로 jQuery를 사용할 때 processData과 contentType을 모두 false로 설정해야합니다.

500(Internal Server Error)을받는 경우 거의 항상 컨트롤러 메서드에서 예외가 발생하고 있음을 의미합니다.귀하의 경우에는 success 콜백의 $('#result').html(data); 코드 줄로 제안 된 것처럼 일부 방법이 부분보기를 반환하지만 반환 유형은 json (datatype: "json", 옵션 사용)이어야한다고 지정했기 때문에 이것이 의심스러운 부분입니다. 즉 500(Internal Server Error)의 원인이 아닌 경우는 dataType 옵션을 지정할 필요가 없습니다 참고 다음 원인을 확인하려면 코드를 디버깅 할 필요가

을 (그 지정되지 않은 경우 .ajax() 방법은 그것을 밖으로 작동합니다) 퇴학. 브라우저 개발자 도구를 사용하여 프로세스를 지원할 수 있습니다. 네트워크 탭을 열고 기능을 실행하십시오 (기능 이름이 강조 표시됨). 클릭하고 응답을 검사하십시오. 그것은 추방 된 진찰의 세부 사항을 포함합니다.

Answer 2

의 contentType은 application/x-www-form-urlencoded

이 코드를

<script> 
$('form').submit(function (event) { 
     event.preventDefault(); 

    $.ajax({ 
     method: "POST", 
     url: "/Account/Insert", 
     data: $(this).serialize(), 
     contentType:"application/x-www-form-urlencoded", 
     success: function (data) { 
     $('#result').html(data); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      console.log(errorThrown); 
     } 
    }); 
}); 
    </script>