Post
Ask Question

Displaying a Customers List Inside an ASP.NET Core 3.0 Razor Pages Web Application

Introduction

 
This article is the continuation of the article “Adding Roles to Registration Razor Page in ASP.NET Core”. In this article, we will be working with users of the application that I created in the above-mentioned articles. So if it’s an employee or a customer, there will be a list of all the users. Here, the admin can see the list of users so they can select which user they want to work on a car. If an admin is working on a car, that car belongs to a user in this web application. We will be displaying the list of all of the available users.
 

Creating a list of users

 
We will create a user section in our spark automation web application which has been created in the above mentioned previous articles. We will add a new users tab at the top. When the user clicks on that tab, we can display a list of all of the users.
 
In order to create a new users tab, we have to make changes inside _layout.cshtml file.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  6.     <title>@ViewData["Title"] - SparkAutomation</title>  
  7.     <environment include="Development">  
  8.         <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />  
  9.     </environment>  
  10.     <environment exclude="Development">  
  11.         <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />  
  12.     </environment>  
  13.       
  14.     <link rel="stylesheet" href="~/css/site.css" />  
  15. </head>  
  16. <body>  
  17.     <header>  
  18.         <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">  
  19.             <div class="container">  
  20.                 <a class="navbar-brand" asp-area="" asp-page="/Index">SparkAutomation</a>  
  21.                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"  
  22.                         aria-expanded="false" aria-label="Toggle navigation">  
  23.                     <span class="navbar-toggler-icon"></span>  
  24.                 </button>  
  25.                 <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">  
  26.                     <partial name="_LoginPartial" />  
  27.                     <ul class="navbar-nav flex-grow-1">  
  28.                         <li class="nav-item">  
  29.                             <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>  
  30.                         </li>  
  31.                         <li class="nav-item">  
  32.                             <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>  
  33.                         </li>  
  34.                         <li class="nav-item">  
  35.                             <a class="nav-link text-dark" asp-area="" asp-page="/Users/Index">Users</a>  
  36.                         </li>  
  37.                     </ul>  
  38.                 </div>  
  39.             </div>  
  40.         </nav>  
  41.     </header>  
  42.     <div class="container">  
  43.         <main role="main" class="pb-3">  
  44.             @RenderBody()  
  45.         </main>  
  46.     </div>  
  47.   
  48.     <footer class="border-top footer text-muted">  
  49.         <div class="container">  
  50.             © 2020 - SparkAutomation - <a asp-area="" asp-page="/Privacy">Privacy</a>  
  51.         </div>  
  52.     </footer>  
  53.   
  54.     <environment include="Development">  
  55.         <script src="~/lib/jquery/dist/jquery.js"></script>  
  56.         <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>  
  57.     </environment>  
  58.     <environment exclude="Development">  
  59.         <script src="~/lib/jquery/dist/jquery.min.js"></script>  
  60.         <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>  
  61.     </environment>  
  62.       
  63.     <script src="~/js/site.js" asp-append-version="true"></script>  
  64.   
  65.     @RenderSection("Scripts", required: false)  
  66. </body>  
  67. </html>  
Here, we will be go inside the users folder and add an index page, which we will create later in the article. The name of the tab is users.
 
Displaying Customers List Inside ASP.NET Core 3.0 Razor Pages Web Application 
 
Now, go to the solution explorer inside the pages folder. Right-click and add a new folder called users. Now right click on the users folder and add the above-mentioned index page.
 
Displaying Customers List Inside ASP.NET Core 3.0 Razor Pages Web Application 
 
In order to create an index page, add a new razor page called index and click on the add button to create an index razor page.
 
Displaying Customers List Inside ASP.NET Core 3.0 Razor Pages Web Application 
 
Inside the index razor page, we will be retrieving users from the database.
 
Herem we need to add a private readonly object called _db of type ApplicationDbContext which has been created earlier in the web application. Then, I created an IndexModel constructor.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Threading.Tasks;  
  5. using Microsoft.AspNetCore.Mvc;  
  6. using Microsoft.AspNetCore.Mvc.RazorPages;  
  7. using Microsoft.EntityFrameworkCore;  
  8. using SparkAutomation.Data;  
  9. using SparkAutomation.Models;  
  10.   
  11. namespace SparkAutomation  
  12. {  
  13.     public class IndexModel : PageModel  
  14.     {  
  15.         private readonly ApplicationDbContext _db;  
  16.   
  17.         public IndexModel(ApplicationDbContext db)  
  18.         {  
  19.             _db = db;  
  20.         }  
  21.   
  22.         [BindProperty]  
  23.         public List<ApplicationUser> ApplicationUserList { get; set; }  
  24.         public async Task<IActionResult> OnGet()  
  25.         {  
  26.             ApplicationUserList = await _db.ApplicationUser.ToListAsync();  
  27.             return Page();  
  28.         }  
  29.     }  
  30. }  
Inside the index page, with the help of Get handler, we will retrieve the list of users. So we can bind ApplicationUserList property with the list. Then we are retrieving this list of users from database and returning back to the page.
 
Now we will create a user interface for the index page so that we can display the list of all the users retrieved from the database. We will create an index razor page for all the users retrieved from the database.
 
Here at the top, we are creating a heading called customers list on one side of the page and a button called to create a new user on the other side to create a new user.
  1. <div class="row">  
  2.         <div class="col-6">  
  3.             <h2 class="text-info">Customers List</h2>  
  4.         </div>  
  5.         <div class="col-6 text-right">  
  6.             <a asp-page="/Account/Register" asp-area="Identity" class="btn btn-info">  
  7.                 <i class="fas fa-plus"></i>  Create New Customer  
  8.             </a>  
  9.         </div>  
  10.     </div>  
With the help of create new user button, we will be redirecting to register page that we have created earlier in the application. Here, we are creating asp-area as identity and asp-page as register. This is how we can register back to the register page from the users list.
 
Now we will display the list of users to be retrieved from the database. So we will create a table and pass the list of ApplicationUser called ApplicationUserList.
  1. <tr class="table-secondary">  
  2.                     <th>  
  3.                         @Html.DisplayNameFor(m => m.ApplicationUserList[0].Name)  
  4.                     </th>  
  5.                     <th>  
  6.                         @Html.DisplayNameFor(m => m.ApplicationUserList[0].PhoneNumber)  
  7.                     </th>  
  8.                     <th>  
  9.                         @Html.DisplayNameFor(m => m.ApplicationUserList[0].Email)  
  10.                     </th>  
  11.                     <th>  
  12.   
  13.                     </th>  
  14.                 </tr>  
The properties inside ApplicationUser model such as name, phone number and email address are displayed inside the table.
 
Now with the help of for each loop, we are creating rows for each of the application users. In each row, details of the user such as name, phone number and email address will be displayed.
  1. @foreach(var item in Model.ApplicationUserList)  
  2.                 {  
  3.                     <tr>  
  4.                         <td>  
  5.                             @Html.DisplayFor(m => item.Name)  
  6.                         </td>  
  7.                         <td>  
  8.                             @Html.DisplayFor(m => item.PhoneNumber)  
  9.                         </td>  
  10.                         <td>  
  11.                             @Html.DisplayFor(m => item.Email)  
  12.                         </td>  
  13.                         <td>  
  14.                             <a class="btn btn-primary text-white" asp-page="Edit" asp-route-Id="@item.Id">  
  15.                                 <i class="fas fa-edit"></i>  
  16.                             </a>  
  17.                             <a class="btn btn-danger text-white" asp-page="Delete" asp-route-Id="@item.Id">  
  18.                                 <i class="fas fa-trash-alt"></i>  
  19.                             </a>  
  20.                         </td>  
  21.                     </tr>  
  22.                 }  
We can also add edit and delete functionality for the users to edit an existing user and delete users.
 
After creating the index razor page, to display the list of all of the customers from the database, the output will be as follows.
 
Displaying Customers List Inside ASP.NET Core 3.0 Razor Pages Web Application
 
Index.cshtml 
  1. @page  
  2. @model SparkAutomation.IndexModel  
  3. @{  
  4.     ViewData["Title"] = "Index";  
  5.     Layout = "~/Pages/Shared/_Layout.cshtml";  
  6. }  
  7.   
  8.   
  9. <form>  
  10.     <div class="row">  
  11.         <div class="col-6">  
  12.             <h2 class="text-info">Customers List</h2>  
  13.         </div>  
  14.         <div class="col-6 text-right">  
  15.             <a asp-page="/Account/Register" asp-area="Identity" class="btn btn-info">  
  16.                 <i class="fas fa-plus"></i>  Create New Customer  
  17.             </a>  
  18.         </div>  
  19.     </div>  
  20.   
  21.     <div class="border bg-white">  
  22.         <br />  
  23.         <div>  
  24.             <table class="table table-striped border">  
  25.                 <tr class="table-secondary">  
  26.                     <th>  
  27.                         @Html.DisplayNameFor(m => m.ApplicationUserList[0].Name)  
  28.                     </th>  
  29.                     <th>  
  30.                         @Html.DisplayNameFor(m => m.ApplicationUserList[0].PhoneNumber)  
  31.                     </th>  
  32.                     <th>  
  33.                         @Html.DisplayNameFor(m => m.ApplicationUserList[0].Email)  
  34.                     </th>  
  35.                     <th>  
  36.   
  37.                     </th>  
  38.                 </tr>  
  39.                 @foreach(var item in Model.ApplicationUserList)  
  40.                 {  
  41.                     <tr>  
  42.                         <td>  
  43.                             @Html.DisplayFor(m => item.Name)  
  44.                         </td>  
  45.                         <td>  
  46.                             @Html.DisplayFor(m => item.PhoneNumber)  
  47.                         </td>  
  48.                         <td>  
  49.                             @Html.DisplayFor(m => item.Email)  
  50.                         </td>  
  51.                         <td>  
  52.                               
  53.                         </td>  
  54.                     </tr>  
  55.                 }  
  56.             </table>  
  57.         </div>  
  58.     </div>  
  59. </form>  

Summary

 
In this article, I created the users tab inside the spark automation razor page web application. Inside the index razor page, the list of all of the users has been displayed. The table contains all the details of each and every user. I have also added an edit and delete functionality to edit all of the existing users and delete them. For each functionality, proper code snippets along with the output have been provided. 


Similar Articles