Explanation of the Razor View

 

Explanation of the Razor View (Line by Line)

This Razor View is designed for creating a new Employee record in ASP.NET Core MVC using a form with validation, styles, and JavaScript logic.

---

🔹 1. Model Declaration

@model Employee

✔ Declares the Model: The Employee model is used in this view.
✔ Enables strongly typed data binding to form fields.

---

🔹 2. View Header

<h4>New Employee Info</h4>

✔ Displays a heading for the employee form.

---

🔹 3. Inline CSS (Styling)

<style>
    .bold-label{
        font-weight:bold;
    }

    .form-group{
        margin-bottom: 20px;
    }
</style>

✔ Adds custom styling for labels (bold-label) and form groups (form-group).
✔ Makes labels bold and adds spacing between form elements.

---

🔹 4. Bootstrap Row & Form Start

<div class="row">
    <div class="col-md-4">
        <form asp-action="Create" id="createEmployeeForm">

✔ Bootstrap grid (row) for layout.
✔ col-md-4 limits form width.
✔ form asp-action="Create" means the form submits data to the Create action in the Controller.
✔ id="createEmployeeForm" assigns an ID to the form.

---

🔹 5. Validation Summary

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

✔ Displays all validation errors at once if there are model validation issues.
✔ Uses Bootstrap's text-danger class to show errors in red.

---

🔹 6. Employee Name Input

<div class="form-group">
    <label asp-for="Name" class="control-label bold-label">Name <span class="text-danger">*</span></label>
    <input asp-for="Name" class="form-control" id="name" autocomplete="off"/>
    <span asp-validation-for="Name" class="text-danger"></span>
</div>

✔ asp-for="Name" binds the input field to the Name property of the Employee model.
✔ Validation Error Display: asp-validation-for="Name" shows errors if the user enters invalid data.
✔ Bootstrap Classes:

• form-control: Applies Bootstrap styling.
• text-danger: Shows validation errors in red.

---

🔹 7. Gender (Radio Buttons)

<div class="form-group">
    <label asp-for="Gender" class="control-label bold-label">Gender:</label>
    <div>
        <input type="radio" asp-for="Gender" name="Gender" value="Male" id="genderMale" /> Male
    </div>
    <div>
        <input type="radio" asp-for="Gender" name="Gender" value="Female" id="genderFemale" /> Female
    </div>
    <span asp-validation-for="Gender" class="text-danger"></span>
</div>

✔ Two radio buttons for selecting Male or Female.
✔ asp-for="Gender" binds the radio buttons to the Gender property.
✔ Validation Error Message appears if nothing is selected.

---

🔹 8. Designation Input

<div class="form-group">
    <label asp-for="Designation" class="control-label bold-label"></label>
    <input asp-for="Designation" class="form-control" id="designation" autocomplete="off" />
    <span asp-validation-for="Designation" class="text-danger"></span>
</div>

✔ A text input field for Designation.
✔ Uses data binding (asp-for="Designation") and validation.

---

🔹 9. Salary Input

<div class="form-group">
    <label asp-for="Salary" class="control-label bold-label"></label>
    <input asp-for="Salary" class="form-control" id="salary" autocomplete="off" />
    <span asp-validation-for="Salary" class="text-danger"></span>
</div>

✔ Allows the user to enter a salary value.
✔ Includes validation (asp-validation-for="Salary").

---

🔹 10. Date of Birth (DOB)

<div class="form-group">
    <label asp-for="DOB" class="control-label bold-label"></label>
    <input asp-for="DOB" class="form-control" id="dob" type="date" />
    <span asp-validation-for="DOB" class="text-danger"></span>
</div>

✔ Uses an HTML Date Picker (type="date").
✔ Validation message ensures DOB is entered.

---

🔹 11. Department Selection (Dropdown)

<div class="form-group">
    <label asp-for="DepartmentId" class="control-label bold-label">Department:</label>
    <select id="departmentList" asp-for="DepartmentId" class="form-control">
        <option value="">---Select Department---</option>
        @foreach (var department in ViewBag.Departments)
        {
            <option value="@department.DepartmentId">
                @department.DepartmentName
            </option>
        }
    </select>
    <span asp-validation-for="DepartmentId" class="text-danger"></span>
</div>

✔ Dropdown list for department selection.
✔ Populated using ViewBag.Departments.
✔ Shows DepartmentName but stores DepartmentId.

---

🔹 12. Submit Button

<div class="form-group">
    <input type="submit" value="Save" id="btnSave" class="btn btn-primary"/>
</div>

✔ A Bootstrap-styled Save button.
✔ type="submit" submits the form to the Create action.

---

🔹 13. Back to List Link

<div>
    <a asp-action="Index">Back to List</a>
</div>

✔ Navigation link to go back to the Employee list.

---

🔹 14. Client-Side Validation Scripts

@section Scripts{
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }

✔ Loads validation scripts for client-side validation.
✔ _ValidationScriptsPartial contains jQuery validation.

---

🔹 15. JavaScript (Department & DOB Restrictions)

Handle Department Selection

document.getElementById('departmentList').addEventListener('change', function () {
    var selectedDeptId = this.value;
    document.getElementById('selectedDepartmentId').value = selectedDeptId;
});

✔ Stores selected DepartmentId in a hidden field.

---

Restrict Date of Birth (DOB)

const today = new Date();
const minDate = new Date();
minDate.setFullYear(today.getFullYear() - 60, 0, 1); // 1964

const maxDate = new Date();
maxDate.setFullYear(today.getFullYear() - 18, 0, 1); // 2006

document.getElementById('dob').setAttribute('min', minDate.toISOString().split('T')[0]);
document.getElementById('dob').setAttribute('max', maxDate.toISOString().split('T')[0]);

✔ Restricts DOB between 18 to 60 years.
✔ Uses JavaScript Date functions to set min/max date.

---

🔹 Summary

✅ Razor View for Employee Creation
✅ Uses ASP.NET Core MVC Model Binding (asp-for)
✅ Client-Side & Server-Side Validation
✅ Dropdown, Radio, Date Picker, and Form Submission
✅ Bootstrap for Styling & JavaScript for Validation