Пейджинговая сетка на стороне сервера с вызовом ajax не обновляет ссылку на страницу - PullRequest
Новая
       45

Пейджинговая сетка на стороне сервера с вызовом ajax не обновляет ссылку на страницу

0 голосов
/ 15 апреля 2020

У меня есть страница, которая отображает различные сетки пользователей моего приложения. Администратор может просматривать всех пользователей каждой роли и их статус в сетках. Я настроил его так, чтобы они могли переключаться между ролями с помощью списка ссылок на роли в верхней части страницы. Когда они нажимают на любую из этих ссылок, он загружает частичное представление, которое показывает сетку. Частичное представление также имеет фильтры, позволяющие фильтровать данные, а сетка имеет сортировку и разбиение на страницы.

Кажется, что все работает нормально, за исключением случаев, когда я go перехожу на новую страницу, сетка обновляется, но ссылки на страницы в нижней части сетки не обновляются. Так что, если я go на странице 2, новые данные отображаются в сетке, НО он по-прежнему говорит, что я страница 1, поэтому я не могу перейти обратно на страницу 1. Я могу принудительно перезагрузить всю страницу, и пейджинг работает , но я не хочу перезагружать всю страницу, я хочу использовать javascript для обновления только сетки.

Вот мой код контроллера: 

public ActionResult Index()
{
    var model = new PupilViewModel();
    // get data
    return View("PupilIndex", model);
}

public ActionResult FilterPupils(PupilGridViewModel viewModel, long personTypeId = 3, int page = 1, string sort = null, string sortDir = null)
{
    //get data, filter and sort   

    return PartialView("_PupilGrid", model);
}

Мой взгляд: 

@model ProjectName.Models.ViewModels.PupilViewModel
@{
Layout = "~/Views/Shared/_LayoutMinimal.cshtml";
ViewBag.Title = "MyGrids";
}

<div class="container" style="width: 100%; height: 600px;">
    <div class="w3-bar w3-blue">
        <ul>
            @foreach (var item in Model.PupilTypes)
            {
                <li style="float: left; list-style-type:none;" class="w3-bar-item w3-button tablink tab">
                <a onclick="LoadGrid(this)" data-id="@item.Id" id="@item.Id" style="padding: 10px;">@item.Name</a>
                </li>
            }
        </ul>
    </div>

    <br />

    <div id="gridPupilResults" style="margin-left: 5px; margin-right: 5px;">
        @{ Html.RenderAction("FilterPupils", "Pupil", new { personTypeId = @personTypeId });}
    </div>
</div>

<script type="text/javascript">

function LoadGrid(e) {
    var id = e.id;
    var url = '@Url.Action("FilterPupils", "Pupil")';
    $.get(url, {
        type: "GET",
        personTypeId: id,
        dataType: 'json',
        contentType: false,
        processData: false
    })
    .done(function (result) {
        $('#gridPupilResults').html(result);
    });
}

</script>

И мое частичное представление, которое на самом деле имеет сетку: 

@model ProjectName.Models.ViewModels.PupilGridViewModel

@{
    var grid = new WebGrid(null, ajaxUpdateContainerId: "grid-content", rowsPerPage: Model.RowsPerPage, pageFieldName: "CurrentPage");
    grid.Bind(Model.Items, rowCount: Model.RecordCount, autoSortAndPage: false);
}

@functions
{
    List<WebGridColumn> RenderGridColumns(WebGrid grid)
    {
         //code to generate columns        
    }

}

<div id="fullGrid">
    <div class="col-md-3 grid-filters">
        //stuff for filters here
    </div>
    <div id="gridData" class="col-md-9 grid-content">
       <br\>
        @if (Model == null || !Model.Items.Any())
        {
            <span>No records were found.</span>
        }
        else
        {
            @grid.GetHtml(tableStyle: "gridtable"
            , columns: RenderGridColumns(grid)
            )
        }
    </div>
</div>

Тогда вот javascript в частичном представлении ... Заметьте, я перехватываю ссылки на пейджинговые ссылки, которые веб-сетка автоматически внедряется в страницу, поэтому она выполняет мой ajax вызов. 

<script type="text/javascript">
    $("#gridData").click(function (event) {
        event.preventDefault();
        var page = event.target.innerText; 
        RefreshData(page);
    }); 

    function RefreshData(page) {
        var _filterSelectors = $('.filter-container').find('.filter-headings input, .filter-Value input');
        var id =@personTypeId;
        var queryString;
        if (page != null) {
            queryString = _filterSelectors.serialize() + "&personTypeId=" + id + "&page=" + page;
         }  
         else {
            queryString = _filterSelectors.serialize() + "&personTypeId=" + id;
         }
         return $.ajax({
             type: "POST",
             url: '@Url.Action("FilterPupils", "Pupil")',
             data: queryString, 
             success: function (result) {
                 var initialText = $('#gridPupilResults').find('.grid-content');
                 var replaceText = $(result).find('.grid-content').html();
                 initialText.html(replaceText);
            },
            complete: function (e) {
                console.log(e.error);
            },
                error: function (e) {
                console.log(e.error);
                console.log(e.src);
                console.log(e.st);
                console.log(e.Inner);
            }
        });
    }

    $('.filters-submit').click(function () {
        RefreshData();
    });

</script>

Это хорошо работает, но мне нужно что-то добавить в свое возвращение, чтобы обновить ссылки на страницы? Это как если бы мне нужно было задать индекс страницы webgrids, но я не уверен, как или возможно ли это в функции javascript.

По сути, я не могу использовать GET в своем вызове ajax, потому что тогда я не могу пройти все мои критерии фильтра. Если я просто разрешу запускать пейджинговую ссылку, то вся страница обновляется, что позволяет установить правильную страницу в веб-сетке, но затем я теряю фильтры, которые выбрал пользователь, а также замедляет пейджинг из-за сброса всей страницы.

...