Post data from VueJs to ASP.NET CORE using Axios

As simple as this sounds , if you do not get it right then you can spend days trying to figure out why the data you post from Vuejs doesn’t get the ASPNET CORE controller action.

This was my scenario until i finally got it right.

First , what is Vuejs ?

According to wikipedia , Vue.js is a popular JavaScript front-end framework that was built to organize and simplify web development.

Secondly , what is Axios ?

Axios  is a javascript library for Promise based HTTP client for the browser and node.js

I spents hours trying to figure out why data i post from Vuejs doesn’t get to my Controller action in core until i figured out that for this to work then i need to set [FromBody] attribute on my action.

Let us see sample scenario

This is my View : Index.cshtml

    ViewData["Title"] = "Home Page";

<!doctype html>
<html lang="en">

    <meta charset="utf-8">
    <title>Vue To .NET CORE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">


<div id="app">
    <input name="firstName" v-model="firstName" placeholder="First Name"/>
    <input name="lastName" v-model="lastName" placeholder="Last Name"/>
    <button v-on:click="sendToServer">Submit</button>

<script src=""></script>
<script src=""></script>
<script src="/app/app.js"></script>

I added the Vuejs and Axios library via CDN.

Next is my Vuejs code

new Vue({

    el: "#app",
    data: {
        firstName: "",
        lastName: ""
    methods: {
        sendToServer: function () {

                    method: 'post',
                    url: '/home/index',
                    data: {
                        "firstName": this.firstName,
                        "lastName": this.lastName
                .then(function (response) {
                .catch(function (error) {



The ViewModel 

namespace VueJsToNetCore.ViewModel
    public class User
        public string LastName { get; set; }
        public string FirstName { get; set; }

And lastly is my AspNet Core Controller.

using Microsoft.AspNetCore.Mvc;
using VueJsToNetCore.ViewModel;

namespace VueJsToNetCore.Controllers
    public class HomeController : Controller
        public IActionResult Index()
            return View();

        public IActionResult Index([FromBody]User user)
            return View();

NOTE : If you post without the [FromBody] attribute on the Controller Action then the posted parameters will not get to the action.




Source code available on my github page.



One thought on “Post data from VueJs to ASP.NET CORE using Axios

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s