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 asp.net 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">

<head>
    <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">
</head>

<body>

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

</div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></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 () {

            axios({
                    method: 'post',
                    url: '/home/index',
                    data: {
                        "firstName": this.firstName,
                        "lastName": this.lastName
                    }
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(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
    {
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        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.

Page

pagecode

 

Source code available on my github page.

 

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s