I've managed to work out how to render a partial View within a <div> from a button click using Jquery.
The script I have passes in a variable (Employee ID) from a textbox to return a partial view containing an employee's details based on the entered Employee ID.
However, once it's rendered the button then stops working.
I'd like to know if it's possible to reload the button whilst keeping the partial view rendered, to then allow the user to enter a further Employee ID into the textbox and then replace the existing Partial view with another.
If this is not possible, is there a way to 'disable' the button (show it grayed out) and add another button which the user would click to 'reload/refresh' the page?
Any help would be much appreciated.
Here's the code:
View: (including the Jquery script which includes commented out variations I've attempted to use to fix the issue)
@model IEnumerable<MISDataRepo.Models.Employee>
<style>
small {
color: red;
font-weight: bold;
}
</style>
<h1>Staff Details</h1>
<p>
Find Employee By ID:
<input type="text" id="EmpId" name="EmpId" />
<button data-url='@Url.Action("PartialIndex","StaffDetailsVM", new { id = "param" } )' class="js-load-partial">Search</button>
<a class="btn btn-info" style="margin: 3px; display:inline-block; float: right" asp-controller="Employees" asp-action="Index">Full Employee List</a>
</p>
<br />
<div id="detailsDiv">
</div>
@section Scripts {
<script src="@Url.Content("//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js")"></script>
<script type="text/javascript">
//$(document).ready(function() {
//$('.js-load-partial').on('click', function(evt) {
// $("body").on('click', '.js-load-partial', function (evt) {
$(document).on('click', '.js-load-partial', function (evt) {
evt.preventDefault();
//evt.stopPropagation();
var $detailDiv = $('#detailsDiv'),
url = $(this).data('url');
url = url.replace("param", $("#EmpId").val());
$.get(url, function(data) {
$detailDiv.replaceWith(data);
});
});
//});
</script>
}
Partial View 1 (ID Exists):
@using MISDataRepo.ViewModels;
@model StaffDetailsVM;
@{
ViewData["Title"] = "Employee Details";
}
<hr />
<h1>Employee Details</h1>
<div>
<h4>@ViewBag.EmpName</h4>
<h4 style="font-weight:bold">PID: @ViewBag.EmpId</h4>
<hr />
<dl class="row">
<dt class="col-sm-2">
Grade
</dt>
<dd class="col-sm-10">
@ViewBag.EmpGrade
</dd>
<dt class="col-sm-2">
Area
</dt>
<dd class="col-sm-10">
@ViewBag.EmpArea
</dd>
<dt class="col-sm-2">
Team
</dt>
<dd class="col-sm-10">
@ViewBag.EmpTeam
</dd>
</dl>
</div>
<br />
<a class="btn btn-success btn-sm" style="margin: 2px" asp-controller="Employees" asp-action="Edit" asp-route-id="@ViewBag.EmpId">Edit Employee Details</a>
<hr />
<h1>Contracted Hours</h1>
<table class="table table-bordered table-hover table-striped">
<thead class=" thead-dark">
<tr>
<th>
Mon
</th>
<th>
Tue
</th>
<th>
Wed
</th>
<th>
Thu
</th>
<th>
Fri
</th>
<th>
Sat
</th>
<th>
Sun
</th>
<th>
Total Weekly Hours
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.ContractedHours)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Mon)
</td>
<td>
@Html.DisplayFor(modelItem => item.Tue)
</td>
<td>
@Html.DisplayFor(modelItem => item.Wed)
</td>
<td>
@Html.DisplayFor(modelItem => item.Thu)
</td>
<td>
@Html.DisplayFor(modelItem => item.Fri)
</td>
<td>
@Html.DisplayFor(modelItem => item.Sat)
</td>
<td>
@Html.DisplayFor(modelItem => item.Sun)
</td>
<td>
@Html.DisplayFor(modelItem => item.TotalHours)
</td>
<td>
<a class="btn btn-success btn-sm" style="margin: 2px" asp-controller="ContractedHours" asp-action="Edit" asp-route-id="@item.EmployeeId">Edit</a>
@*<a class="btn btn-success btn-sm" style="margin: 2px" asp-action="Details" asp-route-id="@item.EmployeeId">Details</a>*@
@*<a asp-action="Delete" asp-route-id="@item.EmployeeId">Delete</a>*@
</td>
</tr>
}
</tbody>
</table>
<hr />
<h1>Access Levels</h1>
<table class="table table-bordered table-hover table-striped">
<thead class="thead-dark">
<tr>
<th>
Access Level
</th>
<th>
App
</th>
@*<th>
Live
</th>*@
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.UserAccessLevel)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.AccessLevel.AccessLevelName)
</td>
<td>
@Html.DisplayFor(modelItem => item.AppLibrary.AppName)
</td>
@*<td>
@Html.DisplayFor(modelItem => item.Live)
</td>*@
<td><a class="btn btn-success btn-sm" style="margin: 2px" asp-controller="UserAccessLevels" asp-action="Edit" asp-route-id="@item.UserAccessLevelId">Edit</a></td>
</tr>
}
</tbody>
</table>
<br />
<a class="btn btn-primary btn-sm" style="margin: 2px" asp-controller="UserAccessLevels" asp-action="Create" asp-route-empId="@ViewBag.EmpId">Create Access Level for User</a>
Partial View 2 (if ID doesnt exist):
@using MISDataRepo.ViewModels;
@model StaffDetailsVM;
@{
ViewData["Title"] = "Invalid ID";
}
<style>
small {
color: red;
font-weight: bold;
}
</style>
<p>
<br /><small style="margin-left: 100px">@ViewBag.Err</small>
</p>
Controller:
public IActionResult PartialIndex(int id)
{
if (!EmployeeExists(id))
{
ViewBag.EmpId = id;
ViewBag.Err = "*Employee ID '" + id + "' does not exist in database, please review!";
//return RedirectToAction("SearchIndex", "Employees");
return PartialView("_invalidID");
}
var employee = _context.Employee.Include(e => e.Area).Include(e => e.Grade).Include(e => e.Team).Where(e => e.EmployeeId == id);
ViewBag.EmpId = id;
ViewBag.EmpName = employee.First().FullName;
ViewBag.EmpGrade = employee.First().Grade.GradeName;
ViewBag.EmpArea = employee.First().Area.AreaName;
ViewBag.EmpTeam = employee.First().Team.TeamName;
StaffDetailsVM vm = new StaffDetailsVM
{
ContractedHours = GetContractedHours(id),
UserAccessLevel = GetUserAccessLevel(id)
};
return PartialView("_partialIndex",vm);
}
