在 Razor 视图中使用 Ajax 进行 Asp.Net Core 表分页

Posted 2023-03-27

【中文标题】在 Razor 视图中使用 Ajax 进行 Asp.Net Core 表分页

【英文标题】：Asp.Net Core Table Paging With Ajax in Razor View

【发布时间】：2019-05-22 22:21:55

【问题描述】：

我在 asp.net core razor 页面中有一个带有分页的 html5 表格。但通过单击下一页或上一页刷新整个页面。我想使用ajax在表格中实现分页。 我如何实现ajax分页？？？

  @foreach (var user in Model.UserManageViewModel.User)
            

                <tr>                        
                    <td>@string.Format("0 1", user.Name, user.LastName)</td>
                    <td>@user.NationalCode</td>
                    <td>@user.Mobile</td>
                    <td>@user.Email</td>
                    <td>@user.RegisterDate.ToShamsi()</td>
                    <td class="@((@user.IsActive)?"text-success":"text-danger")">@((user.IsActive) ? "فعال" : "غیرفعال")</td>
                    <td>@user.UserRoles</td>
                </tr>
            

  <a href="/Admin/users?pageId=@Model.UserManageViewModel.CurrentPage + 1)>next</a>

我的代码是：

public class IndexModel : PageModel

    private IUserService _userService;

    public IndexModel(IUserService userService)
    
        _userService = userService;
    

    public TableViewModel<User> UserManageViewModel  get; set; 

    public async Task OnGetAsync(int pageId=1,int maxRows=10)
    
            UserManageViewModel =await _userService.GetUserList(pageId, maxRows);
    

【问题讨论】：

您可以使用异步局部视图并在局部视图中显示您的表格。所以，只有那部分会在回发时刷新

但是使用标签进行分页没有刷新所有页面？？？

【参考方案1】：

您可以使用 jquery 并像这样实现它：

<div id="users">
    @foreach (var user in Model.UserManageViewModel.User)
    ...
</div>

<a href="#">next</a>

$().ready(function()
   $("a").click(function()
      $.ajax(
         type: "POST",
         url: '@Url.Action("Users", "Admin",pageId=@Model.UserManageViewModel.CurrentPage + 1)',
         contentType: "application/json",
         dataType: "html",
         success: function (response) 
            $('#users').html(response);
         ,
         failure: function (response) 
            alert(response.responseText);
         ,
         error: function (response) 
           alert(response.responseText);
         
      );
   );
)

【讨论】：

我不能使用这个，因为我有一个包含用户列表和 pagenum 的类，......并且 json 不会发送所有这些。

【参考方案2】：

您可以创建一个以 json 格式返回数据的 api，然后使用 javascript 动态创建表。

像这样创建一个控制器：

[Route("[controller]/[action]")]
public class ApiController : Controller

    private readonly IUserService _userService;

    public ApiController(IUserService userService)
    
        _userService = userService;
    

    [HttpGet]
    public async Task<JsonResult> GetUsers(int pageId = 1, int maxRows = 10)
    
        var tableVm = await _userService.GetUserList(pageId, maxRows); //TableViewModel<User>

        return Json(tableVm);
    

然后在按下下一个或上一个按钮时在您的脚本中：

$.getJSON("/api/getstudents", 
    pageId: currentPage + 1, //the pageId you want to retrieve
    maxRows: 10              //how many rows you want to retrieve
).done(function(data) 
    console.log(data);
    //data.currentPage has the new page index
    //data.user is an array of 10 Users

    currentPage = data.currentPage;

    //create the table however you like
    $.each(data.user, function(key, value) 
        $("table").append("<tr><td>" + value.lastName + "</td></tr>");
    );
);

或

您可以创建一个名为 _Users.cshtml 的局部视图：

@model TableViewModel<User>

<table class="table table-striped">
    @foreach(var user in Model.User)
    
        <tr>                        
            <td>@string.Format("0 1", user.Name, user.LastName)</td>
            <td>@user.NationalCode</td>
            <td>@user.Mobile</td>
            <td>@user.Email</td>
            <td>@user.RegisterDate.ToShamsi()</td>
            <td class="@((@user.IsActive)?"text-success":"text-danger")">@((user.IsActive) ? "فعال" : "غیرفعال")</td>
            <td>@user.UserRoles</td>
        </tr>
    
</table>

然后向您的 IndexModel 添加一个新的处理程序：

public async Task<PartialViewResult> OnGetUsersPartial(int pageId = 1, int maxRows = 10)

    var tableVm = await _userService.GetUserList(pageId, maxRows);

    return new PartialViewResult
    
        ViewName = "_Users",
        ViewData = new ViewDataDictionary<List<User>>(ViewData, tableVm)
    ;

您的 OnGetAsync() 中不需要任何内容​​，也不再需要 UserManageViewModel 属性。

最后在您的索引视图中添加：

<table id="table"></table>
<a id="next">Next</a>

@section Scripts

    <script>
        $(function() 
            var pageId = 1;

            var loadTable = function(pageId) 
                $('#table').load('/Index?handler=UsersPartial&pageId=' + pageId + '&maxRows=10');
            

            loadTable(pageId);

            $('#next').on('click', function() 
                loadTable(pageId++);
            );
        );
    </script>