have a page that searches employees by campus. The campuses are populated in a select using razor. I then get all the filtered employees but the page refuses to redraw the DOM with the current number of employees
I have an onchange() of the select it calls an ajax that will call the ActionResult of the page. This somehow works fine since it returns the correct data.
What I have tried:
A select populated using razor
<select placeholder="Select campus" id="selCampus" class="form-control" required>
<option value="">Select campus</option>
@foreach (var campus in Model.Campuses)
{
<option value="@campus.Id">@campus.CampusName</option>
}
</select>
Onchange for the select pointing to the action controller
$("#selCampus").change(function () {
$.ajax({
type: 'POST',
url: '/admin/staff/',
dataType: 'html',
data: ({
campusId: $(this).val()
}),
success: function () {
}
});
});
ActionResult, this loads on pageload and onchange of the select
public ActionResult Employees(long? campusId)
{
var client = new RestClient(Request.Url.GetLeftPart(UriPartial.Authority).ToString());
var request = new RestRequest("api/employee/getClinicMembers/{campusId}", Method.POST);
request.AddParameter("campusId", campusId, ParameterType.QueryString);
var result = client.Execute<ClinicMembersOutput>(request);
ViewBag.title = "Home | Members";
return View(result.Data);
}
Does not want to redraw this code with new data, Even tho Model.Employees has filtered data
@foreach (var member in Model.Employees)
{
<div class="col-lg-4 col-xlg-3 col-md-5 employee">
<div class="card">
<div class="card-body">
</div>
</div>
</div>
}