106 lines
3.5 KiB
Plaintext
106 lines
3.5 KiB
Plaintext
@page "/employee"
|
|
@using Newtonsoft.Json;
|
|
@inject IJSRuntime JSRuntime
|
|
@inject Microsoft.Extensions.Localization.IStringLocalizer<App> Localize
|
|
|
|
<h1>@Localize["Employee Data"]</h1>
|
|
<br />
|
|
<EditForm Model="@employee" OnSubmit="SaveEmployeeToLocalStorage">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="control-label col-md-12">@Localize["Name"]</label>
|
|
<input class="form-control" @bind="employee.Name" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-md-12">@Localize["Gender"]</label>
|
|
<select class="form-control" @bind="employee.Gender">
|
|
<option value="">@Localize["Select Gender"]</option>
|
|
<option value="Male">@Localize["Male"]</option>
|
|
<option value="Female">@Localize["Female"]</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="control-label col-md-12">@Localize["City"]</label>
|
|
<input class="form-control" @bind="employee.City" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label col-md-12">@Localize["Salary"]</label>
|
|
<input type="number" class="form-control" @bind="employee.Salary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
</EditForm>
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<table class='table'>
|
|
<thead class="table-active">
|
|
<tr>
|
|
@foreach (string header in TableHeader)
|
|
{
|
|
<th>
|
|
@Localize[header]
|
|
</th>
|
|
}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (Employee emp in lstEmployees)
|
|
{
|
|
<tr>
|
|
<td>@emp.Name</td>
|
|
<td>@Localize[emp.Gender]</td>
|
|
<td>@emp.City</td>
|
|
<td>@emp.Salary.ToString("C2")</td>
|
|
<td>@emp.JoiningDate</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
@code{
|
|
Employee employee = new Employee();
|
|
List<Employee> lstEmployees = new List<Employee>();
|
|
|
|
string[] TableHeader = { "Name", "Gender", "City", "Salary", "Joining Date" };
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
var empGetJS = (IJSInProcessRuntime)JSRuntime;
|
|
var empList = await empGetJS.InvokeAsync<string>("employeeData.get");
|
|
FetchEmployeeFromLocalStorage(empList);
|
|
}
|
|
|
|
void SaveEmployeeToLocalStorage()
|
|
{
|
|
employee.JoiningDate = DateTime.Now;
|
|
lstEmployees.Add(employee);
|
|
var empSetJS = (IJSInProcessRuntime)JSRuntime;
|
|
empSetJS.InvokeVoid("employeeData.set", JsonConvert.SerializeObject(lstEmployees));
|
|
employee = new Employee();
|
|
}
|
|
|
|
void FetchEmployeeFromLocalStorage(string empList)
|
|
{
|
|
if (empList != null)
|
|
{
|
|
lstEmployees = JsonConvert.DeserializeObject<List<Employee>>(empList);
|
|
}
|
|
}
|
|
|
|
class Employee
|
|
{
|
|
public string Name { get; set; }
|
|
public string Gender { get; set; }
|
|
public string City { get; set; }
|
|
public int Salary { get; set; }
|
|
public DateTime JoiningDate { get; set; }
|
|
}
|
|
}
|