EPeak Daily

How you can carry out CRUD operations utilizing Blazor and Google Cloud Firestore

0 7


Introduction

On this article, we are going to create a Blazor utility utilizing Google Firstore as database supplier. We’ll create a Single Web page Utility (SPA) and carry out CRUD operations on it. We’ll use Bootstrap Four to show a modal popup for dealing with consumer inputs. The shape additionally has a dropdown record, which can bind to a group in our database. We may also implement a client-side search performance to go looking the worker record by worker identify.

Check out the ultimate utility.

Stipulations

  • Set up the .NET Core 2.1 or above SDK from right here
  • Set up newest model of Visible Studio 2017 from right here
  • Set up ASP.NET Core Blazor Language Providers extension from right here

Supply Code

Get the supply code from GitHub.

Configuring Cloud Firestore

Step one is to create a challenge in google Firebase console. Navigate to https://console.firebase.google.com and sign-in together with your google account. Click on on Add Venture hyperlink. A pop up window will open as proven within the picture under. Present your challenge identify and click on on Create challenge button on the backside.

Word the challenge id right here. Firebase challenge ids are globally distinctive. You possibly can edit your challenge id whereas creating a brand new challenge. As soon as the challenge is created you can’t change your challenge id. We’ll use this challenge id in subsequent part whereas initializing our utility.

Click on on the challenge you simply created. A challenge overview web page will open. Choose “Database” from left menu. Then click on on “Create database” button. A popup window will open asking you to pick the “Safety guidelines for Cloud Firestore”. Choose “Begin in locked mode” and click on on allow.

Discuss with the picture under:

It will allow the database to your challenge. Firebase challenge have two choices for database — Realtime Database and Cloud Firestore. For this utility, we are going to use “Cloud Firestore” database. Click on on “Database” dropdown on the prime of the web page and choose “Cloud Firestore”.

Discuss with the picture under:

We’ll create cities assortment to retailer town identify for workers. We may also bind this assortment to a dropdown record in our internet utility from which the consumer will choose the specified metropolis. Click on on “Add assortment”. Set the gathering ID as “cities”. Click on on “Subsequent”. Discuss with the picture under:

Put the Discipline worth as “CityName”, Choose string from the Kind dropdown and fill the worth with metropolis identify as “Mumbai”. Click on on Save. Discuss with the picture under:

It will create the “cities” assortment and insert the primary doc in it. Equally, create 4 extra paperwork inside this assortment and put the “CityName” worth as Chennai, New Delhi, Bengaluru and Hyderabad.

We’ll use “staff” assortment to retailer worker knowledge, however we won’t create it manually. We’ll create “staff” assortment whereas including the primary worker knowledge from the applying.

Configuring Google Utility Credentials

To entry database from our challenge, we have to set the GOOGLE_APPLICATION_CREDENTIALS setting variable to level to a JSON service account key file. It will set an authentication pipeline from our utility to cloud Firestore.

To generate the service account key file comply with the steps talked about under:

Step 1: Navigate to https://console.cloud.google.com/iam-admin/. Login with the identical google account, you’ve gotten used to create Firestore DB.

Step 2: Choose Venture from the drop down in menu bar on the prime.

Step 3: Choose “Service accounts” from the left menu. Choose the service account for which you need to create the important thing. Click on on extra button within the “Actions” column in that row, after which click on Create key.

Discuss with the picture under:

Step 4: A popup modal will open asking you to pick the important thing kind. Choose “JSON” and click on on create button. It will create personal key for accessing your Firestore account and downloads a JSON key file to your machine. We’ll use this file to set GOOGLE_APPLICATION_CREDENTIALS setting variable in later a part of this text.

Create Blazor Net Utility

Open Visible Studio and choose File >> New >> Venture. After deciding on the challenge, a “New Venture” dialog will open. Choose .NET Core inside Visible C# menu from the left panel. Then, choose “ASP.NET Core Net Utility” from accessible challenge varieties. Put the identify of the challenge as BlazorWithFirestore and press OK.

After clicking on OK, a brand new dialog will open asking you to pick the challenge template. You possibly can observe two drop-down menus on the prime left of the template window. Choose “.NET Core” and “ASP.NET Core 2.1” from these dropdowns. Then, choose “Blazor (ASP .NET Core hosted)” template and press OK.

Now, our Blazor resolution shall be created. You possibly can observe that now we have three challenge recordsdata created on this resolution.

  1. BlazorWithFirestore.Consumer — It has the consumer facet code and incorporates the pages that shall be rendered on the browser.
  2. BlazorWithFirestore.Server — It has the server facet codes equivalent to knowledge entry layer and internet API.
  3. BlazorWithFirestore.Shared — It incorporates the shared code that may be accessed by each consumer and server. It incorporates our Mannequin courses.

Including Package deal reference for Firestore

We have to add the bundle reference for Google cloud Firestore, which can permit us to entry our DB from the Blazor utility. Proper click on on BlazorWithFirestore.Shared challenge.

Choose “Edit BlazorWithFirestore.Shared.csproj”. It’ll open the BlazorWithFirestore.Shared.csproj file. Add the next traces inside it.

<ItemGroup>
<PackageReference Embrace="Google.Cloud.Firestore" Model="1.0.0-beta14" />
</ItemGroup>

Equally add these traces to BlazorWithFirestore.Server.csproj file additionally.

Creating the Mannequin

We’ll create our mannequin class in BlazorWithFirestore.Shared challenge. Proper click on on BlazorWithFirestore.Shared and choose Add >> New Folder. Identify the folder as Fashions. Once more, proper click on on Fashions folder and choose Add >> Class so as to add a brand new class file. Put the identify of you class as Worker.cs and click on Add.

Open the Worker.cs class and put the next code into it.

utilizing System;
utilizing Google.Cloud.Firestore;

namespace BlazorWithFirestore.Shared.Fashions
{
[FirestoreData]
public class Worker
{
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’ve got embellished the category with [FirestoreData] attribute. It will permit us to map this class object to Firestore assortment. Solely these class properties, that are marked with [FirestoreProperty] attribute, are thought of after we are saving the doc to our assortment. We don’t want to avoid wasting EmployeeId to our database as it’s generated robotically.

Whereas fetching the information, we are going to bind the auto generated doc id to the EmployeeId property. Equally, we are going to use date property to bind the created date of assortment whereas fetching the report. We’ll use this date property to type the record of staff by created date. Therefore, now we have not utilized [FirestoreProperty] attribute to those two properties.

Equally, create a category file Cities.cs and put the next code into it.

utilizing System;
utilizing Google.Cloud.Firestore;

namespace BlazorWithFirestore.Shared.Fashions
{
[FirestoreData]
public class Cities
{
public string CityName { get; set; }
}
}

Creating Knowledge Entry Layer for the Utility

Proper-click on BlazorWithFirestore.Server challenge after which choose Add >> New Folder and identify the folder as DataAccess. We shall be including our class to deal with database associated operations inside this folder solely. Proper click on on DataAccess folder and choose Add >> Class. Identify your class EmployeeDataAccessLayer.cs.

Put the next code inside this class.

utilizing System;
utilizing System.Collections.Generic;
utilizing System.Linq;
utilizing System.Threading.Duties;
utilizing BlazorWithFirestore.Shared.Fashions;
utilizing Google.Cloud.Firestore;
utilizing Newtonsoft.Json;

namespace BlazorWithFirestore.Server.DataAccess
{
public class EmployeeDataAccessLayer
{
string projectId;
FirestoreDb fireStoreDb;
public EmployeeDataAccessLayer()
{
string filepath = "C:FirestoreAPIKeyblazorwithfirestore-6d0a096b0174.json";
Surroundings.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", filepath);
projectId = "blazorwithfirestore";
fireStoreDb = FirestoreDb.Create(projectId);
}
public async Activity<Listing<Worker>> GetAllEmployees()
{
strive
{
Question employeeQuery = fireStoreDb.Assortment("staff");
QuerySnapshot employeeQuerySnapshot = await employeeQuery.GetSnapshotAsync();
Listing<Worker> lstEmployee = new Listing<Worker>();

foreach (DocumentSnapshot documentSnapshot in employeeQuerySnapshot.Paperwork)
{
if (documentSnapshot.Exists)
{
Dictionary<string, object> metropolis = documentSnapshot.ToDictionary();
string json = JsonConvert.SerializeObject(metropolis);
Worker newuser = JsonConvert.DeserializeObject<Worker>(json);
newuser.EmployeeId = documentSnapshot.Id;
newuser.date = documentSnapshot.CreateTime.Worth.ToDateTime();
lstEmployee.Add(newuser);
}
}

Listing<Worker> sortedEmployeeList = lstEmployee.OrderBy(x => x.date).ToList();
return sortedEmployeeList;
}
catch
{
throw;
}
}
public async void AddEmployee(Worker worker)
{
strive
{
CollectionReference colRef = fireStoreDb.Assortment("staff");
await colRef.AddAsync(worker);
}
catch
{
throw;
}
}
public async void UpdateEmployee(Worker worker)
{
strive
{
DocumentReference empRef = fireStoreDb.Assortment("staff").Doc(worker.EmployeeId);
await empRef.SetAsync(worker, SetOptions.Overwrite);
}
catch
{
throw;
}
}
public async Activity<Worker> GetEmployeeData(string id)
{
strive
{
DocumentReference docRef = fireStoreDb.Assortment("staff").Doc(id);
DocumentSnapshot snapshot = await docRef.GetSnapshotAsync();

if (snapshot.Exists)
{
Worker emp = snapshot.ConvertTo<Worker>();
emp.EmployeeId = snapshot.Id;
return emp;
}
else
{
return new Worker();
}
}
catch
{
throw;
}
}
public async void DeleteEmployee(string id)
{
strive
{
DocumentReference empRef = fireStoreDb.Assortment("staff").Doc(id);
await empRef.DeleteAsync();
}
catch
{
throw;
}
}
public async Activity<Listing<Cities>> GetCityData()
{
strive
{
Question citiesQuery = fireStoreDb.Assortment("cities");
QuerySnapshot citiesQuerySnapshot = await citiesQuery.GetSnapshotAsync();
Listing<Cities> lstCity = new Listing<Cities>();

foreach (DocumentSnapshot documentSnapshot in citiesQuerySnapshot.Paperwork)
{
if (documentSnapshot.Exists)
{
Dictionary<string, object> metropolis = documentSnapshot.ToDictionary();
string json = JsonConvert.SerializeObject(metropolis);
Cities newCity = JsonConvert.DeserializeObject<Cities>(json);
lstCity.Add(newCity);
}
}
return lstCity;
}
catch
{
throw;
}
}
}
}

Within the constructor of this class we’re setting the GOOGLE_APPLICATION_CREDENTIALS setting variable. You have to set the worth of filepath variable to the trail the place the JSON service account key file is positioned in your machine. Keep in mind we downloaded this file within the earlier part. The projectId variable must be set to the challenge id of your Firebase challenge.

We’ve got additionally outlined the strategies for performing CRUD operations. The GetAllEmployees methodology will fetch the record of all worker doc from our “staff” assortment. It’ll return the worker record sorted by doc creation date.

The AddEmployee methodology will add a brand new worker doc to our “staff” assortment. If the gathering doesn’t exist, it’s going to create the gathering first then insert a brand new doc in it.

The UpdateEmployee methodology will replace the sector values of an already current worker doc, primarily based on the worker id handed to it. We’re binding the doc id to employeeId property, therefore we will simply manipulate the paperwork.

The GetEmployeeData methodology will fetch a single worker doc from our “staff” assortment primarily based on the worker id.

DeleteEmployee methodology will delete the doc for a specific worker from the “staff” assortment.

GetCityData methodology will return the record of cities from “cities” assortment.

Including the online API Controller to the Utility

Proper-click on BlazorWithFirestore.Server/Controllers folder and choose Add >> New Merchandise. An “Add New Merchandise” dialog field will open. Choose Net from the left panel, then choose “API Controller Class” from templates panel and put the identify as EmployeeController.cs. Click on Add.

It will create our API EmployeeController class. We’ll name the strategies of EmployeeDataAccessLayer class to fetch knowledge and cross on the information to the consumer facet.

Open EmployeeController.cs file and put the next code into it.

utilizing System;
utilizing System.Collections.Generic;
utilizing System.Threading.Duties;
utilizing BlazorWithFirestore.Server.DataAccess;
utilizing BlazorWithFirestore.Shared.Fashions;
utilizing Microsoft.AspNetCore.Mvc;

namespace BlazorWithFirestore.Server.Controllers
{
[Route("api/[controller]")]
public class EmployeeController : Controller
{
EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();

[HttpGet]
public Activity<Listing<Worker>> Get()
{
return objemployee.GetAllEmployees();
}

[HttpGet("{id}")]
public Activity<Worker> Get(string id)
{
return objemployee.GetEmployeeData(id);
}

[HttpPost]
public void Publish([FromBody] Worker worker)
{
objemployee.AddEmployee(worker);
}

[HttpPut]
public void Put([FromBody]Worker worker)
{
objemployee.UpdateEmployee(worker);
}

[HttpDelete("{id}")]
public void Delete(string id)
{
objemployee.DeleteEmployee(id);

}
[HttpGet("GetCities")]
public Activity<Listing<Cities>> GetCities()
{
return objemployee.GetCityData();
}
}
}

Creating the Blazor part

We’ll create the part within the BlazorWithFirestore.Consumer/Pages folder. The appliance template offers the Counter and Fetch Knowledge recordsdata by default on this folder. Earlier than including our personal part file, we are going to delete these two default recordsdata to make our resolution cleaner. Proper-click on BlazorWithFirestore.Consumer/Pages folder after which choose Add >> New Merchandise. An “Add New Merchandise” dialog field will open, choose “ASP.NET Core” from the left panel, then choose “Razor Web page” from templates panel and identify it EmployeeData.cshtml. Click on Add. Discuss with the picture under:

It will add an EmployeeData.cshtml web page to our BlazorSPA.Consumer/Pages folder. This razor web page could have two recordsdata – EmployeeData.cshtml and EmployeeData.cshtml.cs.

Including references for JS Interop

We shall be utilizing a bootstrap modal dialog in our utility. We may also embody a number of Font Superior icons for styling within the utility. To have the ability to use these two libraries, we have to add the CDN references to permit the JS interop.

<hyperlink 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>

Right here, now we have included the CDN references, which can permit us to make use of the bootstrap modal dialog and Font Superior icons in our purposes. Now, we are going to add codes to our view recordsdata.

EmployeeData.cshtml.cs

Open EmployeeData.cshtml.cs and put the next code into it.

utilizing System;
utilizing System.Collections.Generic;
utilizing System.Linq;
utilizing System.Web.Http;
utilizing System.Threading.Duties;
utilizing BlazorWithFirestore.Shared.Fashions;
utilizing Microsoft.AspNetCore.Blazor;
utilizing Microsoft.AspNetCore.Blazor.Elements;

namespace BlazorWithFirestore.Consumer.Pages
{
public class EmployeeDataModel : BlazorComponent
{
[Inject]
protected HttpClient Http { get; set; }
protected Listing<Worker> empList = new Listing<Worker>();
protected Listing<Cities> cityList = new Listing<Cities>();
protected Worker emp = new Worker();
protected string modalTitle { get; set; }
protected string searchString { get; set; }

protected override async Activity OnInitAsync()
{
await GetCityList();
await GetEmployeeList();
}
protected async Activity GetCityList()
{
cityList = await Http.GetJsonAsync<Listing<Cities>>("api/Worker/GetCities");
}
protected async Activity GetEmployeeList()
{
empList = await Http.GetJsonAsync<Listing<Worker>>("api/Worker");
}
protected void AddEmployee()
{
emp = new Worker();
modalTitle = "Add Worker";
}
protected async Activity EditEmployee(string empID)
{
emp = await Http.GetJsonAsync<Worker>("/api/Worker/" + empID);
modalTitle = "Edit Worker";
}
protected async Activity SaveEmployee()
{
if (emp.EmployeeId != null)
{
await Http.SendJsonAsync(HttpMethod.Put, "api/Worker/", emp);
}
else
{
await Http.SendJsonAsync(HttpMethod.Publish, "/api/Worker/", emp);
}
await GetEmployeeList();
}
protected async Activity DeleteConfirm(string empID)
{
emp = await Http.GetJsonAsync<Worker>("/api/Worker/" + empID);
}
protected async Activity DeleteEmployee(string empID)
{
Console.WriteLine(empID);
await Http.DeleteAsync("api/Worker/" + empID);
await GetEmployeeList();
}
protected async Activity SearchEmployee()
{
await GetEmployeeList();
if (searchString != "")
{
empList = empList.The place(
x => x.EmployeeName.IndexOf(searchString,
StringComparison.OrdinalIgnoreCase) != -1).ToList();
}
}
}
}

Right here, now we have outlined the EmployeeDataModel class, which is inheriting from BlazorComponent. This enables the EmployeeDataModel class to behave as a Blazor part.

We’re additionally injecting the HttpClient service to allow the online API calls to our EmployeeController API.

We’ll use the 2 variables — empList and cityList — to carry the information of our Worker and Cities collections respectively. The modalTitle property, which is of kind string, is used to carry the title that shall be displayed within the modal dialog. The worth supplied within the search field is saved within the searchString property which can also be of kind string.

The GetCityList methodology will make a name to our internet API GetCities methodology to fetch the record of metropolis knowledge from the cities assortment. The GetEmployeeList methodology will ship a GET request to our internet API to fetch the record of Worker Knowledge from the Worker desk.

We’re invoking these two strategies contained in the OnInitAsync methodology, to make sure that the Worker Knowledge and the cities knowledge shall be accessible because the web page hundreds.

The AddEmployee methodology will initialize an empty occasion of the Worker object and set the modalTitle property, which can show the title message on the Add modal popup.

The EditEmployee methodology will settle for the worker ID because the parameter. It’ll ship a GET request to our internet API to fetch the report of the worker equivalent to the worker ID provided to it.

We’ll use the SaveEmployee methodology to avoid wasting the report of the worker for each the Add request and Edit request. To distinguish between the Add and the Edit requests, we are going to use the EmployeeId property of the Worker object. If an Edit request is made, then the EmployeeId property incorporates a string worth, and we are going to ship a PUT request to our internet API, which can replace the report of the worker. In any other case, if we make an Add request, then the EmployeeId property isn’t initialized, and therefore it is going to be null. On this case, we have to ship a POST request to our internet API, which can create a brand new worker report.

The DeleteConfirm methodology will settle for the worker ID because the parameter. It’ll fetch the Worker Knowledge equivalent to the worker ID provided to it.

The DeleteEmployee methodology will ship a delete request to our API and cross the worker ID because the parameter. It’ll then name the GetEmployeeList methodology to refresh the view with the up to date record of Worker Knowledge.

The SearchEmployee methodology is used to implement the search by the worker identify performance. We’ll return all of the data of the worker, which can match the search standards both totally or partially. To make the search simpler, we are going to ignore the textual content case of the search string. This implies the search outcome shall be identical whether or not the search textual content is in uppercase or in lowercase.

EmployeeData.cshtml

Open EmployeeData.cshtml web page and put the next code into it.

@web page "/employeerecords"
@inherits EmployeeDataModel

<h1>Worker Knowledge</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 Worker
</button>
</div>
<div class="input-group col-md-Four offset-md-5">
<enter kind="textual content" class="form-control" placeholder="Search Worker" 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
{
<desk class='desk'>
<thead>
<tr>
<th>Identify</th>
<th>Gender</th>
<th>Designation</th>
<th>Metropolis</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>
</desk>
}
<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 kind="button" class="shut" data-dismiss="modal">
<span aria-hidden="true">X</span>
</button>
</div>
<div class="modal-body">
<kind>
<div class="form-group">
<label class="control-label">Identify</label>
<enter class="form-control" bind="@emp.EmployeeName" />
</div>
<div class="form-group">
<label class="control-label">Gender</label>
<choose class="form-control" bind="@emp.Gender">
<possibility worth="">-- Choose Gender --</possibility>
<possibility worth="Male">Male</possibility>
<possibility worth="Feminine">Feminine</possibility>
</choose>
</div>
<div class="form-group">
<label class="control-label">Designation</label>
<enter class="form-control" bind="@emp.Designation" />
</div>
<div class="form-group">
<label class="control-label">Metropolis</label>
<choose class="form-control" bind="@emp.CityName">
<possibility worth="-- Choose Metropolis --">-- Choose Metropolis --</possibility>
@foreach (var metropolis in cityList)
{
<possibility worth="@metropolis.CityName">@metropolis.CityName</possibility>
}
</choose>
</div>
</kind>
</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">Affirm Delete !!!</h3>
<button kind="button" class="shut" data-dismiss="modal">
<span aria-hidden="true">X</span>
</button>
</div>
<div class="modal-body">
<desk class="desk">
<tr>
<td>Identify</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>Metropolis</td>
<td>@emp.CityName</td>
</tr>
</desk>
</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 part is outlined on the prime as “/employeerecords”. To make use of the strategies outlined within the EmployeeDataModel class, we are going to inherit it utilizing the @inherits directive.

We’ve got outlined an Add Worker button. Upon clicking, this button will invoke the AddEmployee methodology and open a modal dialog, which permits the consumer to fill out the brand new Worker Knowledge in a kind.

We’ve got additionally outlined our search field and a corresponding search button. The search field will bind the worth to searchString property. On clicking the search button, SearchEmployee methodology shall be invoked, which can return the filtered record of information as per the search textual content. If the empList property isn’t null, we are going to bind the Worker Knowledge to a desk to show it on the net web page. Every worker report has the next two motion buttons equivalent to it:

  • Edit: This button will carry out two duties. It’ll invoke the EditEmployee methodology and open the edit worker modal dialog for modifying the worker report.
  • Delete: This button may also carry out two duties. It’ll invoke the DeleteConfirm methodology and open a delete affirm modal dialog, asking the consumer to verify the deletion of the worker’s report .

We’ve got outlined a kind contained in the bootstrap modal to just accept consumer inputs for the worker data. The enter fields of this kind will bind to the properties of the worker class. The Metropolis subject is a drop-down record, which can bind to the cities assortment of the database with the assistance of the cityList variable. After we click on on the save button, the SaveEmployee methodology shall be invoked and the modal dialog shall be closed.

When consumer click on on the Delete button equivalent to an worker report, one other bootstrap modal dialog shall be displayed. This modal will present the Worker Knowledge in a desk and ask the consumer to verify the deletion. Clicking on the Delete button inside this modal dialog will invoke the DeleteEmployee methodology and shut the modal. Clicking on the Cancel button will shut the modal with out performing any motion on the information.

Including the navigation hyperlink to our part

Earlier than executing the applying, we are going to add the navigation hyperlink to our part within the navigation menu.

Open the BlazorWithFirestore.Consumer/Shared/NavMenu.cshtml web page and add the next navigation hyperlink:

<li class="nav-item px-3">
<NavLink class="nav-link" href="employeerecords">
<span class="oi oi-list-rich" aria-hidden="true"></span> Worker Knowledge
</NavLink>
</li>

Therefore, now we have efficiently created a Single Web page Utility (SPA) utilizing Blazor with the assistance of cloud Firestore as database supplier.

Execution Demo

Press F5 to launch the applying.

An internet web page will open as proven within the picture under. The navigation menu on the left is displaying navigation hyperlink for Worker knowledge web page.

You possibly can carry out the CRUD operations on this utility as proven within the GIF picture in the beginning of this text.

Conclusion

We’ve got created a Single Web page Utility (SPA) utilizing Blazor with the assistance of Google cloud Firestore as database supplier. We’ve got created a pattern worker report administration system and carried out CRUD operations on it. Firestore is a NoSQL database, which permits us to retailer knowledge in type of collections and paperwork. We’ve got additionally used a bootstrap modal popup to deal with consumer inputs. We’ve got additionally carried out a search field to go looking the worker record by worker identify.

Please get the supply code from GitHub and mess around to get a greater understanding.

Get my guide Blazor Fast Begin Information to study extra about Blazor.

Making ready for interviews? Learn my article on C# Coding Questions For Technical Interviews

See Additionally

Initially printed at https://ankitsharmablogs.com/



Supply hyperlink

Leave A Reply

Hey there!

Sign in

Forgot password?
Close
of

Processing files…