The main objectives of this article are:
- Create HTTP POST Endpoint In API Project.
- Create VueJS Component With A Form To Add New Item.
Create A Post Endpoint Action Method In The API Project:
Let's create an HTTP Post action method to save a new record into the database.
API_Project/Controllers/BeachController.cs:
[HttpPost] public async Task<IActionResult> Post(Beach newBeach) { _myWorldDbContext.Beach.Add(newBeach); await _myWorldDbContext.SaveChangesAsync(); return Ok(newBeach); }
- (Line: 1) The 'HttpPost' attribute invokes our action method for HTTP Post requests.
- (Line: 2) Here our action method should receive the item to add as payload data.
- (Line: 4) Our new record data instance adding to the database context.
- (Line: 5) The 'SaveChangesAsync()' method inserts the new record into the database.
Create An 'AddBeach' Component In VueJS Application:
Let's create the new vuejs component like 'AddBeach' in 'src/views/beaches' folder.
In 'src/router/index.js' configure route for our 'AddBeach' component.Vue_App/src/router/index.js:
import { createRouter, createWebHistory } from 'vue-router' import BeachList from '../views/beaches/BeachList.vue' import AddBeach from '../views/beaches/AddBeach.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: BeachList }, { path:'/add', name:'add-beach', component: AddBeach } ] }) export default router
- (Line: 12-16) The '/add' route is defined for our 'AddBeach' component.
Create Form To Consume HTTP Post API Call In Vue Application:
Let's add a form in 'AddBeach' component to add a new item by invoking the HTTP POST endpoint.
Vue_App/src/views/beaches/AddBeach.vue:
<script setup> import axios from "axios"; import { reactive } from "vue"; import { useRouter } from "vue-router"; let newBeach = reactive({ beachName: "", place: "", imageUrl: "", }); const router = useRouter(); const addBeach = () => { axios.post("http://localhost:5247/Beach", newBeach).then(() => { router.push("/"); }); }; </script> <template> <div class="container mt-4"> <form @submit.prevent="addBeach"> <legend>Add New Beach & It's Location</legend> <div class="mb-3"> <label for="txtBeachName" class="form-label">Beach Name</label> <input type="text" v-model="newBeach.beachName" class="form-control" id="txtBeachName" /> </div> <div class="mb-3"> <label for="txtPlace" class="form-label">Place</label> <input type="text" v-model="newBeach.place" class="form-control" id="txtPlace" /> </div> <div class="mb-3"> <label for="txtImageUrl" class="form-label">Image URL</label> <input type="text" v-model="newBeach.imageUrl" class="form-control" id="txtImageUrl" /> </div> <button type="submit" class="btn btn-primary">Add</button> </form> </div> </template>
- (Line: 1) The 'setup' attribute added to the script tag that represents we are using the composition API approach.
- (Line: 5-9) The 'reactive' type loads from 'vue' library. The 'reactive' type is appropriate for creating models for the form binding. Here we defined properties like 'beachName', 'place', and 'imageUrl' which can use for form binding
- (Line: 11-15) The 'addBeach' method contains logic to invoke the HTTP Post method.
- In vue to enable the form model binding we will use 'v-model' attribute. Each form field must be decorated with the 'v-model'.
- (Line: 20) The '@submit.prevent' event raises on clicking the form submit button, but it won't reload the page since we configured the 'prevent' event. Here '@submit.prevent' is registered with 'addBeach' method.
Vue_API/src/views/beaches/BeachList.vue:
<script setup> import { ref, onMounted } from "vue"; import axios from "axios"; import { useRouter } from "vue-router"; const beachCollection = ref([]); const router = useRouter(); onMounted(() => { axios.get("http://localhost:5247/Beach").then((response) => { beachCollection.value = response.data; }); }); const navigateToAddPage = () =>{ router.push("/add"); } </script> <template> <div class="container"> <div class="row mt-2"> <div class="col col-md-4 offset-md-4"> <button type="button" @click="navigateToAddPage" class="btn btn-primary">Add</button> </div> </div> <div class="row row-cols-1 row-cols-md-3 g-4 mt-2"> <div class="col" v-for="item in beachCollection" :key="item.id"> <div class="card"> <img :src="item.imageUrl" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">{{ item.beachName }}</h5> <p class="card-text">Location: {{ item.place }}</p> </div> </div> </div> </div> </div> </template>
- (Line: 8) Defined 'router' variable of type 'useRouter' that loads from the 'vue-router' library.
- (Line: 16-18) The 'navigateToAddPage' method contains logic for navigating to the 'AddBeach.vue' component.
- (Line: 23-25) Here 'Add' button configured, '@click' represents the click event for the button. Here click the event registered with the 'navigateToAddPage' method.
(Step 2)
(Step 3)
In the next, article we are going to implement the UPDATE Operation.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on the .NET 7 Web API and Vue(3.0) application. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-4 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Part-6 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Part-6 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Comments
Post a Comment