Сделать инфинити скролл c фильтрацией asp mvc
Есть код:
public ActionResult ShowFirmwares(DateTime? dateFrom, DateTime? dateTo, string UID, int page = 1)
{
if (Request.IsAjaxRequest())
{
return PartialView("GetFirmwares",GetItemsPage(dateFrom, dateTo, UID, page));
}
return View(GetItemsPage(dateFrom, dateTo, UID, page));
}
private IndexViewModel GetItemsPage(DateTime? dateFrom = null, DateTime? dateTo = null, string UID = null, int page = 1)
{
//Сохраняем запрос
IQueryable<Firmware> firmwares = db.Firmwares.GetAll();
if (dateFrom != null)
{
var date = dateFrom.Value.Date;
firmwares = firmwares.Where(t => t.OperationTime.Year >= date.Year &&
t.OperationTime.Month >= date.Month &&
t.OperationTime.Day >= date.Day);
}
if(dateTo != null)
{
var date = dateTo.Value.Date;
firmwares = firmwares.Where(t => t.OperationTime.Year <= date.Year &&
t.OperationTime.Month <= date.Month &&
t.OperationTime.Day <= date.Day);
}
UID = UID?.Trim()?.Replace("0x", "");
if (!string.IsNullOrEmpty(UID))
{
var stringsUID = UID.Split(new[] { " " }, StringSplitOptions.None);
var bytesUID = new byte[stringsUID.Length];
for (int i = 0; i < bytesUID.Length; i++)
{
bytesUID[i] = Convert.ToByte(stringsUID[i], 16);
}
firmwares = firmwares.Where(t => t.UnicID == bytesUID);
}
PageInfo pageInfo = new PageInfo()
{
PageSize = 50,
PageNumber = page,
TotalItems = firmwares.Count()
};
var listFirmwares = firmwares.OrderByDescending(t => t.Id)
.Skip((page - 1) * pageInfo.PageSize).Take(pageInfo.PageSize).ToList();
IndexViewModel ivm = new IndexViewModel()
{
Firmwares = listFirmwares,
PageInfo = pageInfo
};
ViewBag.DateTo = dateTo;
ViewBag.DateFrom = dateFrom;
return ivm;
}
public class IndexViewModel
{
public IEnumerable<Firmware> Firmwares { get; set; }
public PageInfo PageInfo { get; set; }
public DateTime? DateTo { get; set; }
public DateTime? DateFrom { get; set; }
}
public class PageInfo
{
public int PageNumber { get; set; } // номер текущей страницы
public int PageSize { get; set; } // кол-во объектов на странице
public int TotalItems { get; set; } // всего объектов
public int TotalPages // всего страниц
{
get { return (int)Math.Ceiling((decimal)TotalItems / PageSize); }
}
}
<div class="card text-white bg-secondary mt-5 ml-5" style="max-width: 58rem;">
<div class="card-body">
<h5 class="card-title">Форма поиска страница: @Model.PageInfo.TotalPages</h5>
</div>@Model.DateFrom?.Date
<div class="card-body">
@*data-ajax="true" data-ajax-mode="replace" data-ajax-update="#scrolList"*@
<form method="post" action="@Url.Action("ShowFirmwares","Home")" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#scrolList">
<label for="date">Введите дату начала периода:</label>
<input type="date" class="form-control" name="dateFrom">
<label for="date">Введите конца периода:</label>
<input type="date" class="form-control" name="dateTo" id="kek">
<label for="UID">Введите уникальный номер:</label>
<input type="text" class="form-control" name="UID">
<input hidden name="page" value="1">
<input type="submit" value="Применить" class="btn btn-default text-white" />
</form>
</div>
</div>
<div class="mt-5 mr-2 ml-2">
<table class="table table-responsive-xl table-hover text-center" id="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Операция</th>
<th scope="col">Время</th>
<th scope="col">Тип модуля</th>
<th scope="col">Уникальный номер</th>
<th scope="col">Рабочий</th>
<th scope="col">Имя прошивки</th>
</tr>
</thead>
<tbody id="scrolList">
@Html.Partial("GetFirmwares")
</tbody>
</table>
</div>
@*Блок отображения спинера*@
<div class="d-flex justify-content-center" id="loading">
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-grow text-primary mr-4 ml-4" role="status">
<span class="sr-only">Загрузка...</span>
</div>
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Загрузка...</span>
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script type="text/javascript">
$(function () {
//скрываем спинер
$('div#loading').hide();
var page = 1;
var _inCallback = false;
function loadItems() {
if (page > -1 && !_inCallback) {
_inCallback = true;
page++;
//Показываем спинер и запускаем аякс через 1 секунду
$('div#loading').show();
setTimeout(ajaxLoad, 1000);
}
}
function ajaxLoad() {
$.ajax({
type: 'GET',
url: '/Home/ShowFirmwares/',
data: {
page: page,
//ПОЧЕМУ ТО В КАВЫЧКИ
dateFrom: "@ViewBag.DateFrom",
dateTo: "@ViewBag.DateTo"
},
success: function (data) {
if (data != '') {
$("#scrolList").append(data);
}
else {
page = -1;
}
_inCallback = false;
$("div#loading").hide();
}
});
}
//При скролинге окна
$(window).scroll(function () {
//console.log("scroll top: " + $(document).scrollTop() + "document.height: " + $("#table").height() + "window.height: " + $(window).height());
// console.log("TotalPages"+Model.PageInfo.TotalPages + "page:"+ page)
if (($(window).scrollTop() >= $("#table").height() - $(window).height()) && page < @Model.PageInfo.TotalPages) {
//console.log("Достигли конца страницы");
loadItems();
}
});
});
</script>
Как мне сделать бесконечный скроллинг при поиске на форме. То есть проблема в том, что при айакс запросах я рендерю частичное представление и отсылаю модель для того чтобы понять по каким данным фильтровать. Но а АСП сделано так, что модель видит только частичное представление. В главное я переслать не могу. Как мне передать модель в главное представление?