Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140788

Error Posting in Asp.Net Core with Vue.JS and Axios

$
0
0

Good day everyone!

I'm new in using Vue.JS and I'm having a problem in posting object using axios and all the properties received a null values.

Here's my simple Model:

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

Here's my html and vue.js codes for posting

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

And here's my controller that receives the null info.

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

When I put breakpoint in the Create method, it successfully triggers the break point so it means that from client to back-end, there are connected. But the problem is, when I check the values of employees, they are all null.


Viewing all articles
Browse latest Browse all 140788

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>