Creating Page Model And Performing CRUD Operations In ASP.NET Core 3 Razor Pages

Introduction

This article is the continuation of the article “Creating a Model and Database in ASP.NET Core Razor Pages Using Entity Framework Core” where we have learned to create a book model and also to create database and tables using entity framework.

Creating Page Model class

In this article, we will discuss how to create a PageModel class to populate all of the books from the database and pass that to a razor page to be displayed. We will also create user interface to display all of the books retrieved from the database so that in later articles we could learn to perform crud operations on book object. For this we need pages to create a new book, edit a new book, delete a book and also view all the books that are available inside the database.

Let’s create a new folder named BookList inside Pages folder.

Creating Page Model And Performing CRUD Operations In ASP.NET Core 3 Razor Pages

Now we need to add a new razor page. For that right click on the BookLists folder, click on Add option and then click on Razor page to add a new razor pager in the application.

Select the empty razor page option, so that we can understand the functionality of razor pages.

Inside the Add Razor Page dialog box, write the name of the Razor page as Ind. Below in the Options panel, check the Generate PageModel class and use a layout page option.

Here we need a page model class because we need to populate all of the books from the database and pass that to the page to be displayed. There is no need to check.

Create as partial view option because this will be a complete page. A partial view can be a small subsection like a group of buttons that can be reused in multiple places in an application.

We will use the layout page because that is a master page. Now click on Add button to add the razor page.

Inside the index page model, we will create a functionality to retrieve all of the books from database. For this to happen, we need application Db Context.

We have already added application Db Context in services inside the pipeline as you can see in my previous article. So now it can be used with the help of dependency injection.

Inside IndexModel class we need object of ApplicationDbContext. Now initiate the constructor and create an ApplicationDbContext object as parameter of the constructor.

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;
using Microsoft.EntityFrameworkCore;
namespace BookList
{
public class IndModel : PageModel
{
private readonly ApplicationDbContext _db;
public IndModel(ApplicationDbContext db)
{
_db = db;
}
}
}

This is how application db context can be extracted and injected on a specific page from dependency injection container.

Now we have to return a list or IEnumerable of books. We will assign all of the books from the database to Books object.

public IEnumerable<Book> Books { get; set; }

With the help of Get handler, we are going to the database, retrieving all of the books and storing that inside IEnumerable object named Books.

public async Task OnGet()
{
Books = await _db.Book.ToListAsync();
}

Async inside the Get handler method is running multiple tasks at a time until it is awaited. Here we need to await as we need to assign all the books that have been retrieved from the database.

After adding the get handler method for the index page, let’s create user interface to display the books retrieved from the database. Now we can display a table displaying all the books retrieved from database.

@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 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>
</th>
</tr>
@foreach(var item in Model.Books)
{
<tr>
<td>
@Html.DisplayFor(m => item.Name)
</td>
<td>
@Html.DisplayFor(m => item.Author)
</td>
<td>
<button class="btn btn-danger btn-sm">Delete</button>
<a class="btn btn-success btn-sm text-white">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<p>No Books Available.</p>
}
</form>
</div>
</div>

We will be creating an anchor tag which will act as a button named “new book button” and using tag helpers to redirect this button to create razor page to create new entries for name of books and author.

Now we will be creating a form, here we want to display books only if it exists inside the table. So for that we can use razor syntax like if else condition.

Now we will be checking if there are any books returned from the get method inside the page model. We will check if books count is greater than zero then we will display a table containing the list of books, else we will display a paragraph written no books available.

As there are no entries of books available inside database, the browser will display a message “No Books Available”. Right now we cannot create new books, therefore we can switch to sql server and edit the book table to create some entries.

As we have created a single row of name of the book and author, so now if we refresh the page then that message will be gone because it retrieved one book that we just added.

In order to display the books inside the browser, we can add a table inside if condition.

@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>
</th>
</tr>
@foreach(var item in Model.Books)
{
<tr>
<td>
@Html.DisplayFor(m => item.Name)
</td>
<td>
@Html.DisplayFor(m => item.Author)
</td>
<td>
<button class="btn btn-danger btn-sm">Delete</button>
<a class="btn btn-success btn-sm text-white">Edit</a>
</td>
</tr>
}
</table>
}

We can also add a link to the button “Create New Book” so that it redirects us to a create razor page. For that inside create new book anchor tag, we need to add a tag helper. We will be using asp-page tag helper to redirect to a specific page that is to create page.

The Delete and Edit buttons are also created here to delete a record and edit a previously created record. After retrieving all of the books from the database and displaying it inside the table, the final output would be like in the image shown above.

Summary

In this article, we have implemented the PageModel class to populate all of the books from the database. We have created a razor page to display all of the books retrieved from the database inside a table. In the upcoming articles I will be demonstrating how to perform crud operations to create, edit, update and delete book entries inside the database.