update UI for delete page

Author: adampodolak

src/WorkforceAnalyticsDashboard/WorkforceAnalyticsDashboard/Controllers/EmployeeController.cs

@@ -184,7 +184,10 @@ public async Task<IActionResult> Delete(int? id)
             }
 
             var employee = await _context.Employees
+                .Include(e => e.Department)
+                .Include(e => e.Job)
                 .FirstOrDefaultAsync(m => m.EmployeeID == id);
+
             if (employee == null)
             {
                 return NotFound();

src/WorkforceAnalyticsDashboard/WorkforceAnalyticsDashboard/Views/Employees/Delete.cshtml

@@ -1,75 +1,84 @@
-@model Employee
+@model WorkforceAnalyticsDashboard.Models.Employee
 
 @{
     ViewData["Title"] = "Delete";
 }
 
 <h1>Delete</h1>
 
-<h3>Are you sure you want to delete this?</h3>
+<h3 class="mb-4">Are you sure you want to delete this?</h3>
+
 <div>
     <h4>Employee</h4>
     <hr />
     <dl class="row">
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.FirstName)
+        <dt class="col-sm-2">
+            First Name
         </dt>
-        <dd class = "col-sm-10">
+        <dd class="col-sm-10">
             @Html.DisplayFor(model => model.FirstName)
         </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.LastName)
+
+        <dt class="col-sm-2">
+            Last Name
         </dt>
-        <dd class = "col-sm-10">
+        <dd class="col-sm-10">
             @Html.DisplayFor(model => model.LastName)
         </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.Email)
+
+        <dt class="col-sm-2">
+            Email
         </dt>
-        <dd class = "col-sm-10">
+        <dd class="col-sm-10">
             @Html.DisplayFor(model => model.Email)
         </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.PhoneNumber)
+
+        <dt class="col-sm-2">
+            Phone Number
         </dt>
-        <dd class = "col-sm-10">
+        <dd class="col-sm-10">
             @Html.DisplayFor(model => model.PhoneNumber)
         </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.HireDate)
+
+        <dt class="col-sm-2">
+            Hire Date
         </dt>
-        <dd class = "col-sm-10">
+        <dd class="col-sm-10">
             @Html.DisplayFor(model => model.HireDate)
         </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.DepartmentID)
+
+        <dt class="col-sm-2">
+            Department
         </dt>
-        <dd class = "col-sm-10">
-            @Html.DisplayFor(model => model.DepartmentID)
+        <dd class="col-sm-10">
+            @Model.Department?.Name
         </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.JobID)
+
+        <dt class="col-sm-2">
+            Job
         </dt>
-        <dd class = "col-sm-10">
-            @Html.DisplayFor(model => model.JobID)
+        <dd class="col-sm-10">
+            @Model.Job?.JobTitle
         </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.Salary)
+
+        <dt class="col-sm-2">
+            Salary
         </dt>
-        <dd class = "col-sm-10">
+        <dd class="col-sm-10">
             @Html.DisplayFor(model => model.Salary)
         </dd>
-        <dt class = "col-sm-2">
-            @Html.DisplayNameFor(model => model.Status)
+
+        <dt class="col-sm-2">
+            Status
         </dt>
-        <dd class = "col-sm-10">
+        <dd class="col-sm-10">
             @Html.DisplayFor(model => model.Status)
         </dd>
     </dl>
-    
+
     <form asp-action="Delete">
         <input type="hidden" asp-for="EmployeeID" />
-        <input type="submit" value="Delete" class="btn btn-danger" /> |
-        <a asp-action="Index">Back to List</a>
+        <input type="submit" value="Delete" class="btn btn-danger" />
+        <a asp-action="Index" class="btn btn-outline-secondary">Back to List</a>
     </form>
 </div>