MVC 4在部分视图中使用分页列表 [英] MVC 4 Using Paged List in a partial View

问题描述

我正在尝试在局部视图中实现PagedList.

I am trying to implement PagedList in a partial view.

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

Describing the view setup. I have Controller A with ViewA. This is the parent view and has its own model. Then I have Controller B with PartialViewB and has its own model as well. Then I have a Div in ViewA that will be used to display the PartialViewB. I can load in PartialViewB after hitting a button and then hide the view after hitting the button again. Within the PartialViewB is the PagedList. Hitting the next page button loads the next page, but loads it in its own page, not in the ViewA as it was before.

我可以根据需要加载更多代码，但现在这里是Pager

I can load up more code as needed, but for now here is the Pager

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

:: EDIT ::

:::

父视图

<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

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

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

推荐答案

查看以下内容:这将使用不引人注目的ajax为您完成替换.您只需要处理获取操作并跳过最后，然后将新的局部视图与模型一起发回即可.

This will use unobtrusive ajax to do the replace for you. You just need to handle the fetch and skip on your end and send back the new partial view along with the model.

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

执行此操作时，请确保页面上引用的js不干扰.它是MVC附带的现成产品，您只需要引用该捆绑软件即可.

Make sure that you have unobtrusive js referenced on your page when doing this. It comes with MVC out of the box and you should just need to reference the bundle.

希望这会有所帮助.

这篇关于MVC 4在部分视图中使用分页列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！