Blazor CRUD Using Google Cloud Firestore
In this article, we will create a Blazor application using Google Firestore as a database provider. We will create a Single Page Application (SPA) and perform CRUD operations on it.
We take a look at how to create a Blazor application that can perform CRUD operations, and how to sync it with a Cloud Firestore database.
Introduction
We will use Bootstrap 4 to display a modal popup for handling user inputs. The form also has a dropdown list, which will bind to a collection in our database. We will also implement a client-side search functionality to search the employee list by employee name.
Take a look at the final application.
Prerequisites
- Install the .NET Core 2.1 or above SDK from here.
- Install the latest version of Visual Studio 2017 from here.
- Install the ASP.NET Core Blazor Language Services extension from here.
Source Code
Get the source code from GitHub.
Configuring Cloud Firestore
The first step is to create a project in the Google Firebase console. Navigate to https://console.firebase.google.com and sign in with your Google account. Click on the Add Project link.pop-up up window will open as shown in the image below. Provide your project name and click on the Create project button at the bottom.
Note the project id here. Firebase project ids are globally unique. You can edit your project id while creating a new project. One the project is created you cannot change your project id. We will use this project id in the next section while initializing our application.
Click on the project you just created. A project overview page will open. Select “Database” from the left-hand menu. Then click on the “Create database” button. A pop-up window will open asking you to select the “Security rules for Cloud Firestore.” Select “Start in locked mode” and click on enable.
Refer to the image below:
This will enable the database for your project. The Firebase project has two options for the database: Real-time Database and Cloud Firestore. For this application, we will use the “Cloud Firestore” database. Click on the “Database” dropdown at the top of the page and select “Cloud Firestore.”
Refer to the image below:
We will create a cities collection to store the city name for employees. We will also bind this collection to a dropdown list in our web application from which the user will select the desired city. Click on “Add collection.” Set the collection ID as “cities.” Click on “Next.” Refer to the image below:
Set the Field value as “CityName,” select the string from the Type dropdown, and fill-in the value with the city name as “Mumbai”. Click Save. Refer to the image below:
This will create the “cities” collection and insert the first document in it. Similarly, create four more documents inside this collection and put the “CityName” value as Chennai, New Delhi, Bengaluru, and Hyderabad.
We will use the “employees” collection to store employee data, but we will not create it manually. We will create an “employees” collection while adding the first employee data from the application.
Configuring Google Application Credentials
To access the database from our project, we need to set the GOOGLE_APPLICATION_CREDENTIALS environment variable to point to a JSON service account key file. This will set an authentication pipeline from our application to cloud Firestore.
To generate the service account key file follow the steps mentioned below:
Step 1: Navigate to https://console.cloud.google.com/iam-admin/. Login with the same google account, you have used to create Firestore DB.
Step 2: Select Project from the drop down in the menu bar at the top.
Step 3: Select “Service accounts” from the left-hand menu. Select the service account for which you want to create the key. Click on the more button in the “Actions” column in that row, and then click “Create key.”
Refer to the image below:
Step 4: A pop-up modal will open asking you to select the key type. Select “JSON” and click on the create button. This will create a private key for accessing your Firestore account and downloads a JSON key file to your machine. We will use this file to set GOOGLE_APPLICATION_CREDENTIALS environment variable in the latter part of this article.
Create a Blazor Web Application
Open Visual Studio and select File >> New >> Project. After selecting the project, a “New Project” dialog will open. Select .NET Core inside the Visual C# menu from the left-hand panel. Then, select “ASP.NET Core Web Application” from available project types. Set the name of the project as BlazorWithFirestore 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.1” from these dropdowns. Then, select “Blazor (ASP .NET Core hosted)” template and press OK.
Now, our Blazor solution will be created. You can observe that we have three project files created in this solution.
- BlazorWithFirestore.Client - It has the client side code and contains the pages that will be rendered on the browser.
- BlazorWithFirestore.Server - It has the server side code, such as the data access layer and web API.
- BlazorWithFirestore.Shared - It contains the shared code that can be accessed by both client and server. It contains our Model classes.
Adding Package References for Firestore
We need to add the package reference for Google Cloud Firestore, which will allow us to access our DB from the Blazor application. Right-click on the BlazorWithFirestore.Shared project. Select “Edit BlazorWithFirestore.Shared.csproj.” It will open the BlazorWithFirestore.Shared.csproj file. Add the following lines inside it.
<ItemGroup>
<PackageReference Include="Google.Cloud.Firestore" Version="1.0.0-beta14" />
<br>
</ItemGroup>
Similary, add these lines to BlazorWithFirestore.Server.csproj file also.
Creating the Model
We will create our model class in the BlazorWithFirestore.Shared project. Right-click on BlazorWithFirestore.Shared and select Add >> New Folder. Name the folder “Models.” Again, right-click on the Models folder and select Add >> Class to add a new class file. Set the name of your class as Employee.cs and click Add.
Open the Employee.cs class and put the following code into it.
using System;
using Google.Cloud.Firestore;
namespace BlazorWithFirestore.Shared.Models
{
[FirestoreData]
public class Employee
{
public string EmployeeId { get; set; }
public DateTime date { get; set; }
[FirestoreProperty]
public string EmployeeName { get; set; }
[FirestoreProperty]
public string CityName { get; set; }
[FirestoreProperty]
public string Designation { get; set; }
[FirestoreProperty]
public string Gender { get; set; }
}
}
We have decorated the class with the [FirestoreData] attribute. This will allow us to map this class object to Firestore collection. Only those class properties, which are marked with [FirestoreProperty] attribute, are considered when we are saving the document to our collection. We do not need to save the EmployeeId to our database as it is generated automatically. While fetching the data, we will bind the auto generated document id to the EmployeeId property. Similarly, we will use date property to bind the created date of the collection while fetching the record. We will use this date property to sort the list of employees by the file’s created date. Hence, we have not applied [FirestoreProperty] attribute to these two properties.
Similarly, create a class file, Cities.cs, and put the following code into it.
using System;
using Google.Cloud.Firestore;
namespace BlazorWithFirestore.Shared.Models
{
[FirestoreData]
public class Cities
{
public string CityName { get; set; }
}
}
Creating a Data Access Layer for the Application
Right-click on BlazorWithFirestore.Server project and then select Add >> New Folder and name the folder DataAccess. We will be adding our class to handle database-related operations inside this folder only. Right-click on the DataAccess folder and select Add >> Class. Name your class EmployeeDataAccessLayer.cs.
Put the following code inside this class.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BlazorWithFirestore.Shared.Models;
using Google.Cloud.Firestore;
using Newtonsoft.Json;
namespace BlazorWithFirestore.Server.DataAccess
{
public class EmployeeDataAccessLayer
{
string projectId;
FirestoreDb fireStoreDb;
public EmployeeDataAccessLayer()
{
string filepath = "C:\\FirestoreAPIKey\\blazorwithfirestore-6d0a096b0174.json";
Environment.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", filepath);
projectId = "blazorwithfirestore";
fireStoreDb = FirestoreDb.Create(projectId);
}
public async Task<List<Employee>> GetAllEmployees()
{
try
{
Query employeeQuery = fireStoreDb.Collection("employees");
QuerySnapshot employeeQuerySnapshot = await employeeQuery.GetSnapshotAsync();
List<Employee> lstEmployee = new List<Employee>();
foreach (DocumentSnapshot documentSnapshot in employeeQuerySnapshot.Documents)
{
if (documentSnapshot.Exists)
{
Dictionary<string, object> city = documentSnapshot.ToDictionary();
string json = JsonConvert.SerializeObject(city);
Employee newuser = JsonConvert.DeserializeObject<Employee>(json);
newuser.EmployeeId = documentSnapshot.Id;
newuser.date = documentSnapshot.CreateTime.Value.ToDateTime();
lstEmployee.Add(newuser);
}
}
List<Employee> sortedEmployeeList = lstEmployee.OrderBy(x => x.date).ToList();
return sortedEmployeeList;
}
catch
{
throw;
}
}
public async void AddEmployee(Employee employee)
{
try
{
CollectionReference colRef = fireStoreDb.Collection("employees");
await colRef.AddAsync(employee);
}
catch
{
throw;
}
}
public async void UpdateEmployee(Employee employee)
{
try
{
DocumentReference empRef = fireStoreDb.Collection("employees").Document(employee.EmployeeId);
await empRef.SetAsync(employee, SetOptions.Overwrite);
}
catch
{
throw;
}
}
public async Task<Employee> GetEmployeeData(string id)
{
try
{
DocumentReference docRef = fireStoreDb.Collection("employees").Document(id);
DocumentSnapshot snapshot = await docRef.GetSnapshotAsync();
if (snapshot.Exists)
{
Employee emp = snapshot.ConvertTo<Employee>();
emp.EmployeeId = snapshot.Id;
return emp;
}
else
{
return new Employee();
}
}
catch
{
throw;
}
}
public async void DeleteEmployee(string id)
{
try
{
DocumentReference empRef = fireStoreDb.Collection("employees").Document(id);
await empRef.DeleteAsync();
}
catch
{
throw;
}
}
public async Task<List<Cities>> GetCityData()
{
try
{
Query citiesQuery = fireStoreDb.Collection("cities");
QuerySnapshot citiesQuerySnapshot = await citiesQuery.GetSnapshotAsync();
List<Cities> lstCity = new List<Cities>();
foreach (DocumentSnapshot documentSnapshot in citiesQuerySnapshot.Documents)
{
if (documentSnapshot.Exists)
{
Dictionary<string, object> city = documentSnapshot.ToDictionary();
string json = JsonConvert.SerializeObject(city);
Cities newCity = JsonConvert.DeserializeObject<Cities>(json);
lstCity.Add(newCity);
}
}
return lstCity;
}
catch
{
throw;
}
}
}
}
In the constructor of this class, we are setting the GOOGLE_APPLICATION_CREDENTIALS environment variable. You need to set the value of the filepath variable to the path where the JSON service account key file is located in your machine. Remember we downloaded this file in the previous section. The projectId variable should be set to the project id of your Firebase project.
We have also defined the methods for performing CRUD operations. The GetAllEmployees method will fetch the list of all employee documents from our “employees” collection. It will return the employee list sorted by document creation date.
The AddEmployee method will add a new employee document to our “employees” collection. If the collection does not exist, it will create the collection first then insert a new document in it.
The UpdateEmployee method will update the field values of an already existing employee document, based on the employee id passed to it. We are binding the document id to the employeeId property, hence we can easily manipulate the documents.
The GetEmployeeData method will fetch a single employee document from our “employees” collection based on the employee id.
TheDeleteEmployee method will delete the document for a particular employee from the “employees” collection.
TheGetCityData method will return the list of cities from the “cities” collection.
Adding the Web API Controller to the Application
Right-click on BlazorWithFirestore.Server/Controllers folder and select Add >> New Item. An “Add New Item” dialog box will open. Select Web from the left-hand panel, then select “API Controller Class” from the templates panel and set the name as EmployeeController.cs. Click Add.
This will create our API’s EmployeeController class. We will call the methods of the EmployeeDataAccessLayer class to fetch data and pass on the data to the client-side.
Open the EmployeeController.cs file and put the following code into it.
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using BlazorWithFirestore.Server.DataAccess;
using BlazorWithFirestore.Shared.Models;
using Microsoft.AspNetCore.Mvc;
namespace BlazorWithFirestore.Server.Controllers
{
[Route("api/[controller]")]
public class EmployeeController : Controller
{
EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();
[HttpGet]
public Task<List<Employee>> Get()
{
return objemployee.GetAllEmployees();
}
[HttpGet("{id}")]
public Task<Employee> Get(string id)
{
return objemployee.GetEmployeeData(id);
}
[HttpPost]
public void Post([FromBody] Employee employee)
{
objemployee.AddEmployee(employee);
}
[HttpPut]
public void Put([FromBody]Employee employee)
{
objemployee.UpdateEmployee(employee);
}
[HttpDelete("{id}")]
public void Delete(string id)
{
objemployee.DeleteEmployee(id);
}
[HttpGet("GetCities")]
public Task<List<Cities>> GetCities()
{
return objemployee.GetCityData();
}
}
}
Creating the Blazor Component
We will create the component in the BlazorWithFirestore.Client/Pages folder. The application template provides the Counter and Fetch Data files by default in this folder. Before adding our own component file, we will delete these two default files to make our solution cleaner. Right-click on theBlazorWithFirestore.Client/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select “ASP.NET Core” from the left-hand panel, then select “Razor Page” from templates panel and name it EmployeeData.cshtml. Click Add. Refer to the image below:
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.
Adding References for JS Interop
We will be using a Bootstrap modal dialog in our application. We will also include a few Font Awesome icons for styling in the application. To be able to use these two libraries, we need to add the CDN references to allow the JS interop.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Here, we have included the CDN references, which will allow us to use the Bootstrap modal dialog and Font Awesome icons in our applications. Now, we will add code to our view files.
EmployeeData.cshtml.cs
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 BlazorWithFirestore.Shared.Models;
using Microsoft.AspNetCore.Blazor;
using Microsoft.AspNetCore.Blazor.Components;
namespace BlazorWithFirestore.Client.Pages
{
public class EmployeeDataModel : BlazorComponent
{
[Inject]
protected HttpClient Http { get; set; }
protected List<Employee> empList = new List<Employee>();
protected List<Cities> cityList = new List<Cities>();
protected Employee emp = new Employee();
protected string modalTitle { get; set; }
protected string searchString { get; set; }
protected override async Task OnInitAsync()
{
await GetCityList();
await GetEmployeeList();
}
protected async Task GetCityList()
{
cityList = await Http.GetJsonAsync<List<Cities>>("api/Employee/GetCities");
}
protected async Task GetEmployeeList()
{
empList = await Http.GetJsonAsync<List<Employee>>("api/Employee");
}
protected void AddEmployee()
{
emp = new Employee();
modalTitle = "Add Employee";
}
protected async Task EditEmployee(string empID)
{
emp = await Http.GetJsonAsync<Employee>("/api/Employee/" + empID);
modalTitle = "Edit Employee";
}
protected async Task SaveEmployee()
{
if (emp.EmployeeId != null)
{
await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/", emp);
}
else
{
await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/", emp);
}
await GetEmployeeList();
}
protected async Task DeleteConfirm(string empID)
{
emp = await Http.GetJsonAsync<Employee>("/api/Employee/" + empID);
}
protected async Task DeleteEmployee(string empID)
{
Console.WriteLine(empID);
await Http.DeleteAsync("api/Employee/" + empID);
await GetEmployeeList();
}
protected async Task SearchEmployee()
{
await GetEmployeeList();
if (searchString != "")
{
empList = empList.Where(
x => x.EmployeeName.IndexOf(searchString,
StringComparison.OrdinalIgnoreCase) != -1).ToList();
}
}
}
}
Here, we have defined the EmployeeDataModel class, which is inheriting from BlazorComponent. This allows the EmployeeDataModel class to act as a Blazor component.
We are also injecting the HttpClient service to enable the web API calls to our EmployeeController API.
We will use two variables, empList and cityList, to hold the data of our Employee and Cities collections respectively. The modalTitle property, which is of type string, is used to hold the title that will be displayed in the modal dialog. The value provided in the search box is stored in the searchString property which is also of type string.
The GetCityList method will make a call to our web API’s GetCities method to fetch the list of city data from the cities collection. The GetEmployeeList method will send a GET request to our web API to fetch the list of Employee Data from the Employee table.
We are invoking these two methods inside the OnInitAsync method, to ensure that the Employee Data and the cities data will be available as the page loads.
The AddEmployee method will initialize an empty instance of the Employee object and set the modalTitle property, which will display the title message on the Add modal popup.
The EditEmployee method will accept the employee ID as the parameter. It will send a GET request to our web API to fetch the record of the employee corresponding to the employee ID supplied to it.
We will use the SaveEmployee method to save the record of the employee for both the Add request and Edit request. To differentiate between the Add and the Edit requests, we will use the EmployeeId property of the Employee object. If an Edit request is made, then the EmployeeId property contains a string value, and we will send a PUT request to our web API, which will update the record of the employee. Otherwise, if we make an Add request, then the EmployeeId property is not initialized, and hence it will be null. In this case, we need to send a POST request to our web API, which will create a new employee record.
The DeleteConfirm method will accept the employee ID as the parameter. It will fetch the Employee Data corresponding to the employee ID supplied to it.
The DeleteEmployee method will send a delete request to our API and pass the employee ID as the parameter. It will then call the GetEmployeeList method to refresh the view with the updated list of Employee Data.
The SearchEmployee method is used to implement the search by the employee name functionality. We will return all the records of the employee, which will match the search criteria either fully or partially. To make the search more effective, we will ignore the text case of the search string. This means the search result will be same whether the search text is in uppercase or in lowercase.
EmployeeData.cshtml
Open EmployeeData.cshtml page and put the following code into it.
@page "/employeerecords"
@inherits EmployeeDataModel
<h1>Employee Data</h1>
<div class="container">
<div class="row">
<div class="col-xs-3">
<button class="btn btn-primary" data-toggle="modal" data-target="#AddEditEmpModal" onclick="@AddEmployee">
<i class="fa fa-user-plus"></i>
Add Employee
</button>
</div>
<div class="input-group col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Employee" bind="@searchString" />
<div class="input-group-append">
<button class="btn btn-info" onclick="@SearchEmployee">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<br />
@if (empList == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class='table'>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Designation</th>
<th>City</th>
</tr>
</thead>
<tbody>
@foreach (var emp in empList)
{
<tr>
<td>@emp.EmployeeName</td>
<td>@emp.Gender</td>
<td>@emp.Designation</td>
<td>@emp.CityName</td>
<td>
<button class="btn btn-outline-dark" data-toggle="modal" data-target="#AddEditEmpModal"
onclick="@(async () => await EditEmployee(@emp.EmployeeId))">
<i class="fa fa-pencil-square-o"></i>
Edit
</button>
<button class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteEmpModal"
onclick="@(async () => await DeleteConfirm(@emp.EmployeeId))">
<i class="fa fa-trash-o"></i>
Delete
</button>
</td>
</tr>
}
</tbody>
</table>
}
<div class="modal fade" id="AddEditEmpModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">@modalTitle</h3>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">X</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label class="control-label">Name</label>
<input class="form-control" bind="@emp.EmployeeName" />
</div>
<div class="form-group">
<label class="control-label">Gender</label>
<select class="form-control" bind="@emp.Gender">
<option value="">-- Select Gender --</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Designation</label>
<input class="form-control" bind="@emp.Designation" />
</div>
<div class="form-group">
<label class="control-label">City</label>
<select class="form-control" bind="@emp.CityName">
<option value="-- Select City --">-- Select City --</option>
@foreach (var city in cityList)
{
<option value="@city.CityName">@city.CityName</option>
}
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-block btn-success"
onclick="@(async () => await SaveEmployee())" data-dismiss="modal">
Save
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deleteEmpModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Confirm Delete !!!</h3>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">X</span>
</button>
</div>
<div class="modal-body">
<table class="table">
<tr>
<td>Name</td>
<td>@emp.EmployeeName</td>
</tr>
<tr>
<td>Gender</td>
<td>@emp.Gender</td>
</tr>
<tr>
<td>Designation</td>
<td>@emp.Designation</td>
</tr>
<tr>
<td>City</td>
<td>@emp.CityName</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal"
onclick="@(async () => await DeleteEmployee(@emp.EmployeeId))">
Delete
</button>
<button data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
</div>
</div>
The route for our component is defined at the top as /employeerecords. To use the methods defined in the EmployeeDataModel class, we will inherit it using the @inherits directive.
We have defined an Add Employee button. Upon clicking, this button will invoke the AddEmployee method and open a modal dialog, which allows the user to fill out the new Employee Data in a form.
We have also defined our search box and a corresponding search button. The search box will bind the value to thesearchString property. On clicking the search button, the SearchEmployee method will be invoked, which will return the filtered list of data as per the search text. If the empList property is not null, we will bind the Employee Data to a table to display it on the web page. Each employee record has the following two action buttons corresponding to it:
- Install the .NET Core 2.1 or above SDK from here.
- Install the latest version of Visual Studio 2017 from here.
- Install the ASP.NET Core Blazor Language Services extension from here.
We have defined a form inside the Bootstrap modal to accept user inputs for the employee records. The input fields of this form will bind to the properties of the employee class. The City field is a drop-down list, which will bind to the cities collection of the database with the help of the cityList variable. When we click on the save button, the SaveEmployee method will be invoked and the modal dialog will be closed.
When the user clicks on the Delete button corresponding to an employee record, another Bootstrap modal dialog will be displayed. This modal will show the Employee Data in a table and ask the user to confirm the deletion. Clicking on the Delete button inside this modal dialog will invoke the DeleteEmployee method and close the modal. Clicking on the Cancel button will close the modal without performing any action on the data.
Adding the Navigation Link to Our Component
Before executing the application, we will add the navigation link to our component in the navigation menu.
Open the BlazorWithFirestore.Client/Shared/NavMenu.cshtml page and add the following navigation link:
<li class="nav-item px-3">
<NavLink class="nav-link" href="employeerecords">
<span class="oi oi-list-rich" aria-hidden="true"></span> Employee Data
</NavLink>
</li>
Hence, we have successfully created a Single Page Application (SPA) using Blazor with the help of Cloud Firestore as a database provider.
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 a navigation link for the Employee data page.
You can perform the CRUD operations on this application as shown in the GIF image at the start of this article.
Conclusion
We have created a Single Page Application (SPA) using Blazor with the help of Google Cloud Firestore as the database provider. We have created a sample employee record management system and perform CRUD operations on it. Firestore is a NoSQL database, which allows us to store data in form of collections and documents. We have also used a bootstrap modal popup to handle user inputs. We have also implemented a search box to search the employee list by employee name.
Please get the source code from GitHub and play around to get a better understanding.
#firebase #database #web-development
