0

ページングを非同期にするのに問題があります。pagedlist および pagedListMvc パッケージを使用しています。ページングは​​正常に機能しているように見えますが、Javascript を追加して非同期にすると、何も起こりません。つまり、ページングは​​まったく機能しません。これが機能しない理由がわかりません。以下のコードを確認してください

ここにコントローラーコードがあります

    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);

});

4

1 に答える 1

0

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句に条件を追加すると、すべてがうまく機能します:)

if (!String.IsNullOrEmpty(model.SearchButton) || Request.IsAjaxRequest())
于 2013-06-13T17:08:33.587 に答える