Как Ajax при смене страниц в ASP.NET Core с использованием X.PagedList? - PullRequest
Новая
       15

Как Ajax при смене страниц в ASP.NET Core с использованием X.PagedList?

0 голосов
/ 09 декабря 2018

Это мой ViewComponet: 

@model X.PagedList.PagedList<CbWebApp.DTOs.UsuarioDTO>
@using X.PagedList.Mvc.Core
@using X.PagedList.Mvc.Common

//.....more code

 <div class="pagination-sm text-center">
 Página @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de 
 @Model.PageCount
 @Html.PagedListPager(Model, page => Url.Action("ListaUsuario", new { page = page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions {  Display = PagedListDisplayMode.IfNeeded, MaximumPageNumbersToDisplay = 5 }, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "Get", UpdateTargetId = "usuariosPartial" }))
 </div>

// more code....

Мой частичный View, в котором есть визуализируемый ViewComponent и DIV ссылки: 

  <div id="usuariosPartial" class="col-xs-12 col-md-12">
            @await Component.InvokeAsync("Usuario")
  </div>

Может быть, я смогу получить HTML X.PagedListid для JQuery, например что-то вроде этого: 

 // is this the correct id?
 $("#pagesizelist").change(function (event) {

Я пробовал этот идентификатор, но безуспешно.(

1 Ответ

0 голосов
/ 09 декабря 2018

Ну, я нашел это решение, но я не уверен, что это лучший подход:

  1. JQuery - присвойте идентификатор тегу tr таблицы и укажите его в событии clickтег 'a' в jQuery выглядит следующим образом: 

    $('#replaceMyTr').on('click', 'a', function (e) {

e.preventDefault();
$("#icon").hide();
$("#progress").show();
$("#msg").hide();
$('input, button, a').disable(true);

var IdDoPerfilDoUsuario;
var este = $(this);

function getUrlVars() {
var vars = [], hash;
var hashes = este.attr("href").slice(este.attr("href").indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
}
return vars;
}

var page = getUrlVars()["page"];

if ($("select option:selected").first().val() === "--Todos--") {
IdDoPerfilDoUsuario = 0;
}
else {
IdDoPerfilDoUsuario = $("select option:selected").first().val();
}

$("#usuariosPartial").hide();
este.attr('disabled', 'disabled');

$.ajax({
url: "/Usuario/ListaUsuario",
type: 'GET',
cache: false,
data: { IdDoPerfilDoUsuario: IdDoPerfilDoUsuario, page: page },
success: function (result) {
    $("#icon").show();
    $("#progress").hide();
    $("#msg").show();
    $('input, button, a').disable(false);
    $("#usuariosPartial").show();
    $('#usuariosPartial').html(result);
}

});
return false;
});

  2. Просмотреть код: 

    // more code...
<tfoot>
    <tr id="replaceMyTr">
        @*<td colspan="7">*@
        <td>
            <div class="pagination-sm text-center">
                @Html.PagedListPager((IPagedList)Model.Usuarios.ToEnumerable(), page => Url.Action("ListaUsuario", new { page = page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions { Display = PagedListDisplayMode.IfNeeded, MaximumPageNumbersToDisplay = 5 }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "teste" }))
            </div>
        </td>
    </tr>
</tfoot>

//....more code
...