c# - pagedList中如何使用ajax

Question

我正在使用分页列表并在单击下一个有效时调用 ajax。问题是当我单击不调用 ajax 的上一个或页码时。我需要在分页列表而不是我自己的列表中使用 ajax 调用 Ajax 。

public ActionResult ApplicantsRecord(int? page)
{
        List<ApplicantsRecord> ar = new List<ApplicantsRecord>();
        ApplicantsRecord a = new ApplicantsRecord();
        List<ApplicantsRecordDetailViewModel> apvmlist = new List<ApplicantsRecordDetailViewModel>();
        ApplicantsRecordDetailViewModel apvm = new ApplicantsRecordDetailViewModel();
        //ar = db.ApplicantsRecords.ToList();
        var groupedAR = db.ApplicantsRecords.GroupBy(x => x.SessionId)
                                .Select(y => new
                                {
                                    SessionId = y.Key,
                                    ApplicationsRecords = y.FirstOrDefault(),
                                }).ToList().OrderByDescending(x => x.ApplicationsRecords.LoginDate);

        foreach (var i in groupedAR)
        {
            ar.Add(i.ApplicationsRecords);
        }
        int pageNumber = (page ?? 1);          
        if(Request.IsAjaxRequest())
        {
            return PartialView("_ApplicantsRecord", ar.ToPagedList(pageNumber, 10));
        }
        return View(ar.ToPagedList(pageNumber, 10));
}

View 代码

<div id="targetContainer">
   @Html.Partial("_ApplicantsRecord",Model);
</div>

ajax代码

var npage =2;
$(document).ready(function () {
$('#container').click(function () {
            $.ajax({
                type: "GET",
                traditional: true,
                cache: false,
                url: '/Testing/ApplicantsRecord/',
                data:{page:npage}                    
            })
            .success(function (html) {
                UpdatePage(html);                   
                })
            .error(function () {                   
            });
            return false;
      });
  });
function UpdatePage(html) {
   $("#targetContainer").empty().html(html);
   newpage = $('#newpage').val();      
   npage = parseInt(npage)
   npage = npage + 1;
   $('#newpage').val(npage);           
}

这是局部 View

Answer 1

我明白了，我没有在我的 jquery 包中使用 jquery unobtrusive我使用 Nuget 包下载了 jquery unobtrusive ui 并添加到一个新包中然后将该包包含在我的 _Layout View 中，而不是它开始工作的 jquery 包

并将父 subview 代码更改为这个

@model IPagedList<ApplicantsRecord>


    <div id="container">
        <div class="pagedList">
            @Html.PagedListPager(Model, page => Url.Action("ApplicantsRecord", new { page = page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions()
   {
       HttpMethod = "GET",
       InsertionMode = InsertionMode.Replace,
       UpdateTargetId = "targetContainer"

   }))
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <th width="200" align="center">User Name</th>
                <th width="200" align="center">Login Date Time</th>
                <th width="100" align="center">Details</th>

        </tr>
    </thead>
    <tbody>
        @foreach (var group in Model.GroupBy(x => x.UserName))
        {
            <tr class="group-header">
                <td colspan="6">
                    <span class="label label-info">Applicant : @group.Key</span>
                    <span class="label label-success">Total Test Taken: @group.Count()</span>
                </td>

            </tr>
            foreach (var item in group)
            {
                <tr>
                    <td>@Html.DisplayFor(modelItem => item.UserName)</td>
                    <td>@Html.DisplayFor(modelItem => item.LoginDate)</td>
                    <td>@Html.ActionLink("Details", "ApplicantsRecordDetail", new { id = item.SessionId })</td>

                </tr>

            }
        }
</table>

和这个View的代码

@model IPagedList<ApplicantsRecord>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
    ViewBag.Title = "ApplicantsRecord";
}

<h2>ApplicantsRecord</h2>
<p>
    @Html.ActionLink("Back To List", "QuestionDetail") |
    @Html.ActionLink("Live View ", "LiveView")

</p>
    <div id="targetContainer">
       @Html.Partial("_ApplicantsRecord",Model)
    </div>