I’m using .net core 6 and I have a table that has pagination and if the table page changes, it refreshes the page I want to change the table page without refresh using partialview and Ajax
controller:
JavaScript
x
6
1
public ActionResult Index(int pageId = 1)
2
{
3
UsersForAdminViewModel usersForAdminViewModel=_userService.GetAllUsers(pageId);
4
return View(usersForAdminViewModel);
5
}
6
userService:
JavaScript
1
14
14
1
public UsersForAdminViewModel GetAllUsers(int pageId = 1)
2
{
3
IQueryable<User> result = _context.Users;
4
int take = 1;
5
int skip = (pageId - 1) * take;
6
7
UsersForAdminViewModel usersForAdminViewModel = new UsersForAdminViewModel();
8
usersForAdminViewModel.CurrentPage = pageId;
9
usersForAdminViewModel.PageCount = result.Count() / take;
10
usersForAdminViewModel.Users = result.OrderByDescending(d => d.RegisterDate).Skip(skip).Take(take).ToList();
11
12
return usersForAdminViewModel;
13
}
14
View:
JavaScript
1
36
36
1
@model UsersForAdminViewModel
2
3
<table class="table table-striped table-bordered table-hover">
4
<thead>
5
<tr>
6
<th>Avatar</th>
7
<th>UserName</th>
8
<th>operation</th>
9
</tr>
10
</thead>
11
<tbody>
12
@foreach (var item in Model.Users)
13
{
14
<tr>
15
<td>
16
<img src="/Images/UserAvatars/Thumb/@item.UserAvatar"/>
17
</td>
18
19
<td>@item.UserName</td>
20
<td>
21
<a asp-action="Details" asp-route-id="@item.UserId" class="btn btn-outline btn-warning">Details</a>
22
</td>
23
</tr>
24
}
25
</tbody>
26
</table>
27
<ul class="pagination">
28
29
@for (int i = 1; i <= Model.PageCount; i++)
30
{
31
<li class="paginate_button" aria-controls="dataTables-example" tabindex="0">
32
<a asp-action="Index" asp-route-pageId="@i">@i</a>
33
</li>
34
}
35
</ul>
36
Can you tell me how to do this?
Thankyou
Advertisement
Answer
Could you show your codes about partialview ?
the script could like below:
JavaScript
1
18
18
1
<script>
2
$(document).ready(function () {
3
$("#btRefresh").click(function () {
4
$.ajax({
5
type: "POST",
6
url: "/Test/TestRefresh",
7
success: function (data) {
8
$("#TestDiv").html(data);
9
},
10
error: function (msg) {
11
alert('error:' + msg);
12
}
13
});
14
});
15
});
16
17
</script>
18
Controller:
JavaScript
1
7
1
[HttpPost]
2
public ActionResult TestRefresh()
3
{
4
somelogicalcodes
5
return PartialView("PartialName", somelist);
6
}
7