MVC IPageList Paging 显示两个寻呼机控件答案

【问题标题】：MVC IPageList Paging showing two pager controlMVC IPageList Paging 显示两个寻呼机控件
【发布时间】：2018-07-19 00:52:31
【问题描述】：

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

型号：

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>

部分视图：

@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>

寻呼机控制截图：

【问题讨论】：

我不知道是不是错字，但是你的html元素没有正确关闭。
感谢您的检查。这些是拼写错误，现在已更正，所以如果您可以查看更新的错误并提出建议。
this.href 的值是多少？看起来您正在重新加载 #myPager 内的整个页面。

标签： asp.net-mvc

【解决方案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"。

【讨论】：

我需要使用 ajax 而不仅仅是标签。

【解决方案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>

【讨论】：