MVC 4在分部视图中使用分页列表

Question

我想在分部视图中实现PagedList。

描述视图设置。我有Controller A with ViewA。这是父视图，并有其自己的模型。然后我有Controller B with PartialViewB并且有它自己的模型。然后我有ViewA中的Div将用于显示PartialViewB。点击按钮后，我可以加载PartialViewB，然后再次点击按钮后隐藏视图。在PartialViewB内是PagedList。按下下一页按钮加载下一页，但将其加载到自己的页面中，而不是像以前一样加入ViewA。

如需要，我可以装载更多的代码，但现在这里是寻呼机

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

    @Html.PagedListPager(Model, page => Url.Action("ViewComments", 
    new { courseID = @ViewBag.courseID, page }), 
    new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5, DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded, 
     DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded }) 

::编辑::

父视图

<div class="Comments"> 
    <input type="button" id="View" class="CommentsButton" value="View Comments"/> 
    <input type="hidden" id="Hidden" value="false" /> 
</div> 
<div id="Comments"> 
</div> 

PartialView

@model PagedList.IPagedList<QIEducationWebApp.Models.CourseComment> 
@using PagedList.Mvc; 

@{ 
    ViewBag.Title = "Comments"; 
} 

<h2>Comments!</h2> 

<table> 

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

</table> 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

<appSettings> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings> 

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

    @Html.PagedListPager(Model, page => Url.Action("ViewComments", 
    new { courseID = @ViewBag.courseID, page }), 
      PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
       new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5, DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded, 
       DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded }, 
       new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "Comments" })) 

BundleConfig.cs

public class BundleConfig 
    { 
     // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 
     public static void RegisterBundles(BundleCollection bundles) 
     { 
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         "~/Scripts/jquery-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
         "~/Scripts/jquery-ui-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.unobtrusive*", 
         "~/Scripts/jquery.validate*")); 

      // Use the development version of Modernizr to develop with and learn from. Then, when you're 
      // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
         "~/Scripts/modernizr-*")); 

      bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/PagedList.css")); 

      bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
         "~/Content/themes/base/jquery.ui.core.css", 
         "~/Content/themes/base/jquery.ui.resizable.css", 
         "~/Content/themes/base/jquery.ui.selectable.css", 
         "~/Content/themes/base/jquery.ui.accordion.css", 
         "~/Content/themes/base/jquery.ui.autocomplete.css", 
         "~/Content/themes/base/jquery.ui.button.css", 
         "~/Content/themes/base/jquery.ui.dialog.css", 
         "~/Content/themes/base/jquery.ui.slider.css", 
         "~/Content/themes/base/jquery.ui.tabs.css", 
         "~/Content/themes/base/jquery.ui.datepicker.css", 
         "~/Content/themes/base/jquery.ui.progressbar.css", 
         "~/Content/themes/base/jquery.ui.theme.css")); 
     } 
    } 

Answer 1

检查了这一点：Related SO question

这将使用不引人注目的AJAX做替代你。您只需处理抓取并在您的末尾跳过，然后将新的局部视图与模型一起发回。

@Html.PagedListPager(Model, page => Url.Action("ViewComments", page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions(){ HttpMethod = "GET", UpdateTargetId = "partialContainerYouNeedToReplace"})) 

确保在执行此操作时在页面上引用了不引人注目的js。它附带了开箱即用的MVC，您应该只需引用该包。

希望这会有所帮助。