【问题标题】:Fix pagination in ASP.NET Core修复 ASP.NET Core 中的分页
【发布时间】:2021-02-02 18:41:12
【问题描述】:

我正在尝试在我的项目中修复分页。但我没有得到正确的结果。我想让这个结果 123 ... 12

PS 我用 Adam Freeman Pro ASP.NET Core MVC 2 书学习。 GitHub中的项目https://github.com/JasARGHUN/StoreProject-

分页模型 PagingInfo.cs:

public class PagingInfo
    { public int TotalItems { get; set; }
        public int ItemsPerPage { get; set; }
        public int CurrentPage { get; set; }

        public int TotalPages =>
            (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }

描述符类PageLinkTagHelper.cs

[HtmlTargetElement("div", Attributes = "page-model")]
    public class PageLinkTagHelper : TagHelper
    {
        private IUrlHelperFactory urlHelperFactory;

        public PageLinkTagHelper(IUrlHelperFactory helperFactory)
        {
            urlHelperFactory = helperFactory;
        }
        [ViewContext]
        [HtmlAttributeNotBound]
        public ViewContext ViewContext { get; set; }
        public PagingInfo PageModel { get; set; }
        public string PageAction { get; set; }

        [HtmlAttributeName(DictionaryAttributePrefix = "page-url-")]
        public Dictionary<string, object> PageUrlValues { get; set; } = new Dictionary<string, object>();

        public bool PageClassesEnabled { get; set; } = false;
        public string PageClass { get; set; }
        public string PageClassNormal { get; set; }
        public string PageClassSelected { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            IUrlHelper urlHelper = urlHelperFactory.GetUrlHelper(ViewContext);
            TagBuilder result = new TagBuilder("div");
            for (int i = 1; i <= PageModel.TotalPages; i++)
            {
                TagBuilder tag = new TagBuilder("a");
                PageUrlValues["productPage"] = i;
                tag.Attributes["href"] = urlHelper.Action(PageAction, PageUrlValues);
                if (PageClassesEnabled)
                {
                    tag.AddCssClass(PageClass);
                    tag.AddCssClass(i == PageModel.CurrentPage
                        ? PageClassSelected : PageClassNormal);
                }
                tag.InnerHtml.Append(i.ToString());
                result.InnerHtml.AppendHtml(tag);
            }
            output.Content.AppendHtml(result.InnerHtml);
        }
    }

分页视图模型 ProductsListViewModel

public class ProductsListViewModel
    {
        public IEnumerable<Product> Products { get; set; }
        public PagingInfo PagingInfo { get; set; }
        public string CurrentCategory { get; set; }
    }

控制器 ProductController.cs

public class ProductController : Controller
    {
        private IProductRepository _repository;
        public int PageSize = 4;

        public ProductController(IProductRepository repository)
        {
            _repository = repository;
        }

        public ViewResult List(string category, int productPage = 1) =>
            View(new ProductsListViewModel
            {
                Products = _repository.Products
                .Where(p => category == null || p.Category == category)
                .OrderBy(p => p.ProductID)
                .Skip((productPage - 1) * PageSize)
                .Take(PageSize),
                PagingInfo = new PagingInfo
                {
                    CurrentPage = productPage,
                    ItemsPerPage = PageSize,
                    TotalItems = category == null ?
                    _repository.Products.Count() :
                    _repository.Products.Where(e =>
                    e.Category == category).Count()
                },
                CurrentCategory = category
            });}

查看 List.cshtml

@model ProductsListViewModel
@foreach (var p in Model.Products)
{
    @await Html.PartialAsync("ProductSummary", p);
}

<div page-model="@Model.PagingInfo" page-action="List" page-classes-enabled="true"
     page-class="btn" page-class-normal="btn-secondary"
     page-class-selected="btn-primary" page-url-category="@Model.CurrentCategory"
     class="btn-group pull-right m-1"></div>

导航菜单 Navigation.cshtml

@model IEnumerable<string>

<a class="btn btn-block btn-secondary border mb-1"
   asp-action="List"
   asp-controller="Product"
   asp-route-category="">Home</a>

<div>
    @foreach (string category in Model)
    {
        <a class="btn btn-sm btn-block border @(category == ViewBag.SelectedCategory ? "btn-info": "btn-light")"
           asp-action="List"
           asp-controller="Product"
           asp-route-category="@category"
           asp-route-productPage="1">@category</a>
    }
</div>

我想做这样的分页

【问题讨论】:

  • 您能解释一下您希望看到的结果吗?
  • 谢谢,我希望分页为 123...12,而不是 1 2 3 4 5 6 7 8 9 10 11 12

标签: c# asp.net-core razor


【解决方案1】:

好的,我尝试并解决了我的问题,更新了控制器、TagHelper 类和视图。 也许有人会派上用场。

控制器:

public async Task<IActionResult> List(string category, int page = 1)
        {
            IQueryable<Product> source = _repository.Products.Where(p => category == null || p.Category == category)
                .OrderBy(p => p.ProductID);
            var count = await source.CountAsync();
            var items = await source.Skip((page - 1) * pageSize).Take(pageSize).ToListAsync();

            PagingInfo pagingInfo = new PagingInfo(count, page, pageSize);
            ProductsListViewModel productsListView = new ProductsListViewModel
            {
                PagingInfo = pagingInfo,
                Products = items
            };

            return View(productsListView);}

查看:

<h3><page-link page-model="Model.PagingInfo" page-action="List"></page-link></h3>

TagHelper 类:

public class PageLinkTagHelper : TagHelper
    {
        private IUrlHelperFactory urlHelperFactory;
        public PageLinkTagHelper(IUrlHelperFactory helperFactory)
        {
            urlHelperFactory = helperFactory;
        }
        [ViewContext]
        [HtmlAttributeNotBound]
        public ViewContext ViewContext { get; set; }
        public PagingInfo PageModel { get; set; }
        public string PageAction { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            IUrlHelper urlHelper = urlHelperFactory.GetUrlHelper(ViewContext);
            output.TagName = "div";

            // набор ссылок будет представлять список ul
            TagBuilder tag = new TagBuilder("ul");
            tag.AddCssClass("pagination");

            // формируем три ссылки - на текущую, предыдущую и следующую
            TagBuilder currentItem = CreateTag(PageModel.PageNumber, urlHelper);

            // создаем ссылку на предыдущую страницу, если она есть
            if (PageModel.HasPreviousPage)
            {
                TagBuilder prevItem = CreateTag(PageModel.PageNumber - 1, urlHelper);
                tag.InnerHtml.AppendHtml(prevItem);
            }

            tag.InnerHtml.AppendHtml(currentItem);
            // создаем ссылку на следующую страницу, если она есть
            if (PageModel.HasNextPage)
            {
                TagBuilder nextItem = CreateTag(PageModel.PageNumber + 1, urlHelper);
                tag.InnerHtml.AppendHtml(nextItem);
            }
            output.Content.AppendHtml(tag);
        }

        TagBuilder CreateTag(int pageNumber, IUrlHelper urlHelper)
        {
            TagBuilder item = new TagBuilder("li");
            TagBuilder link = new TagBuilder("a");
            if (pageNumber == this.PageModel.PageNumber)
            {
                item.AddCssClass("active");
            }
            else
            {
                link.Attributes["href"] = urlHelper.Action(PageAction, new { page = pageNumber });
            }
            link.InnerHtml.Append(pageNumber.ToString());
            item.InnerHtml.AppendHtml(link);
            return item;
        }
    }
}

【讨论】:

    【解决方案2】:

    改变你的 for 循环

    for (PageModel.CurrentPage; i <= PageModel.CurrentPage + 2; i++)
    

    这将根据当前页面为您提供 3 个结果。

    然后你可以在 html 的任一端的第一页和最后一页添加一个按钮。

    可能有一种更优雅的方法,但应该可以。

    【讨论】:

    • 抱歉目前在手机上,所以可能错过了一些东西。你会得到什么结果。
    【解决方案3】:

    你可以使用库ReflectionIT.Mvc.Paging

    请参阅此link 进行培训

    你可以使用这个库X.PagedList

    请参阅此link 进行培训

    【讨论】:

      猜你喜欢
      • 2018-01-26
      • 1970-01-01
      • 2018-05-14
      • 1970-01-01
      • 2021-03-14
      • 1970-01-01
      • 2020-04-18
      • 2021-08-12
      • 1970-01-01
      相关资源
      最近更新 更多