Question

我是MVC的新手。我试图基于页面上的某些过滤器创建Grid结构，然后应用分页。一切正常，除了当我单击第二页时，另一个分页器控件被添加到页面上，导致页面上总共有两个分页器控件。任何帮助将不胜感激。下面是我的代码：

型号：

public class UnMatched
{
    public List<string> List_BUnit { get; set; }
    public PagedList<UnMatched> List_Grid { get; set; }
 }

控制器：

public ActionResult Index(int? page)
{            

    return Request.IsAjaxRequest()
        ? (ActionResult)PartialView("AjaxMethod")
        : View(PopulateBUnit());
}

public ActionResult AjaxMethod(string bunit, int? Page)
{
   //Get lst_UnMatch here
   return PartialView(List_Grid.ToPagedList(pageIndex, pageSize));
}

主视图：

@model MVC_Sample.Models.UnMatched
@using PagedList;
@using PagedList.Mvc;
@{
    ViewBag.Title = "Home Page";
 }
<head>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<div id="GridContainer" style="display:none;">
@Html.Partial("AjaxMethod", Model.List_Grid)
</div>

PartialView：

@model IPagedList<MVC_Sample.Models.UnMatched>
@using PagedList;
@using PagedList.Mvc;
<div id="GridDiv">
<table class="Grid">
<tr>
        <th>
            @Html.DisplayName("rec_FSRPT_ID")
        </th>
        <th>
            @Html.DisplayName("BUNit")
        </th>
</tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.rec_FSRPT_ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.BUNit)
            </td>
        </tr>
    }

</table>
</div>


</div>
<div id="myPager">
@Html.PagedListPager(
Model,
page => Url.Action("AjaxMethod", new { page = page}),
PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions(){  
HttpMethod = "GET", UpdateTargetId = "GridDiv" }))
</div>

<script>
$(function () {
$('#myPager').on('click', 'a', function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
success: function (result) {
$('#myPager').html(result);
}
});
return false;
});
});
</script>

Pager Control屏幕截图：

Answer 1

使用以下代码代替#myPager链接。

<div class="row">
    <div class="col col-xs-12 col-sm-6">
        <div class="dataTables_info" id="dt_basic_info" role="status" aria-live="polite">Showing <span class="txt-color-darken">@Model.FirstItemOnPage</span> to <span class="txt-color-darken">@Model.LastItemOnPage</span> of <span class="text-primary">@Model.TotalItemCount</span> entries</div>
    </div>
    <div class="col col-xs-12 col-sm-6">
        <a id="pagingFormAction" href="@Url.Action("AjaxMethod", new {  Pageindex = 1 bunit =  ViewBag.bunit })" style="display:none"></a>
        @Html.PagedListPager(Model, page => Url.Action("AjaxMethod", new { Pageindex = page, bunit =  ViewBag.bunit }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions() { ContainerDivClasses = new[] { "dataTables_paginate paging_simple_numbers" } }, new AjaxOptions() { HttpMethod = "replace", UpdateTargetId = "GridDiv", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging" }))
    </div>
</div>

如果不需要，您可以删除OnBegin =“ beginPaging”，OnSuccess =“ successPaging”，OnFailure =“ failurePaging”。

Answer 2

感谢您的帮助。

我将mypager div放入div Griddiv中，并且它起作用了。单击传呼机时，我再次获取了整个网格数据，然后将其绑定到div #GridDiv。

<div id="GridDiv">
// grid.GetHTML code here
<div id="myPager">      

    @Html.PagedListPager(
    Model,
    page => Url.Action("AjaxMethod", new { page = page}),
    PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions(){ 
HttpMethod = "GET", UpdateTargetId = "GridDiv" }))
</div>
</div>

MVC IPageList分页显示两个寻呼机控件

2 个答案: