Performing Update and Delete Operations in ASP.NET Core 3 Razor Pages Using Microsoft SQL Server

Introduction

This article is the continuation of the article “Inserting Data Into SQL Server Database Using ASP.NET Core 3 Razor Pages” where we have implemented the create razor page to insert a record inside the database. In this article, we will be working on editing and deleting a razor page to perform edit and delete functionality of the crud operations on the BookList objects in ASP.Net Core Razor Pages.

Creation of Edit razor page

Now we will create a razor page called Edit to edit and update the already-created data inside the SQL server database.

Performing Update And Delete Operations In ASP.NET Core 3 Razor Pages Using Microsoft SQL Server

For that to happen, we need to make changes inside the Ind.cshtml file. Inside the edit button anchor tag, we need to pass the routing that is the asp-page will be an Edit page that we will be creating soon.

@page
@model BookList.IndModel
<br />
<div class="container row p-0 m-0">
<div class="col-10">
<h2 class="text-info">Book List</h2>
</div>
<div class="col-2">
<a asp-page="Create" class="btn btn-info form-control text-white">Create New Book</a>
</div>
<div class="col-12 border p-3 mt-3">
<form method="post">
@if(Model.Books.Count()>0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="Books.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="Books.FirstOrDefault().Author"></label>
</th>
<th>
<label asp-for="Books.FirstOrDefault().ISBN"></label>
</th>
<th>
</th>
</tr>
@foreach(var item in Model.Books)
{
<tr>
<td>
@Html.DisplayFor(m => item.Name)
</td>
<td>
@Html.DisplayFor(m => item.Author)
</td>
<td>
@Html.DisplayFor(m => item.ISBN)
</td>
<td>
<button asp-page-handler="Delete" asp-route-id="@item.Id" onclick="return confirm('Are you sure you want to delete?')" class="btn btn-danger btn-sm">Delete</button>
<a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-success btn-sm text-white">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<p>No Books Available.</p>
}
</form>
</div>
</div>

Whenever the user clicks on the edit button, we want to pass the ID of the field that they are editing. In this case that would be the ID of the book. So in order to pass that, we will be using another tag helper that is asp route and the name of the property that we want to pass.

Here we want to pass the ID of the book. This way when a user clicks on edit, it will go the edit razor page and it will also pass the ID as a parameter.

So now we have to create a new razor page named Edit where we will be defining the edit functionality as well as a user interface to retrieve book data for editing and updating it according to the user's needs.

@page
@model BookList.EditModel
<br />
<h2 class="text-info">Edit Book</h2>
<br />
<div class="border container" style="padding:30px;">
<form method="post">
<input type="hidden" asp-for="Book.Id" />
<div class="form-group row">
<div class="col-4">
<label asp-for="Book.Name"></label>
</div>
<div class="col-6">
<input asp-for="Book.Name" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label asp-for="Book.Author"></label>
</div>
<div class="col-6">
<input asp-for="Book.Author" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label asp-for="Book.ISBN"></label>
</div>
<div class="col-6">
<input asp-for="Book.ISBN" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-3 offset-4">
<input type="submit" value="Update" class="btn btn-primary form-control" />
</div>
<div class="col-3">
<a asp-page="Ind" class="btn btn-success form-control">Back to List</a>
</div>
</div>
</form>
</div>

Inside the Edit.cshtml.cs file, we are creating a get handler which will get a parameter called Id that we just pass. It will be of integer type and based on this, we will be retrieve the book.

We have to use Application Db Context to interact with database using entity framework because we will be updating the data related to Book object.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BookList.Model;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace BookList
{
public class EditModel : PageModel
{
private ApplicationDbContext _db;
public EditModel(ApplicationDbContext db)
{
_db = db;
}
[BindProperty]
public Book Book { get; set; }
public async Task OnGet(int id)
{
Book = await _db.Book.FindAsync(id);
}
public async Task<IActionResult> OnPost()
{
if (ModelState.IsValid)
{
var BookFromDb = await _db.Book.FindAsync(Book.Id);
BookFromDb.Name=Book.Name;
BookFromDb.ISBN = Book.ISBN;
BookFromDb.Author=Book.Author;
await _db.SaveChangesAsync();
return RedirectToPage("Ind");
}
return RedirectToPage();
}
}
}

With the help of OnGet handler method, we are populating the book object with the data that we received from database. FindAsync is a method available inside entity framework.

Now we will design an edit view and will demonstrate the functionality of editing and updating the properties of book object inside the database.

Now we will edit the book UI. The user interface will be similar to the create user interface that has been created during previous articles. The only difference is that here we will be loading the data from the SQL server database.

In the output inside URL, the id of the particular book has also been passed because we used an asp-route-id custom tag helper.

Creation of Edit post handler

We have to add a post handler to post the updated data back to the database. In the post handler, we will be redirected to a page that is why the return type of OnPost handler is IAcionResult.

public async Task<IActionResult> OnPost()
{
if (ModelState.IsValid)
{
var BookFromDb = await _db.Book.FindAsync(Book.Id);
BookFromDb.Name=Book.Name;
BookFromDb.ISBN = Book.ISBN;
BookFromDb.Author=Book.Author;
await _db.SaveChangesAsync();
return RedirectToPage("Ind");
}
return RedirectToPage();

Here we are checking if the model state is valid or not. If it is valid then we will retrieve a book from the database as we will be editing the data related to a particular book.

After updating the book, we will be redirected to the index page. If the model state is not valid then we will redirect and return back to the page.

Now in order for the edit function to work, id property is needed because books will be retrieved based on their id values. For that, we are defining an input text field of type hidden and will use asp-for tag helper for the Id property. So now the edit functionality has been implemented.

Creation of Delete razor page

Now we will work on the delete function to delete a particular record from the database.

So upon clicking the delete button, an alert should be shown at the top and when the user clicks on ok, the record should be deleted from the index page. For that, we have to implement a popup inside the Ind.cshtml file.

Inside the delete button we need to add an onclick method which will return a message with a popup and then we want to go to an asp-page-handler (tag helper) on the same index page.

@page
@model BookList.IndModel
<br />
<div class="container row p-0 m-0">
<div class="col-10">
<h2 class="text-info">Book List</h2>
</div>
<div class="col-2">
<a asp-page="Create" class="btn btn-info form-control text-white">Create New Book</a>
</div>
<div class="col-12 border p-3 mt-3">
<form method="post">
@if(Model.Books.Count()>0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="Books.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="Books.FirstOrDefault().Author"></label>
</th>
<th>
<label asp-for="Books.FirstOrDefault().ISBN"></label>
</th>
<th>
</th>
</tr>
@foreach(var item in Model.Books)
{
<tr>
<td>
@Html.DisplayFor(m => item.Name)
</td>
<td>
@Html.DisplayFor(m => item.Author)
</td>
<td>
@Html.DisplayFor(m => item.ISBN)
</td>
<td>
<button asp-page-handler="Delete" asp-route-id="@item.Id" onclick="return confirm('Are you sure you want to delete?')" class="btn btn-danger btn-sm">Delete</button>
<a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-success btn-sm text-white">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<p>No Books Available.</p>
}
</form>
</div>
</div>

We also need to pass the id of the book with the help of asp-route-id tag helper to delete a book of that particular id.

Creation of delete handler

Now we will implement a delete handler inside the index page.

public async Task<IActionResult> OnPostDelete(int id)
{
var book = await _db.Book.FindAsync(id);
if (book == null)
{
return NotFound();
}
_db.Book.Remove(book);
await _db.SaveChangesAsync();
return RedirectToPage("Ind");
}

Here we are using IActionResult as a return type because we will be redirecting to the same page. With the help of ID, we are checking whether book is available or not. If not, return not found message otherwise the book will be removed.

So this is how the delete functionality of the crud operations is implemented inside ASP.Net Core 3 Razor Pages.

Summary

In this article, I have implemented the Edit and Delete functionality of the crud operations inside the ASP.Net Core 3 razor page. I have implemented both edit post handler and delete post handler to perform their respective tasks. So with this, I have demonstrated how to perform crud operations in ASP.Net Core 3 razor page using the SQL Server database.