如何在 asp.net 中为 pagedList 调用 ajax

本文关键字：pagedList 调用 ajax 中为 net asp | 更新日期: 2023-09-27 18:35:01

我正在使用pagedList它正在工作，但我需要一个ajax调用来带来一个我不知道该怎么做的新页面。

public ActionResult ApplicantsRecord(int page =1)
    {
        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);
        }         
        if(Request.IsAjaxRequest())
        {
            return PartialView("_ApplicantsRecord", ar.ToPagedList(page, 10));
        }
        return View(ar.ToPagedList(page, 10));
    }

这是视图代码 

<div id="pagerecord">    
@Html.Partial("_ApplicantsRecord");
</div>    
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">    
        $(document).ready(function () {    
          var getpage = function () {
             var $a = $(this);
             var options = {
                url: $a.attr("href"),
                type: "get"
            };
            $.ajax(options).done(function (data) {
                var target = $a.parents("div.pagedList").attr("next");
                $(target).replaceWith(data);
            });
            return false;
         };
        $('main-conten').on('click', '.pagedList', getpage)
    });
</script>

这是部分视图

<table>
    <thead>
        <tr>
            <th width="220" align="center">                    
                <div class="pagedList" data-back-btn-text="next">
                    @Html.PagedListPager(Model, page => Url.Action("ApplicantsRecord", new { page }),
         PagedListRenderOptions.MinimalWithItemCountText)
                </div>
        </th>
        @*<th width="220" align="center">@Html.DisplayNameFor(model => model.UserName)</th>
            <th width="220" align="center">@Html.DisplayNameFor(model => model.LoginDate)</th>
            <th width="220" align="center">Details</th>*@
    </tr>
</thead>

如何在 asp.net 中为 pagedList 调用 ajax

你已经试过了吗？ 

var getpage = function () {
        var $a = $(this);
        $.ajax({
             url: $a.attr("href"),
             type: "get",
             success: function(data) {
                 var target = $a.parents("div.pagedList").attr("next");
                 $(target).replaceWith(data);
             }, 
             error: function() {
                  return false;
             }
        });
    };

接下来你需要做的是：

试着弄清楚你收到的数据是否真的是你期望的数据。查看是否未输入错误函数。

第一个错误是你的选择器不是有效的选择器。 $('main-conten')可能应该$('#main-conten')(假设它是一个 id 为 main-conten 的元素(。

其次，您使用的是委托事件处理程序，但侦听对 .pagedList 元素的单击，而不是其中的锚点：

$('main-conten').on('click', '.pagedList', getpage)

但是在处理程序中，您希望在使用时单击锚点：

var $a = $(this);

和 

$a.attr("href")

尝试这样的事情：

$(function () {
    // Listen for clicks on anchors inside the paging panel
    $('#main-conten').on('click', '.pagedList a', function () {
        var $a = $(this);
        var options = {
            url: $a.attr("href"),
            type: "get"
        };
        $.ajax(options).done(function (data) {
            // Do something with the returned data
            var target = $a.closest("div.pagedList").attr("next");
            $(target).replaceWith(data);
        });
        return false;
    });
});

笔记：

  • $(function () {YOUR CODE HERE});只是一个方便的快捷方式$(document).ready(function(){});
  • 优先使用closest()，而不是只期望一个匹配的祖先的parents()。

如果所有这些仍然不起作用，请将您的HTML输出(不是源(发布为从浏览器保存的。

相关文章：