首页 > 解决方案 > 如何使分页按钮起作用

问题描述

嗨,我目前正在开展一个需要分页号码来浏览产品的项目。我目前正在使用 ReflectionIT.Paging.MVC。

我的问题是分页按钮正在显示,但是当点击它时它不会改变页面。我几乎遵循了所有教程,但没有一个教程让分页按钮起作用。

控制器索引代码:

using System;
using System.Collections.Generic;

using System.Linq;
using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using MVCManukauTech.Models.DB;
using MVCManukauTech.ViewModels;
using ReflectionIT.Mvc.Paging;
using Pagination;

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore.Metadata.Internal;

namespace MVCManukauTech.Controllers
{
public class CatalogController : Controller
{
    private readonly F191_Grace_ProjectContext _context;

    public CatalogController(F191_Grace_ProjectContext context)
    {
        _context = context;
    }




    public async Task<IActionResult> Index(int page = 1 ) 
    {
        //140903 JPC add CategoryName to SELECT list of fields
        string SQL = "SELECT ProductId, Product.CategoryId AS CategoryId, Name, ImageFileName, UnitCost"
            + ", SUBSTRING(Description, 1, 100) + '...' AS Description, CategoryName "
            + "FROM Product INNER JOIN Category ON Product.CategoryId = Category.CategoryId ";
        string categoryName = Request.Query["CategoryName"];

        if (categoryName != null)
        {
            //140903 JPC security check - if ProductId is dodgy then return bad request and log the fact 
            //  of a possible hacker attack.  Excessive length or containing possible control characters
            //  are cause for concern!  TODO move this into a separate reusable code method with more sophistication.
            if (categoryName.Length > 20 || categoryName.IndexOf("'") > -1 || categoryName.IndexOf("#") > -1)
            {
                //TODO Code to log this event and send alert email to admin
                return BadRequest(); // Http status code 400
            }

            //140903 JPC  Passed the above test so extend SQL
            //150807 JPC Security improvement @p0
            SQL += " WHERE CategoryName = @p0";
            //SQL += " WHERE CategoryName = '{0}'";
            //SQL = String.Format(SQL, CategoryName);
            //Send extra info to the view that this is the selected CategoryName
            ViewBag.CategoryName = categoryName;
        }


        //150807 JPC Security improvement implementation of @p0
        var products = _context.CatalogViewModel.FromSql(SQL, categoryName).AsNoTracking().OrderBy(s=>s.Name);

        var model = await PagingList.CreateAsync(products, 6, page);

        return View(model);

查看索引代码:

  @model ReflectionIT.Mvc.Paging.PagingList <MVCManukauTech.ViewModels.CatalogViewModel>

@using ReflectionIT.Mvc.Paging
@addTagHelper*,ReflectionIT.Mvc.Paging
@{

//Are we showing all the products or only one category?
if (ViewBag.CategoryName == null)
{
    ViewBag.Title = "Catalog";
}
else
{
    ViewBag.Title = "Catalog - " + ViewBag.CategoryName;
}
}
<link href="~/css/StyleSheet.css" rel="stylesheet" />

<div class="bg">

    <h2>@ViewBag.Title</h2>

<nav aria-label="Product Paging">
    @await this.Component.InvokeAsync("Pager", new { pagingList = this.Model });
</nav>


<div class="text-center">
    <a href="~/Catalog"><button type="button" class="btn  btn-lg">All</button></a>
    <a href="~/Catalog?CategoryName=Transports"><button type="button" class="btn btn-lg">Transports</button></a>
    <a href="~/Catalog?CategoryName=Gadgets"><button type="button" class="btn  btn-lg">Gadgets</button></a>
    <a href="~/Catalog?CategoryName=Furnitures"><button type="button" class="btn  btn-lg">Furnitures</button></a>
    <a href="~/Catalog?CategoryName=Kitchen"><button type="button" class="btn  btn-lg">Kitchen</button></a>
    <a href="~/Catalog?CategoryName=Entertainment"><button type="button" class="btn  btn-lg">Entertainment</button></a>
    <a href="~/Catalog?CategoryName=Bathroom"><button type="button" class="btn  btn-lg">Bathroom</button></a>
    <a href="~/Catalog?CategoryName=Technology"><button type="button" class="btn  btn-lg"> Technology</button></a>
</div>


<table class="table" style="background-color:snow">
    <tr>

        <th>
            Name
        </th>

        <th>
            Image
        </th>
        <th>
            Unit Cost
        </th>
        <th>
            Description
        </th>
        <th>
            Category
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="d-block">

            <td>
                @item.Name
            </td>
            <td>
                <img src="~/Images/Product_Images/@item.ImageFileName" style="width:100px" />
            </td>
            <td style="text-align: right">
                @item.UnitCost
            </td>
            <td>
                @item.Description
            </td>
            <td>
                @item.CategoryName
            </td>
            <td>
                <a href="~/OrderDetails/ShoppingCart?ProductId=@item.ProductId"><button>Add&nbsp;to&nbsp;Cart</button></a>
            </td>
            <td>
                <a href="~/Catalog/Details?ProductId=@item.ProductId"><button>Details</button></a>
            </td>
        </tr>
        <tr></tr>
    }


</table>

<nav aria-label="Product Paging">
    <vc:pager paging-list=@Model />;
</nav>

标签: c#htmlsqlmodel-view-controllerasp.net-core-mvc

解决方案


对于这个问题,它是由page保留的路由名称引起的。

我已提交拉取请求,并检查将页面更改为 pageindex #24

在作者合并之前,您可以获取此拉取请求并在您的项目中引用它。

请注意,在您的索引操作中 更改pagepageIndex

public async Task<IActionResult> Index(int pageIndex = 1)
{
    var qry = _context.Products.AsNoTracking().OrderBy(u => u.Id);
    var model = await PagingList.CreateAsync(qry, 6, pageIndex);
    return View(model);
}

推荐阅读