MVC 4 Using Paged List in Partial View

I am trying to implement a PagedList in a partial view.

Description of presentation settings. I have Controller A with ViewA . This is a parenting view and has its own model. Then I have Controller B with PartialViewB and has its own model. Then I have a Div in ViewA that will be used to display PartialViewB . I can load into PartialViewB after clicking the button, and then hide the view after clicking the button again. Inside the PartialViewB is a PagedList. Pressing the button for the next page loads the next page, but loads it on its own page, and not in ViewA , as it was before.

I can download more code as needed, but for now, here's a 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 ::

Parent view

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

Partialialview

 @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")); } } 
+3
source share
1 answer

Note this: SO related question

This will use unobtrusive ajax to replace for you. You just need to process the selection and skip it to the end and send back a new partial view along with the model.

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

Make sure you have the unobtrusive js listed on your page when you do this. It comes with MVC out of the box, and you just need to refer to the package.

Hope this helps.

+7
source

Source: https://habr.com/ru/post/1265106/


All Articles