Vue.JS 및 Axios로 Asp.Net 코어에 게시 할 때 오류가 발생했습니다.

Question

안녕하십니까!

저는 Vue.JS를 사용하는 데있어 새로운 기능이 있습니다. 액시스를 사용하여 객체를 게시 할 때 문제가 있으며 모든 속성이 null 값을 받았습니다.

public class Employees 
{ 
    public int Id {get;set;} 
    public string Firstname {get;set;} 
    public string Lastname {get;set;} 
} 

가 여기 내 HTML이고

<div id="app"> 
    <form> 
     <input type="text" v-model="Firstname" /> 
     <input type="text" v-model="Lastname" /> 
     <button type="button" @@click="submitInfo"> Submit </button> 
     <! -- In Razor, we use @@ instead of single @ in order to use the shorthand code of vue.js for @ --> 
    </form> 
</div> 
<!-- All scripts are imported in the layout page so vue.js and axios.js is already in there --> 

@section Scripts{ 
    <script> 
     var app = new Vue({ 
      el: "#app", 
      data:{ 
       Firstname: "", 
       Lastname: "" 
      }, 
      methods:{ 
       submitInfo(){ 
        axios.post("Employees/Create",this.data) 
        .then(function(response){...}) 
        .catch(function(error){...}); 
       } 
      } 
     }); 
    </script> 
} 

을 게시 코드를 vue.js 그리고 여기에 널 (null) 정보를 수신 내 컨트롤러 :

여기 내 간단한 모델입니다. 내가 작성 방법에 중단 점을 넣을 때 클라이언트가 백 엔드에 이르기까지, 거기에 연결되어 있음을 의미하므로

[HttpPost] 
public async Task<IActionResult> Create(Employees employees) 
{ 
... 
} 

, 그것은 성공적으로 중단 점을 트리거합니다. 하지만 문제는 직원의 가치를 확인할 때 모두 null입니다.

Answer 1

: 라인에 브라우저 (보도 F12) 및 디버그 this의 값을 검사합니다. 당신은 당신이 무엇이 잘못되었는지 보여줄 수

[HttpPost] 
public async Task<IActionResult> Create([FromBody]Employees employees) 
{ 
... 
} 

그냥 게시물 방법

[FromBody] 

Answer 2

나는 100 % 확실하지 않지만 this.data가 예제 here에 따라 정의되지 않았다고 생각합니다. this 설명서에 따라

methods:{ 
    submitInfo(){ 
     axios.post(
     "Employees/Create", 
     { 
      Firstname: this.Firstname, 
      Lastname: this.Lastname 
     } 
    ) 
     .then(function(response){...}) 
     .catch(function(error){...}); 
    } 
} 

아니면 간단한 방법 : 다음을 시도 할 수

methods:{ 
    submitInfo(){ 
     axios.post(
     "Employees/Create", 
     this.$data 
    ) 
     .then(function(response){...}) 
     .catch(function(error){...}); 
    } 
} 

당신이 당신이에서 개발자 콘솔을 열어 페이지를 디버깅 할 수 있습니다에 대한 문제가 해결되지 않으면 나는 당신의 자바 스크립트에 오류가 없습니다 추측

methods:{ 
    submitInfo(){ 
     debugger;//it should break here, use the console to see what this is 
     axios.post(
     "Employees/Create", 
     this.$data 
    ) 
     .then(function(response){...}) 
     .catch(function(error){...}); 
    } 
}