加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

asp.net-mvc – MVC 4在局部视图中使用分页列表

发布时间:2020-12-16 09:12:37 所属栏目:asp.Net 来源:网络整理
导读:我试图在局部视图中实现PagedList. 描述视图设置.我有ViewA控制器A.这是父视图,并有自己的模型.然后我有控制器B和PartialViewB,并有自己的模型.然后我在ViewA中有一个Div,它将用于显示PartialViewB.我可以在按下按钮后加载PartialViewB,然后再次按下按钮后隐
我试图在局部视图中实现PagedList.

描述视图设置.我有ViewA控制器A.这是父视图,并有自己的模型.然后我有控制器B和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,PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
                new PagedListRenderOptions { MaximumPageNumbersToDisplay = 5,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"));
        }
    }

解决方法

看看这个: Related SO question

这将使用不显眼的ajax来替换你.您只需要处理提取并跳过结束并将新的局部视图与模型一起发回.

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

在执行此操作时,请确保您的页面上引用了不显眼的js.它带有开箱即用的MVC,你应该只需要引用它.

希望这可以帮助.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读