Сделать инфинити скролл 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>

Как мне сделать бесконечный скроллинг при поиске на форме. То есть проблема в том, что при айакс запросах я рендерю частичное представление и отсылаю модель для того чтобы понять по каким данным фильтровать. Но а АСП сделано так, что модель видит только частичное представление. В главное я переслать не могу. Как мне передать модель в главное представление?


Ответы (0 шт):