在 asp.net 核心中使用 ajax 和部分视图进行分页和搜索

Question

我正在使用 .net core 6 和我有一个 table 有分页，如果 table 页面发生变化，它会刷新页面我想使用局部视图和 Ajax

在不刷新的情况下更改 table 页面

控制器：

        public ActionResult Index(int pageId = 1)
        {
            UsersForAdminViewModel usersForAdminViewModel=_userService.GetAllUsers(pageId);
            return View(usersForAdminViewModel);
        }

用户服务：

        public UsersForAdminViewModel GetAllUsers(int pageId = 1)
        {
            IQueryable<User> result = _context.Users;
            int take = 1;
            int skip = (pageId - 1) * take;

            UsersForAdminViewModel usersForAdminViewModel = new UsersForAdminViewModel();
            usersForAdminViewModel.CurrentPage = pageId;
            usersForAdminViewModel.PageCount = result.Count() / take;
            usersForAdminViewModel.Users = result.OrderByDescending(d => d.RegisterDate).Skip(skip).Take(take).ToList();
            
            return usersForAdminViewModel;
        }

查看：

@model UsersForAdminViewModel

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>Avatar</th>
            <th>UserName</th>
            <th>operation</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Users)
        {
            <tr>
                <td>
                        <img src="/Images/UserAvatars/Thumb/@item.UserAvatar"/>
                </td>

                <td>@item.UserName</td>
                <td>
                    <a asp-action="Details" asp-route-id="@item.UserId" class="btn btn-outline btn-warning">Details</a>
                </td>
            </tr>
        }
    </tbody>
</table>       
 <ul class="pagination">

            @for (int i = 1; i <= Model.PageCount; i++)
            {                  
                    <li class="paginate_button" aria-controls="dataTables-example" tabindex="0">
                        <a asp-action="Index" asp-route-pageId="@i">@i</a>
                    </li>
            }
        </ul>

你能告诉我怎么做吗？

谢谢

Answer 1

你能展示一下关于局部视图的代码吗？

脚本可能如下所示：

<script>
    $(document).ready(function () {
        $("#btRefresh").click(function () {
            $.ajax({
                type: "POST",
                url: "/Test/TestRefresh",
                success: function (data) {
                    $("#TestDiv").html(data);
                },
                error: function (msg) {
                    alert('error：' + msg);
                }
            });
        });
    });

</script>

控制器：

[HttpPost]
        public ActionResult TestRefresh()
        {
            somelogicalcodes
            return PartialView("PartialName", somelist);
        }

在 asp.net 核心中使用 ajax 和部分视图进行分页和搜索

paging and search with ajax and partial view in asp.net core

javascript

c#

ajax

jquery

asp.net-core