(~/Views/Employee/) Full Tutorial Link: https://medium.com/@ibjects/b6f3a5cc45b4?source=friends_link&sk=998810218c48275f34aa25ee8d480eb4

_AddForm.cshtml

@{ 
    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>

_TableData.cshtml

@{
    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>
}

Index.cshtml

@{
    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>