As I delve into learning ajax requests, I find myself questioning if I am on the right track. Currently, I have a page that incorporates pagination, sorting, and searching functionalities. My goal is to implement these features using ajax to avoid reloading the entire page. Below is an excerpt from my parent view:
..
<div id="nursesList">
@Html.Partial("PaginatedNurses", Model)
</div>
...
Furthermore, here is the partial where I attempt to utilize ajax:
@using Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http
@using X.PagedList
@using X.PagedList.Mvc.Core
@using X.PagedList.Mvc.Core.Common
@model X.PagedList.IPagedList<Services.ViewModel.Admin.Nurse.NurseDetailsViewModel>
<form>
<div id="RegisteredNurses">
<div class="form-group row">
<div class="col-md-3">
از سن <input class="form-control" id="minAge" type="number" name="MinAge" value="@ViewBag.MinAge" />
</div>
<div class="col-md-3">
تا سن <input class="form-control" id="maxAge" type="number" name="maxAge" value="@ViewBag.MaxAge" />
</div>
<div class="col-md-3">
مرتب سازی بر اساس
<select class="form-control" name="SortOrder" value="@ViewBag.SortOrder" style="width: 200px" id="sortOrder">
<option value="age">
سن
</option>
<option value="registerDate">
زمان ثبت نام
</option>
</select>
</div>
<div class="col-md-3">
نحوه مرتب سازی
<select class="form-control" name="SortType" value="@ViewBag.SortType" style="width: 200px" id="sortType">
<option value=1>
صعودی
</option>
<option value=0>
نزولی
</option>
</select>
</div>
</div>
<input type="submit" value="جست و جو" id="btnSearch" />
... (remaining content unchanged) ...
</div>
</form>
@section modalSection
{
<script src="~/js/jquery.unobtrusive-ajax.min.js"></script>
}
The main section to focus on is as follows:
<div id="pager">
@Html.PagedListPager((IPagedList)Model, page => Url.Action("RegisteredNurseList", new { page}),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "RegisteredNurses" }))
</div>
To further enhance functionality, I aim to incorporate the input values into my DOM. For instance:
<div id="pager">
@Html.PagedListPager((IPagedList)Model, page => Url.Action("RegisteredNurseList", new { page , sortOrder=('#sortOrder').val()}),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "RegisteredNurses" }))
</div>
While acknowledging that sortOrder=('#sortOrder').val() may not be valid code, I seek alternative solutions or better approaches.
Here is an overview of my controller:
public async Task<ActionResult> RegisteredNurseList(int? page, int? sortType,string sortOrder,
int? minAge, int? maxAge)
{
... (controller logic remains unchanged) ...
}