Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
@{
Employee Employee = (Employee)ViewData["Employee"];
string Title = (string)ViewData["Title"];
}
<div>
<label style="font-weight:bold">@Title</label>
</div>
<div class="pt-2 mb-2 employee_form" style="overflow:auto">
<table class="table table-bordered table-sm table-striped table-bordered">
<thead>
<tr style="background-color:azure">
<td>Property</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 100px">First Name*</td>
<td>
<input type="hidden" id="employee_id" value="@Employee.EmployeeId" />
<input class="form-control-sm w-100" id="first_name" value="@Employee.FirstName" autocomplete="off" />
</td>
</tr>
<tr>
<td style="width: 100px">Last Name*</td>
<td>
<input class="form-control-sm w-100" id="last_name" value="@Employee.LastName" autocomplete="off" />
</td>
</tr>
<tr>
<td style="width: 100px">Position*</td>
<td>
<input class="form-control-sm w-100" id="position" value="@Employee.Position" autocomplete="off" />
</td>
</tr>
<tr>
<td style="width: 100px">Department*</td>
<td>
<input class="form-control-sm w-100" id="department" value="@Employee.Department" autocomplete="off" list="departments" />
<datalist id="departments">
@foreach (var dept in Enum.GetValues(typeof(Department)))
{
<option value="@dept" />
}
</datalist>
</td>
</tr>
<tr>
<td style="width: 100px">Salary</td>
<td>
<input class="form-control-sm w-100" id="salary" value="@Employee.Salary" autocomplete="off" />
</td>
</tr>
<tr>
<td style="width: 100px">Date Joined</td>
<td>
<input class="form-control-sm w-100" id="date_joined" value="@(Employee.DateJoined == DateTime.MinValue ? DateTime.Now : Employee.DateJoined)" autocomplete="off" />
</td>
</tr>
<tr>
<td style="width: 100px">Last Changed</td>
<td>
<input class="form-control-sm w-100" id="last_changed" value="@DateTime.Now" readonly="readonly" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:right">
<button type="button" class="btn btn-sm btn-outline-primary employee-form-save" id="save_form">
<i class="fa fa-floppy-o" style="margin-right:5px"></i>
@(Employee.EmployeeId != 0? "Update" : "Create")
</button>
<button type="button" class="btn btn-sm btn-outline-primary employee-form-close" id="close_form">
<i class="fa fa-close" style="margin-right:5px"></i>
Close
</button>
</td>
</tr>
</tfoot>
</table>
</div>
@{
List<Employee> EmployeeList = (List<Employee>)ViewData["EmployeesList"];
}
@if (EmployeeList.Count > 0)
{
foreach (var employee in EmployeeList)
{
<tr class="employees-row" style="width: 20%; text-align:center;">
<td>@employee.FirstName</td>
<td>@employee.LastName</td>
<td>@employee.Position</td>
<td>@employee.Department</td>
<td>@employee.Salary</td>
<td>@employee.DateJoined</td>
<td>@employee.LastUpdated</td>
<td>
<button type="button" class="btn btn-sm btn-dark employee-edit" data-id="@employee.EmployeeId">
<i class="fa fa-edit"></i>
</button>
<button type="button" class="btn btn-sm btn-danger employee-delete" data-id="@employee.EmployeeId">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
}
}
else
{
<tr>
<td colspan="10" style="text-align: center">
<div>
No Records
</div>
</td>
</tr>
}
@{
ViewData["Title"] = "Index";
}
@section scripts {
<script src="~/Views/Employee/employee.js"></script>
}
<div class="module employees" style="padding: 15px">
<div class="px-2 mt-2" style="padding: 15px; display:flex">
<input id="keyword" class="form-control-sm" placeholder="Search Keyword" />
<button id="search_employee" class="btn btn-sm btn-success w-15 ml-2">
<span class="spinner-border spinner-border-sm mr-1" role="status" style="display:none"></span>
<i class="fa fa-search mr-1"></i>
Search
</button>
<button type="button" id="add_employee" data-toggle="modal" class="employee-add btn btn-outline-secondary btn-sm ml-1">Add New Employee</button>
</div>
<div class="d-flex flex-row flex-wrap justify-content-center align-items-center" style="margin-bottom: 60px; padding-left: 10px; padding-right: 10px;">
<table id="employees_list" class="table table-bordered table-sm table-striped table-bordered" style="padding-left: 25px">
<thead>
<tr class="theme-secondary" style="background-color: #2b88d8; text-align:center;padding:25px;">
<th style="padding-left: 15px;">First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Department</th>
<th>Salary</th>
<th>Date Joined</th>
<th>Last Updated</th>
<th> </th>
</tr>
</thead>
<tbody style="text-align:center">
@*This is a comment. The data of body will come from a partial view.*@
</tbody>
</table>
<div class="employee-form-container" id="employee_form" style="width: 100%; height:100%">
@*We'll display add new employee form here.*@
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment