用于带有 PartialView 的 ajax 的 ASP.NET PagedList.MVC答案

【问题标题】：ASP.NET PagedList.MVC for ajax with PartialView用于带有 PartialView 的 ajax 的 ASP.NET PagedList.MVC
【发布时间】：2016-09-09 21:54:40
【问题描述】：

我正在使用 PagedList.Mvc 并且有一点问题。所以我有一个索引视图，我可以从下拉列表中选择国家并使用 ajax 提交。

查看：

@model testModel.Models.Test

@using (Ajax.BeginForm("GetEmployee", "Test", new AjaxOptions
{
    HttpMethod = "POST",    
    UpdateTargetId = "showResult" 
})) 
{
@Html.AntiForgeryToken()
    @Html.DropDownList("CountryId", null, "-- Select Country --")            
    <input type="submit" value="Search" class="btn btn-default" />
}

<div id="showResult"></div>

在我的 GetEmployee Controller 方法中，我循环通过 db 并将模型对象传递给局部视图。

控制器：

    [HttpPost]
    public ActionResult GetEmployee(int CountryId, int? page)
    {            
        var model = db.Employee
            .Include(x => x.Country)               
            .Where(x => x.Country.CountryId == CountryId)            
            .ToList();

        int pageSize = 3;
        int pageNumber = (page ?? 1);

        return PartialView("PartialEmployee", model.ToPagedList(pageNumber, pageSize));            
    }

在我的 partialEmployee 视图中，我在表中显示了员工姓名。

PartialEmployee 视图：

@model PagedList.IPagedList<testModel.Models.Employee>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
    Layout = null;
}

<table class="table table-hover">
    <tr>
        <th>Username</th> 
    </tr>

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

</table>
<br />
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

<div id="contentPager">
    @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
</div>

所以这里的问题是，当我单击下一页（例如：2）时，它返回到索引页面，而 UpdateTargetId 中没有显示任何表格。

<div id="showResult"></div>

任何建议或示例代码将不胜感激。

【问题讨论】：

您期望发生什么？默认情况下，PagedList 不会进行 ajax 调用，尽管有使用 ajax 的选项 - 请参阅 this answer 以获取示例。
好的，谢谢。我认为链接有一个很好的例子。回家后我会试试的。
@StephenMuecke 您说 PagedList 可以选择使用 ajax，您认为它可以应用于我的情况吗？所以在我的例子中，第一个页面看起来不错，但是当我点击下一个页面时，表格消失并返回到第一个索引页面。
那是因为你有 Url.Action("Index", new { page }) 去 Index() 方法。不清楚您想要做什么，但通常您可以通过在国家/地区的 Index() 方法中使用参数并将国家/地区传递给该方法来处理此问题（例如 Url.Action("Index", new { page, Country = ViewBag.Country})，如 this article 中所述
Stephen，但该方法适用于 html.BeginForm，不适用于 Ajax.BeginForm

标签： asp.net-mvc asp.net-ajax pagedlist

【解决方案1】：

将 Web 方法类型更改为 GET 而不是 POST
从GetEmployee() 方法中删除HttpPost 属性
将您的 Url.action 更改为 Url.Action("GetEmployee", new { page, CountryId=Model.FirstOrDefault().CountryId })

【讨论】：

不，您的 CountryId=Model.FirstOrDefault().CountryId 部分没有意义，因为 CountryId 仅在索引视图中调用，而不是在部分视图中。

【解决方案2】：

好的，根据 Stephen 和 Aldo 的 cmets，我想通了。

我必须添加 ViewBag.CountryId = CountryId; 在 GetEmployee 方法中，所以它可以在 View 中使用。

所以在视图中：

@Html.PagedListPager(Model, page => Url.Action("GetEmployee",
   new
   {
       page,
       CountryId = ViewBag.CountryId          
   }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "showResult" }))

一切顺利。

【讨论】：