Question

我无法进行分页异步。我正在使用pagedlist和pagedListMvc包。分页似乎工作正常，但当我添加Javascript使其Asynch没有任何事情发生，即分页根本不起作用。我不知道为什么这不起作用。请查看下面的代码

这是控制器代码

    public ActionResult Index(ConsultantSearch model, int page = 1)
    { const int RecordsPerPage=5;

        if (!String.IsNullOrEmpty(model.SearchButton))
        {                
            var consultants = from con in db.Consultants
                              where (model.ConsultantName == null || con.ConsultantName.Contains(model.ConsultantName)) && (model.CompanyID == null || con.CompanyID == model.CompanyID) 
                              && (model.ClientID == null || con.ClientID == model.ClientID) && (model.VendorID == null || con.VendorID == model.VendorID) && (model.RecruiterID == null || con.RecruiterID == model.RecruiterID)
                              && (model.Class == null || con.Class == model.Class) && (model.W2_1099 == null || con.W2_1099 == model.W2_1099) && (model.IsActive == null || con.IsActive == model.IsActive)
                              select con;              


            consultants = consultants.Include(c => c.Client).Include(c => c.Company).Include(c => c.Recruiter).Include(c => c.SalesPerson).Include(c => c.Vendor);
            return PartialView("_ConsultantList",consultants.ToList().ToPagedList(page,RecordsPerPage)); 


        }
        else
        {

            var consultants = db.Consultants.Include(c => c.Client).Include(c => c.Company).Include(c => c.Recruiter).Include(c => c.SalesPerson).Include(c => c.Vendor);
            return View(consultants.ToList().ToPagedList(page, RecordsPerPage));
        }
    }

实现分页的部分视图是

@model PagedList.IPagedList<ArthurLawrenceKPI.Models.DatabaseModels.Consultant>
<div id="consultantSearchResults">

    <div class"pagedList" data-al-target="#consultantSearchResults">
    @Html.PagedListPager(Model, page => Url.Action("Index",new{ page} ),
    PagedListRenderOptions.MinimalWithItemCountText)
    </div>
   <table>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.First().ConsultantName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.First().EmailAddress)
            </th>
            </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ConsultantName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EmailAddress)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ConsultantID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ConsultantID     }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ConsultantID })
                </td>
            </tr>
        }
    </table>

最后，这是我的javascrpt文件，其中包含用于使分页机制异步的代码。我已将此js文件和其他相关的.js文件包含在bundle.config中的一个包中，并将它们包含在_Layout中。

$(function () {
var getPage = function () {
    var $a = $(this);

    var options = {
        url: $a.attr("href"),
        data: $("form").serialize(),
        type: "get"
    };

    $.ajax(options).done(function (data) {
        var target = $a.parents("div.pagedList").attr("data-otf-target");
        $(target).replaceWith(data);
    });
    return false;

};

$(".main-content").on("click", ".pagedList a", getPage);

}）;

Answer 1

我在Javascript代码中发现了错误。以下代码中有拼写错误

$.ajax(options).done(function (data) {
    var target = $a.parents("div.pagedList").attr("data-otf-target");
    $(target).replaceWith(data);
});
return false;

“data-otf-target”应为“data-AL-target”。用以下

替换上面的代码

$.ajax(options).done(function (data) {
    var target = $a.parents("div.pagedList").attr("data-AL-target");
    $(target).replaceWith(data);
});
return false;

并在控制器中的If子句中添加一个条件，并且everthing效果很好：）

if (!String.IsNullOrEmpty(model.SearchButton) || Request.IsAjaxRequest())

分页不能异步工作

1 个答案: