The main objectives of this article are:
- Create HTTP Delete Endpoint In API Project.
- VueJS Application To Invoke The Delete API.
Create HTTP Delete Endpoint In API Project:
Let's create the HTTP Delete endpoint in the API project.
API_Project/Controllers/BeachController.cs:
[HttpDelete] [Route("{id:int}")] public async Task<IActionResult> Delete(int id) { var beachToDelete = await _myWorldDbContext.Beach.FindAsync(id); if (beachToDelete == null) { return NotFound(); } _myWorldDbContext.Beach.Remove(beachToDelete); await _myWorldDbContext.SaveChangesAsync(); return Ok(); }
- (Line: 1)The 'HttpDelete' attribute allows only HTTP delete requests to consume the action method.
- (Line: 2) The 'Route' attribute is defined where we need to pass the integer 'id' value in the route.
- (Line: 5) Based on the 'id' value try to fetch the record from the database.
- (Line: 6-9) Checking whether records exist in the database or not.
- (Line: 10) Using the 'Remove()' method we pass our record to be deleted from the database.
- (Line: 12) The 'SaveChangesAsync()' deletes the record from the database.
Create A 'ConfirmDeletePopup' VueJS Component:
Let's create 'ConfirmDeletePopup' VueJS component in 'src/components' folder, this component can be used as global and its functionality is to show a popup for deleting any kind of item from our Vue application.
Vue_App/src/components/ConfirmDeletePopup.vue:
<script setup></script> <template> <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Delete Confirmation!</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button> </div> <div class="modal-body">Are you sure to delete this item</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" > Close </button> <button type="button" @click="$emit('confirmdelete-click')" class="btn btn-danger">Confirm Delete</button> </div> </div> </div> </div> </template>
- Here we added the bootstrap modal HTML content.
- (Line: 5) Make sure to give 'id' attribute value for the bootstrap modal.
- (Line: 30) Here button click emits 'confirmdelete-click' which means we are trying to receive an event from the child component(ConfirmDeletePopup.vue) to the parent component(like 'BeachList.vue'). To emit the event we have to use '$emit()'.
Invoke Delete API Call In Vue Application:
Let's implement the delete operation logic in our 'BeachList.vue' component.
Vue_App/src/views/beaches/BeachList.vue:
<script setup> import { ref, onMounted } from "vue"; import axios from "axios"; import { useRouter } from "vue-router"; import ConfirmDeletePopup from "../../components/ConfirmDeletePopup.vue"; const beachCollection = ref([]); const itemToDeleteId = ref([0]); const router = useRouter(); let deleteModal; onMounted(() => { deleteModal = new window.bootstrap.Modal( document.getElementById("deleteModal"), { backdrop: true, } ); axios.get("http://localhost:5247/Beach").then((response) => { beachCollection.value = response.data; }); }); const navigateToAddPage = () => { router.push("/add"); }; const openDeleteModal = (id) => { itemToDeleteId.value = id; deleteModal.show(); }; const confirmDelete = () => { axios .delete(`http://localhost:5247/Beach/${itemToDeleteId.value}`) .then(() => { beachCollection.value = beachCollection.value.filter( (_) => _.id !== itemToDeleteId.value ); itemToDeleteId.value = 0; deleteModal.hide(); }); }; </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> <router-link class="btn btn-primary" :to="`/edit/${item.id}`" >Edit</router-link > <button type="button" @click="openDeleteModal(item.id)" class="btn btn-danger" > Delete </button> </div> </div> </div> </div> <ConfirmDeletePopup @confirmdelete-click="confirmDelete" ></ConfirmDeletePopup> </div> </template>
- (Line: 8) Define variable 'itemToDeleteId' of type 'ref'. This variable helps to store the item 'id' that we want to delete.
- (Line: 12) Declared the variable like 'deleteModal'.
- (Line: 15-20) Bootstrap instance assigned to the 'deleteModal'. Here we use the modal 'id' attribute value while creating the bootstrap instance.
- (Line: 30-33) The 'openDeleteModal' method contains logic to show the delete confirmation modal on clicking the delete button. Here we set the item to delete 'id' value to 'itemToDeleteId' variable.
- (Line: 35-45) The 'confirmDelete' method contains logic to invoke the delete API call. On successful deletion, we are going to update our 'beachCollection' variable and then hides the bootstrap modal.
- (Line: 17-76) Here we added the 'Delete' button and its click registered with the 'openDeleteModal' method.
- (Line: 81-83) Rendered our 'ConfirmDeletePopup' component and registered the '@confirmdelete-click' which reads the button click from the child component(ConfirmDeletePopup).
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.
Comments
Post a Comment