Question

我有一个HTML5表，在asp.net核心剃刀页面中有分页。但通过单击下一页或上一页来刷新整个页面。我想使用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);
    }

}

Answer 1

您可以使用jquery并实现如下所示：

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

Answer 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>");
    });
});

OR

您可以创建一个名为_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>
}

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

2 个答案: