In this article, we are going to create a Single Page Application (SPA) using Razor pages in Blazor with the help of Entity Framework Core database first approach. Single-Page Applications are web application that load a single HTML page and dynamically update that page as the user interacts with the app. We will create a sample Employee Record Management System and perform CRUD operations on it.
We will use Visual Studio 2017 and SQL Server 2014.
Take a look at the final application.
Blazor framework is not supported by versions below Visual Studio 2017 v15.7.
The source code has been updated to .NET Core 3.2 Preview-1. Get the source code from Github.
We will use a DB table to store all the records of employees.
Open SQL Server and use the following script to create Employee table.
CREATE TABLE Employee ( EmployeeID int IDENTITY(1,1) PRIMARY KEY, Name varchar(20) NOT NULL , City varchar(20) NOT NULL , Department varchar(20) NOT NULL , Gender varchar(6) NOT NULL )
Open Visual Studio and select File >> New >> Project.
After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from available project types. Put the name of the project as BlazorSPA and press OK.
After clicking on OK, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns. Then, select “Blazor (ASP .NET Core hosted)” template and press OK.
It will create the Blazor solution. You can observe the folder structure in Solution Explorer as shown in the image below.
You can observe that we have three project files created inside this solution.
We are using Entity Framework core database first approach to create our models. We will create our model class in BlazorSPA.Shared project so that it can be accessible to both client and server project.
Navigate to Tools >> NuGet Package Manager >> Package Manager Console. Select “BlazorSPA.Shared” from Default project drop-down. Refer to image below:
First, we will install the package for the database provider that we are targeting which is SQL Server in this case. Hence, run the following command,
Install-Package Microsoft.EntityFrameworkCore.SqlServer
Since we are using Entity Framework Tools to create a model from the existing database, we will install the tools package as well. Hence, run the following command
Install-Package Microsoft.EntityFrameworkCore.Tools
After you have installed both the packages, we will scaffold our model from the database tables using the following command,
Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Employee
Do not forget to put your own connection string (inside ” “). The successful execution of this command will create a folder called Models having two class files myTestDBContext.cs and Employee.cs. The name of your DBContext class will be the name of your database suffixed with the word Context. Here my database name is myTestDB, hence the context class name is myTestDBContext. Hence, we have successfully scaffolded our Models using EF core database first approach.
At this point in time, the Models folder has the following structure.
Right-click on BlazorSPA.Server project and then select Add >> New Folder. Name the folder as DataAccess. We will be adding our class to handle database related operations inside this folder only.
Right click on DataAccess folder and select Add >> Class. Name your class EmployeeDataAccessLayer.cs.
Open EmployeeDataAccessLayer.cs and put the following code into it.
using BlazorSPA.Shared.Models;
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BlazorSPA.Server.DataAccess
{
public class EmployeeDataAccessLayer
{
myTestDBContext db = new myTestDBContext();
//To Get all employees details
public IEnumerable<Employee> GetAllEmployees()
{
try
{
return db.Employee.ToList();
}
catch
{
throw;
}
}
//To Add new employee record
public void AddEmployee(Employee employee)
{
try
{
db.Employee.Add(employee);
db.SaveChanges();
}
catch
{
throw;
}
}
//To Update the records of a particluar employee
public void UpdateEmployee(Employee employee)
{
try
{
db.Entry(employee).State = EntityState.Modified;
db.SaveChanges();
}
catch
{
throw;
}
}
//Get the details of a particular employee
public Employee GetEmployeeData(int id)
{
try
{
Employee employee = db.Employee.Find(id);
return employee;
}
catch
{
throw;
}
}
//To Delete the record of a particular employee
public void DeleteEmployee(int id)
{
try
{
Employee emp = db.Employee.Find(id);
db.Employee.Remove(emp);
db.SaveChanges();
}
catch
{
throw;
}
}
}
}Here we have defined methods to handle database operations. GetAllEmployees will fetch all the employee data from Employee Table. The AddEmployee method will create a new employee record and UpdateEmployee will update the record of an existing employee. GetEmployeeData will fetch the record of the employee corresponding to the employee ID passed to it and DeleteEmployee will delete the employee record corresponding to the employee id passed to it.
Right click on BlazorSPA.Server/Controllers folder and select Add >> New Item. An “Add New Item” dialog box will open. Select ASP.NET from the left panel, then select “API Controller Class” from templates panel and put the name as EmployeeController.cs. Click Add.
This will create our API EmployeeController class.
We will call the methods of EmployeeDataAccessLayer class to fetch data and pass on the data to the client side.
Open EmployeeController.cs file and put the following code into it.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BlazorSPA.Server.DataAccess;
using BlazorSPA.Shared.Models;
using Microsoft.AspNetCore.Mvc;
namespace BlazorSPA.Server.Controllers
{
public class EmployeeController : Controller
{
EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();
[HttpGet]
[Route("api/Employee/Index")]
public IEnumerable<Employee> Index()
{
return objemployee.GetAllEmployees();
}
[HttpPost]
[Route("api/Employee/Create")]
public void Create([FromBody] Employee employee)
{
if (ModelState.IsValid)
objemployee.AddEmployee(employee);
}
[HttpGet]
[Route("api/Employee/Details/{id}")]
public Employee Details(int id)
{
return objemployee.GetEmployeeData(id);
}
[HttpPut]
[Route("api/Employee/Edit")]
public void Edit([FromBody]Employee employee)
{
if (ModelState.IsValid)
objemployee.UpdateEmployee(employee);
}
[HttpDelete]
[Route("api/Employee/Delete/{id}")]
public void Delete(int id)
{
objemployee.DeleteEmployee(id);
}
}
}At this point of time, our BlazorSPA.Server project has the following structure.
We are done with our backend logic. Therefore, we will now proceed to code our client side.
We will add the Razor page in BlazorSPA.Client/Pages folder. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application but for the sake of this tutorial, we will delete fetchdata and counter pages from the BlazorSPA.Client/Pages folder.
Right click on BlazorSPA.Client/Pages folder and select Add >> New Item. An “Add New Item” dialog box will open, select “ASP.NET Core” from the left panel, then select “Razor Page” from templates panel and name it EmployeeData.cshtml. Click Add.
This will add an EmployeeData.cshtml page to our BlazorSPA.Client/Pages folder. This razor page will have two files, EmployeeData.cshtml and EmployeeData.cshtml.cs.
Now we will add codes to these pages.
Open EmployeeData.cshtml.cs and put the following code into it
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;
using BlazorSPA.Shared.Models;
using Microsoft.AspNetCore.Blazor;
using Microsoft.AspNetCore.Blazor.Components;
using Microsoft.AspNetCore.Blazor.Services;
namespace BlazorSPA.Client.Pages
{
public class EmployeeDataModel : BlazorComponent
{
[Inject]
protected HttpClient Http { get; set; }
[Inject]
protected IUriHelper UriHelper { get; set; }
[Parameter]
protected string paramEmpID { get; set; } = "0";
[Parameter]
protected string action { get; set; }
protected List<Employee> empList = new List<Employee>();
protected Employee emp = new Employee();
protected string title { get; set; }
protected override async Task OnParametersSetAsync()
{
if (action == "fetch")
{
await FetchEmployee();
this.StateHasChanged();
}
else if (action == "create")
{
title = "Add Employee";
emp = new Employee();
}
else if (paramEmpID != "0")
{
if (action == "edit")
{
title = "Edit Employee";
}
else if (action == "delete")
{
title = "Delete Employee";
}
emp = await Http.GetJsonAsync<Employee>("/api/Employee/Details/" + Convert.ToInt32(paramEmpID));
}
}
protected async Task FetchEmployee()
{
title = "Employee Data";
empList = await Http.GetJsonAsync<List<Employee>>("api/Employee/Index");
}
protected async Task CreateEmployee()
{
if (emp.EmployeeId != 0)
{
await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp);
}
else
{
await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/Create", emp);
}
UriHelper.NavigateTo("/employee/fetch");
}
protected async Task DeleteEmployee()
{
await Http.DeleteAsync("api/Employee/Delete/" + Convert.ToInt32(paramEmpID));
UriHelper.NavigateTo("/employee/fetch");
}
protected void Cancel()
{
title = "Employee Data";
UriHelper.NavigateTo("/employee/fetch");
}
}
}Let us understand this code. We have defined a class EmployeeDataModel that will hold all our methods that we will use in EmployeeData.cshtml page.
We are injecting the HttpClient service to enable web API call and IUriHelper service to enable URL redirection. After this, we have defined our parameter attributes – paramEmpID and action. These parameters are used in EmployeeData.cshtml to define the routes for our page. We have also declared a property title to display the heading to specify the current action that is being performed on the page.
TheOnParametersSetAsync method is invoked whenever the URL parameters are set for the page. We will check the value of parameter “action” to identify the current operation on the page. If the action is set to “fetch”, then we will invoke FetchEmployee method to fetch the updated list of employees from the database and refresh the UI using StateHasChanged method. We will check if the action attribute of parameter is set to “create”, then we will set the title of page to “Add Employee” and create a new object of type Employee. If the paramEmpID is not “0”, then it is either an edit action or a delete action. We will set the title property accordingly and then invoke our web API method to fetch the data for the employee id as set in paramEmpID property.
The method FetchEmployee will set the title to “Employee Data” and fetch all the employee data by invoking our web API method.
The CreateEmployee method will check if it is invoked to add a new employee record or to edit an existing employee record. If the EmployeeId property is set then it is an “edit” request and we will send a PUT request to web API. If EmployeeId is not set then it is a “create” request and we will send a POST request to web API. We will set the title property according to the corresponding value of action and then invoke our web API method to fetch the data for the employee id as set in paramEmpID property.
The DeleteEmployee method will delete the employee record for the employee id as set in paramEmpID property. After deletion, we will redirect the user to /employee/fetch page.
In the Cancel method we will set the title property to “Employee Data” and redirect the user to /employee/fetch page.
Open EmployeeData.cshtml page and put the following code into it.
@page "/employee/{action}/{paramEmpID}"
@page "/employee/{action}"
@inherits EmployeeDataModel<h1>@title</h1>@if (action == "fetch")
{
<p>
<a href="/employee/create">Create New</a>
</p>
}@if (action == "create" || action == "edit")
{
<form>
<table class="form-group">
<tr>
<td>
<label for="Name" class="control-label">Name</label>
</td>
<td>
<input type="text" class="form-control" bind="@emp.Name" />
</td>
<td width="20"> </td>
<td>
<label for="Department" class="control-label">Department</label>
</td>
<td>
<input type="text" class="form-control" bind="@emp.Department" />
</td>
</tr>
<tr>
<td>
<label for="Gender" class="control-label">Gender</label>
</td>
<td>
<select asp-for="Gender" class="form-control" bind="@emp.Gender">
<option value="">-- Select Gender --</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
<td width="20"> </td>
<td>
<label for="City" class="control-label">City</label>
</td>
<td>
<input type="text" class="form-control" bind="@emp.City" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="btn btn-success" >At the top, we have defined the routes for our page. There are two routes defined.
- /employee/{action}/{paramEmpID} : This will accept action name along with employee id. This route is invoked when we perform Edit or Delete operation. When we call edit or delete action on a particular employee data, the employee id is passed as the URL parameter.
- /employee/{action} : This will only accept the action name. This route is invoked when we create a new employee data or we fetch the records of all the employees.
We are also inheriting EmployeeDataModel class, which is defined in EmployeeData.cshtml.cs file. This will allow us to use the methods defined in EmployeeDataModel class.
After this, we are setting the title that will be displayed on our page. The title is dynamic and change as per the action that is being executed currently on the page.
We will show the “Create New” link only if the action is “fetch”. If the action is create or edit then “Create New” link will be hidden and we will display the form to get the user input. Inside the form, we have also defined two buttons “Save” and “Cancel”. Clicking on the Save button will invoke the CreateEmployee method. Clicking on the Cancel will invoke the Cancel method.
If the action is delete then a table will be displayed with the data of the employee on which the delete action is invoked. We will also display two buttons – “Delete” and “Cancel”. Clicking on the Delete button will invoke the DeleteEmployee method. Clicking on the Cancel will invoke the Cancel method.
At the end, we have a table to display all the employee data from the database. Each employee record will also have two action links, Edit to edit the employee record and Delete to delete the employee record. This table is always displayed on the page and we will update it after performing every action.
Adding Link to Navigation menu
The last step is to add the link to our “EmployeeData” page in the navigation menu, open BlazorSPA.Client/Shared/NavMenu.cshtml page and put the following code into it.
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="/">BlazorSPA</a>
<button class="navbar-toggler" >Hence, we have successfully created a Single Page Application (SPA) using Blazor with the help of Entity Framework Core database first approach.
Execution Demo
Press F5 to launch the application.
A web page will open as shown in the image below. The navigation menu on the left is showing navigation link for Employee data page.
Click on “Employee data” link, it will redirect to EmployeeData view. Here you can see all the employee data on the page. Notice the URL has “employee/fetch” appended to it.
Since we have not added any data, hence it is empty. Click on CreateNew to open “Add Employee” form to add a new employee data. Notice the URL has “employee/create” appended to it
After inserting data in all the fields, click on “Save” button. The new employee record will be created and the Employee data table will get refreshed.
If we want to edit an existing employee record, we will click on Edit action link. It will open Edit view as shown below. Here we can change the employee data. Notice that we have passed the employee id in the URL parameter.
Here we have changed the City of employee Swati from Mumbai to Kolkatta. Click on “Save” to refresh the employee data table to view the updated changes as highlighted in the image below:
Now, we will perform Delete operation on the employee named Dhiraj. Click on Delete action link which will open Delete view asking for a confirmation to delete. Notice that we have passed the employee id in the URL parameter.
Once we click on the Delete button, it will delete the employee record and the employee data table will be refreshed. Here, we can see that the employee with name Dhiraj has been removed from our record.
Deploying the application
To learn how to deploy a Blazor application using IIS, refer to Deploying A Blazor Application On IIS
To deploy this application on Azure, refer to Deploying A Blazor Application On Azure
Conclusion
We have created a Single Page Application with Razor pages in Blazor using the Entity Framework Core database first approach with the help of Visual Studio 2017 and SQL Server 2014. We also performed CRUD operations on our application.
Please get the source code from Github and play around to get a better understanding.
Get my book Blazor Quick Start Guide to learn more about Blazor.
You can also read this article at C# Corner
Preparing for interviews !!! Read my article on C# Coding Questions For Technical Interviews
You can check my other articles on Blazor here.
See Also
Introduction Blazor is a .NET web framework that allows us to create client-side applications using…
Introduction In this article, we are going to create a sudoku solver with the help…
Introduction In this article, we will learn how to implement Azure serverless with Blazor web…
Introduction Angular is an open-source framework that allows us to create applications for multiple platforms…
Introduction In this article, we will create an optical character recognition (OCR) application using Angular…
Introduction In this article, we will create an optical character recognition (OCR) application using Blazor…
View Comments
How to find a user by email or username instead of id Find() ?
Thanks
you can pass the username or email in the same method instead of id. Also make sure to make the search field unique as username/email can't be duplicated.
Hi. Thanks for sharing. I'm waiting for Blazor!
My "Scaffold-DbContext" create Models folder in Server, not in Share.
what did I do wrong? You help-me??
Thankful;
Navigate to Tools >> NuGet Package Manager >> Package Manager Console. Select “BlazorSPA.Shared” from Default project drop-down and execute the command. The Models folder will be created in the project that is selected while executing the command.
It worked!
Thank you very much ANKIT SHARMA.
All worked for me, except this line 2 (page : EditEmployee)
1) await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp);
2) UriHelper.NavigateTo("/fetchemployee");
It never navigates to the page, it stays on same page.
Any idea why?
Thanks