Ajax 分页 Mvc 4答案

【问题标题】：Ajax Paging Mvc 4Ajax 分页 Mvc 4
【发布时间】：2013-08-17 21:44:18
【问题描述】：

我需要帮助。我正在使用 MVC 4 做一个简单的博客。

Edit3：一般来说，概念如下：左边是导航栏，里面有分类，右边是帖子，有ajax分页。当您单击具体帖子时，我们会转到包含帖子详细信息的页面。

我有一个布局：

<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="sidebar-nav-fixed fill">
                @Html.Action("GetCategories","Navigation")
            </div>
            <div class="sidebar-nav-fixed-stuck-left fill white">
                <div class="container-fluid">
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="content-area">
                                @RenderBody()
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

我从带有分页的帖子控制器列表返回。 Pager 创建到控制器的 ajax 链接：

<a data-ajax=\"true\" data-ajax-method=\"GET\" data-ajax-mode=\"replace\" href=\"{0}\" data-page=\"{1}\">{2}</a>

如果我返回一个没有布局的局部视图，它只会呈现局部视图，但 ajax 分页有效。如果我返回带有布局的部分视图，它会完美呈现，ajax 查询有效，控制器返回部分视图，但分页不起作用。

查看

@model PagingListViewModel<PostViewModel>

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@foreach (var post in Model.Items)
{
    @Html.DisplayFor(_ => post,"Post")
}

@Html.DisplayFor(x => x.PageInfo)

编辑：我使用自定义寻呼机。如果标志“isAjax”为真，它会生成 ajax 链接。这是一种为每个页面生成链接的方法

private string GeneratePageLink(string linkText, int pageNumber)
        {
            var pageLinkValueDictionary = new RouteValueDictionary(linkWithoutPageValuesDictionary);
            pageLinkValueDictionary[Page] = pageNumber;

            var contextQueryString = requestContext.HttpContext.Request.QueryString;
            foreach (string queryStrings in contextQueryString)
            {
                if (queryStrings.Equals(Page, StringComparison.OrdinalIgnoreCase) ||
                    pageLinkValueDictionary.ContainsKey(queryStrings))
                    continue;

                pageLinkValueDictionary.Add(queryStrings, contextQueryString[queryStrings]);
            }

            var virtualPath = RouteTable.Routes.GetVirtualPath(requestContext, pageLinkValueDictionary) == null
                                  ? string.Empty
                                  : RouteTable.Routes.GetVirtualPath(requestContext, pageLinkValueDictionary)
                                              .VirtualPath;

            return string.Format(
                isAjax
                    ? "<li><a data-ajax=\"true\" data-ajax-method=\"GET\" data-ajax-mode=\"replace\" href=\"{0}\" data-page=\"{1}\">{2}</a></li>"
                    : "<li><a href=\"{0}\" data-page=\"{1}\">{2}</a></li>",
                virtualPath, pageNumber, linkText
                );
        }

编辑2：

[HttpGet]
public ActionResult Posts(int? page)
{
... query to database
return AjaxPagingList<Post, PostViewModel>(posts, "PostsList")
}

 protected ActionResult AjaxPagingList<TItem, TModel>(IEnumerable<TItem> itemsObjects, string view)
            where TItem : class, where TModel: class
        {
            var items = AutoMappingProvider.MapToList<TItem>(itemsObjects);

            var catalogViewModel = new PagingListViewModel<TModel>
            {
               ....
            }

            return PartialView(view, catalogViewModel);
        }

【问题讨论】：

我有点困惑。您是否返回初始页面请求的完整视图和 ajax 寻呼机请求的部分视图？
你能显示处理 ajax 帖子的相关 javascript 吗？
我使用自定义寻呼机。如果标志“isAjax”为真，它会生成 ajax 链接。
控制器方法的第一次调用不是ajax，其他调用是ajax - 通过链接形成的寻呼机。我做错了什么？
您能否也显示正在/正在处理这些请求的控制器操作？

标签： asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 pagination

【解决方案1】：

我解决了我的问题。我换了一个局部视图：

@model PagingListViewModel<PostViewModel>

@{
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}

@foreach (var post in Model.Items)
{
    @Html.DisplayFor(_ => post,"Post")
}

@Html.DisplayFor(x => x.PageInfo)

并将属性添加到链接 data-ajax-update="..."。

【讨论】：