Blazor CRUD using REST API:
1. Create a new Project:
2. Configure:
3. Create a new Blazor Server App:
4. Create EmployeeInfo Model:
5. Startup.cs :
Add HttpClient:
@page "/employee"
@using BlazorCRUD.Data
@inject HttpClient Http
<NavLink class="nav-link" href="AddEmployee">
<span class="oi oi-plus" aria-hidden="true"></span>Add New
</NavLink>
<h1>Employee Information</h1>
@if (objEmp == null)
{
<p><em>Loading....</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Country</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var emp in objEmp)
{
<tr>
<td>@emp.EmployeeId</td>
<td>@emp.Name</td>
<td>@emp.Gender</td>
<td>@emp.Country</td>
<td>@emp.City</td>
<td>
<a class="nav-link" href="EditEmployee/@emp.EmployeeId">
<span class="oi oi-pencil" aria-hidden="true"></span>Edit
</a>
<a class="nav-link" href="DeleteEmployee/@emp.EmployeeId">
<span class="oi oi-trash" aria-hidden="true"></span>Delete
</a>
</td>
</tr>
}
</tbody>
</table>
}
@code {
IEnumerable<EmployeeInfo> objEmp;
protected override async Task OnInitializedAsync()
{
//Get Data From API
objEmp = await Http.GetJsonAsync<List<EmployeeInfo>> ("https://localhost:44310/api/employee");
}
}
8. Create AddEmployee.razor Page:
@page "/AddEmployee"
@using BlazorCRUD.Data
@inject NavigationManager NavigationManager
@inject HttpClient Http
<h2>Add Employee</h2>
<hr />
<form>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="Name" class="control-label">Name</label>
<input form="Name" class="form-control" @bind="@objEmp.Name" />
</div>
<div class="form-group">
<label for="Gender" class="control-label"></label>
<select @bind="@objEmp.Gender" class="form-control">
<option value="">--Select Gender--</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label for="Country" class="control-label">Country</label>
<input form="Country" class="form-control" @bind="@objEmp.Country" />
</div>
<div class="form-group">
<label for="City" class="control-label">City</label>
<input form="City" class="form-control" @bind="@objEmp.City" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="button" class="btn btn-primary" @onclick="@CreateEmployee" value="Save" />
<input type="button" class="btn btn-primary" @onclick="@Cancel" value="Cancel" />
</div>
</div>
</div>
</form>
@code {
EmployeeInfo objEmp = new EmployeeInfo();
protected void CreateEmployee()
{
//Save using API
Http.PostJsonAsync("https://localhost:44310/api/employee",objEmp);
NavigationManager.NavigateTo("Employee");
}
void Cancel()
{
NavigationManager.NavigateTo("Employee");
}
}
9. Create EditEmployee.razor Page:
@page "/EditEmployee/{CurrentID}"
@using BlazorCRUD.Data
@inject NavigationManager NavigationManager
@inject HttpClient Http
<h2>Update Employee</h2>
<hr />
<form>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<input for="Name" class="form-control" @bind="@objEmp.EmployeeId" />
</div>
<div class="form-group">
<label for="Name" class="control-label">Name</label>
<input form="Name" class="form-control" @bind="@objEmp.Name" />
</div>
<div class="form-group">
<label for="Gender" class="control-label"></label>
<select @bind="@objEmp.Gender" class="form-control">
<option value="">--Select Gender--</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label for="Country" class="control-label">Country</label>
<input form="Country" class="form-control" @bind="@objEmp.Country" />
</div>
<div class="form-group">
<label for="City" class="control-label">City</label>
<input form="City" class="form-control" @bind="@objEmp.City" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="button" class="btn btn-primary" @onclick="@UpdateEmployee" value="Update" />
<input type="button" class="btn btn-primary" @onclick="@Cancel" value="Cancel" />
</div>
</div>
</div>
</form>
@code {
[Parameter]
public string CurrentID { get; set; }
EmployeeInfo objEmp = new EmployeeInfo();
protected override async Task OnInitializedAsync()
{
// objEmp = await Task.Run(() => objEmpService.GetEmployeeById(Convert.ToInt32(CurrentID)));
objEmp = await Http.GetJsonAsync<EmployeeInfo>("https://localhost:44310/api/employee/getbyid/"+CurrentID);
}
protected void UpdateEmployee()
{
//UPdate using API
Http.PutJsonAsync("https://localhost:44310/api/employee",objEmp);
NavigationManager.NavigateTo("Employee");
}
void Cancel()
{
NavigationManager.NavigateTo("Employee");
}
}
10. Create DeleteEmployee.razor Page:
@page "/DeleteEmployee/{CurrentID}"
@using BlazorCRUD.Data
@inject NavigationManager NavigationManager
@inject HttpClient Http
<h2>Delete Employee</h2>
<hr />
<h3>Are you sure want to delete this?</h3>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>Employee ID:</label>
<label>@objEmp.EmployeeId</label>
</div>
<div class="form-group">
<label>Name:</label>
<label>@objEmp.Name</label>
</div>
<div class="form-group">
<label>Gender:</label>
<label>@objEmp.Gender</label>
</div>
<div class="form-group">
<label>Country:</label>
<label>@objEmp.Country</label>
</div>
<div class="form-group">
<label>City:</label>
<label>@objEmp.City</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="button" class="btn btn-danger" @onclick="@DeleteEmpInfo" value="Delete" />
<input type="button" class="btn btn-primary" @onclick="@Cancel" value="Cancel" />
</div>
</div>
</div>
@code {
[Parameter]
public string CurrentID { get; set; }
EmployeeInfo objEmp = new EmployeeInfo();
protected override async Task OnInitializedAsync()
{
//objEmp = await Task.Run(() => objEmpService.GetEmployeeById(Convert.ToInt32(CurrentID)));
objEmp = await Http.GetJsonAsync<EmployeeInfo>("https://localhost:44310/api/employee/getbyid/" + CurrentID);
}
protected void DeleteEmpInfo()
{
//Delete using API
Http.DeleteAsync("https://localhost:44310/api/employee/DeleteById/" + CurrentID);
NavigationManager.NavigateTo("Employee");
}
void Cancel()
{
NavigationManager.NavigateTo("Employee");
}
}
=============================
Follow this Video:
Blazor CRUD using REST API:
https://www.youtube.com/watch?v=M7rJso2UYKc
CRUD Using Blazor And Entity Framework Core in ASP.NET Core:
https://www.youtube.com/watch?v=2GFNi2MVEf0
If you find this article helpful please Subscribe my Channel:
https://www.youtube.com/ashproghelp
============================Thank You===============================
0 Comments