使用 Vue.JS 和 Axios 在 Asp.Net Core 中发布错误答案

【问题标题】：Error Posting in Asp.Net Core with Vue.JS and Axios使用 Vue.JS 和 Axios 在 Asp.Net Core 中发布错误
【发布时间】：2017-12-01 05:02:23
【问题描述】：

大家好！

我是使用 Vue.JS 的新手，我在使用 axios 发布对象时遇到问题，并且所有属性都收到空值。

这是我的简单模型：

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

这是我发布的 html 和 vue.js 代码

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

这是我的控制器接收空信息。

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

当我在 Create 方法中设置断点时，它成功触发了断点，这意味着从客户端到后端，有连接。但问题是，当我检查员工的值时，它们都是空的。

【问题讨论】：

你能说明哪里出了问题吗？错误信息或类似信息？
@Qwertie 我更新了这个问题。请参考最后一句
我认为我们需要从您的 F12 网络选项卡中查看帖子正文，以及员工类的 c# 代码！

标签： javascript asp.net vue.js vue-component

【解决方案1】：

我猜你的 javascripts 中没有错误。你只需要在你的控制器中使用它

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

只需在您的 post 方法中使用此代码

[FromBody]

【讨论】：

【解决方案2】：

我不是 100% 确定，但根据示例 here，我认为 this.data 是未定义的。您可以尝试以下方法：

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

或者根据this文档的更简单的方法：

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

如果这对您不起作用，那么您可以通过在浏览器中打开开发者控制台（按 F12）来调试页面并在线调试以检查 this 的值：

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

【讨论】：

【解决方案3】：

我遇到了同样的问题，总是接收空对象，并且在我的头在桌子上敲了几个小时之后，可能是您的员工类只是缺少要创建的对象的空构造函数。

在里面添加：

public class Employees
{
    public Employees() 
    { 
    }

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

【讨论】：