How to perform CRUD operations using Blazor and Google Cloud Firestore

How to perform CRUD operations using Blazor and Google Cloud FirestoreAnkit SharmaBlockedUnblockFollowFollowingMar 15IntroductionIn this article, we will create a Blazor application using Google Firstore as database provider.

We will create a Single Page Application (SPA) and perform CRUD operations on it.

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.

PrerequisitesInstall the .

NET Core 2.

1 or above SDK from hereInstall latest version of Visual Studio 2017 from hereInstall ASP.

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 searchString property.

On clicking the search button, 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:Edit: This button will perform two tasks.

It will invoke the EditEmployee method and open the edit employee modal dialog for editing the employee record.

Delete: This button will also perform two tasks.

It will invoke the DeleteConfirm method and open a delete confirm modal dialog, asking the user to confirm the deletion of the employee’s record .

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 user click 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 componentBefore 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 database provider.

Execution DemoPress 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.

You can perform the CRUD operations on this application as shown in the GIF image at the start of this article.

ConclusionWe have created a Single Page Application (SPA) using Blazor with the help of Google cloud Firestore as database provider.

We have created a sample employee record management system and performed 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.

Get my book Blazor Quick Start Guide to learn more about Blazor.

Preparing for interviews?.Read my article on C# Coding Questions For Technical InterviewsSee AlsoBlazorGrid — A Reusable Grid Component For BlazorPublishing A Blazor Component To Nuget GalleryDeploying a Blazor Application on IISDeploying A Blazor Application On AzureHosting A Blazor Application on FirebaseCRUD Using Blazor with MongoDBSingle Page Application Using Server-Side BlazorOriginally published at https://ankitsharmablogs.