c# - 使用 X.PagedList 在 ASP.NET Core 中更改页面时如何进行 Ajax？

Question

这是我的 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....

我的 partialView 具有要呈现的 ViewComponent 和引用的 DIV：

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

也许我可以获得 JQuery 的 X.PagedList HTML id，例如：

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

我尝试了该 ID，但没有成功。:(

标签： c#asp.net-corepagedlist

Answer 1

好吧，我找到了这个解决方案，但我不确定是否是最好的方法：

1. JQuery - 为您的表格 tr 标签提供一个 ID，并在 jQuery 中的“a”标签的点击事件中引用它，如下所示：

   $('#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