HTTP POST Request VUE+WEB API

public object Addrecord(Records Record) {
    EmployeeInfo ct = new EmployeeInfo();
    ct.Name = Record.Name;
    ct.City = Record.City;
    ct.Age = Record.Age;
    ct.Tech = Record.Tech;
    DB.EmployeeInfoes.Add(ct);
    DB.SaveChanges();
    return new Response {
        Status = "Success", Message = "Record SuccessFully Saved."
    };
}

Postdata controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using PostDataDemo.Models;
namespace PostDataDemo.fonts
{
    public class PostdataController : ApiController
    {
        EmployeeEntities DB = new EmployeeEntities();
        [HttpPost]
        public object Addrecord(Records Record)
        {
            EmployeeInfo ct = new EmployeeInfo();
            ct.Name = Record.Name;
            ct.City = Record.City;
            ct.Age = Record.Age;
            ct.Tech = Record.Tech;

            DB.EmployeeInfoes.Add(ct);
            DB.SaveChanges();
            return new Response
            { Status = "Success", Message = "Record SuccessFully Saved." };
        }
    }
}

Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines:

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");      
config.EnableCors(cors)

Create VueJS Project

Now create a new VueJS project using the following command.

vue create pacs

Now open this project in Vs code and install bootstrap.

npm install bootstrap-vue bootstrap --save

Now open the main.js file and import bootstrap reference.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Now install Axios by using the following command.

npm i axios

Now right click on the components folder and add a new component named 'Postdata.vue'.No open Postdata.vue component and add the following code.

<template>
    <div>
        <div class="container" style="margin-top:10px;margin-bottom: 24px;">    
    <div class="col-sm-12 btn btn-success">    
     HTTP POST Request VUE+WEB API
    </div>    
  </div>
 <div class="container">
  <form @submit.prevent="PostData11">
    <div class="form-group " style=" margin-bottom: 10px;">     
      <input type="text" class="form-control" id="Name" v-model="Employee.Name" placeholder="Enter Name" >
    </div>
    <div class="form-group" style=" margin-bottom: 10px;">    
      <input type="text" class="form-control" id="Age" v-model="Employee.Age" placeholder="Enter Age" >
    </div>
    <div class="form-group" style=" margin-bottom: 10px;">    
      <input type="text" class="form-control" id="City" v-model="Employee.City" placeholder="Enter City" >
    </div>
    <div class="form-group" style=" margin-bottom: 10px;">    
      <input type="text" class="form-control" id="Tech" v-model="Employee.Tech" placeholder="Enter Tech" >
    </div>    
    <button type="submit" class="btn btn-info">Submit</button>
  </form>
</div>
    </div>
</template>
<script>
import axios from 'axios';
    export default {
        name:"Postdata",
        data() {
       return {
      employees: [],
       Employee:{
                Name:"",
                City:"",
                Age:"",
                Tech:""
            }
    };        
    },
     methods: {
     PostData11(){    
         axios.post('https://localhost:44349/api/Postdata/Addrecord',this.Employee).then(res=>{
           console.log(res);
         })         
       }
     }
    }
   </script>
  <style lang="scss" scoped>
</style>

Now open App.vue component and import the Postdata component. add the following code in App.vue component.

<template>
  <div id="app">
   <Postdata/>
  </div>
</template>
<script>
import Postdata from './components/Postdata.vue'
export default {
  name: 'App',
  components: {
    Postdata
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Now run the application by using 'npm run serve' command and enter some data and click on Submit button.

Summary

In this article, we learned how to send a post request from Vue to Web API.