Blazor CRUD Using Google Cloud Firestore

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.

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.

  1. BlazorWithFirestore.Client - It has the client side code and contains the pages that will be rendered on the browser.
  2. BlazorWithFirestore.Server - It has the server side code, such as the data access layer and web API.
  3. 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.

Mobile App Development Company India | Ecommerce Web Development Company India

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

We are custom eCommerce Development Company working with all types of industry verticals and providing them end-to-end solutions for their eCommerce store development.

Know more about Top E-Commerce Web Development Company

Hire PHP Developer and Web Developer for your Online Business

Hire PHP Developer and Web Developer for your Online Business

PHP is widely used open-source scripting language it helps in making dynamically easy your websites and web application. Mobiweb Technology is your best technical partner and offering you solution for any kind of website and application...

PHP is widely used open-source scripting language it helps in making dynamically easy your websites and web application. Mobiweb Technology is your best technical partner and offering you solution for any kind of website and application development. To hire PHP developer and web developer at affordable prices contact Mobiweb Technology via [email protected]

Website Development - Top Reasons Why Your Business Need A Creative Website?

Website Development - Top Reasons Why Your Business Need A Creative Website?

Currently, most business owners want a website and expand their business to increase the selling on local to international markets. We give you the top reasons why you need a website.

Most of the entrepreneurs with innovative ideas about start-up businesses are unaware of all the opportunities the internet has for their business.

A major percentage of our population uses the internet to look for local businesses, and if the business does not have a website then most of their potential consumers won’t get to know about the website only. It gets difficult for beginners who have little knowledge about web development this is where the role of web development services comes into the picture. Having a website connects our business to all the parts of the world effortlessly and opens up various new platforms which were not available previously.

The power of a web page is simply incomparable to other expensive methods of advertising like print media. In the era of smartphones, tablets and PCs where everybody is constantly exposed to the internet at every point of life, the competition is brewing like coffee.

Your web page needs to stand out and connect with the consumers, all the web development services can help you to make your website look just as you want it to.

The purpose of your webpage is not only to serve your customer base, but also to attract new customers, so our website needs to be easily accessible and attractive and some of the ways in which a web development company would help you are by.

“The page should be navigable smoothly and effortlessly, and whatever information the customer needs he/she should be able to retrieve it easily through a search box, etc.”

Professional web developers are able to provide these services.

1. Search Engine Optimization
All the websites are competing to be on top of the list of search engine result pages, but only web developers know how to work on this with the help of proper keywords, image optimization, linking, etc.

2. Appropriate Visual Content
It is the need of the hour to provide the customers with relevant visuals to get a proper idea of your business. Hence, we need professional help to balance the text and visuals for your website so that the customer doesn’t get bored beforehand and leave the webpage

3. Online Transaction
Most of the consumers these days prefer cashless and online mode of payment. It becomes more convenient from the sales point of view too to keep a track of online sales records. Web development services ensure that your website has all required mediums for a transaction and also whether all of them are up to date or not.

4. Global Recognition
Once the brand name is out there, it is very important for the website to have a proper connection with the international client base as well as local customers, the format and design of the website helps is doing so.

5. Responsiveness
Anyone could set up an informative website, but to hold the customer’s attention the website also needs to responsive and interactive, Services are provided through which feedback of the customers can be collected and problems can be addressed as well.

6. Reducing Downtime
While the page is being formatted it is unavailable to the customers, this could result in a loss of attention span from many customers. Hence, webmasters make sure that they take as little time as possible to put up new blog posts or advertisements on the website and don’t make the customers wait.

7. Profit-Making Schemes
One of the ways in which our website might earn small profits is by allowing ads. However, it is a tedious job to also block inappropriate content. Web developers allow and block ads accordingly so that the ads don’t take up much space, but also harmlessly add up to the profits.

Read also: PHP Trends: 5 Best Framework For Web Development

The article gives an idea about how it is necessary for a business in the current world to have a webpage, but adding up all the features which would attract customers is not as easy as it looks and which is why web development services to help us.

Source by