HTTP POST Request VUE+WEB API

Introduction

In this article, we will learn how to send a post request from VueJS to Web API.

Prerequisites

• Basic knowledge of VueJS and Web API
• Visual Studio
• Visual Studio Code
• SQL Server Management Studio
• Node.js Installed

Create a database and table

CREATE TABLE [dbo].[EmployeeInfo](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Name] [nvarchar](50) NULL,
	[City] [nvarchar](50) NULL,
	[Age] [nvarchar](50) NULL,
	[Tech] [nvarchar](50) NULL,
 CONSTRAINT [PK_EmployeeInfo] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

Create a Web API Project

Open Visual Studio and create a new project.

Now select the project and click on the Next button.

Now select the project name and project location and click on the Create button.

Choose the template as Web API.

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.

Click on the "ADO.NET Entity Data Model" option and click "Add".

Select EF Designer from the database and click the "Next" button.

Add the connection properties, select the database name on the next page, and click OK.

Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button.

Right-click on the Controllers folder and add a new controller. Name it "Postdata controller" and add the following namespace in the Postdata controller.

using PostDataDemo.Models;

Now, add a method to insert data into the database.

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.