Пейджинговая таблица ядра Asp.Net с Ajax в Razor View - PullRequest
Новая
       29

Пейджинговая таблица ядра Asp.Net с Ajax в Razor View

0 голосов
/ 23 декабря 2018

У меня есть таблица 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);
    }

}

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Вы можете создать API, который возвращает ваши данные в формате json, а затем использовать 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>
}
0 голосов
/ 24 декабря 2018

Вы можете использовать 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);
         }
      });
   });
})
...