asp.net MVC分页代码分享

关于“ASP.NET MVC分页代码分享”的攻略，我将从以下几个方面进行详细讲解：

MVC分页原理简介
分页代码实现过程
示例说明

1. MVC分页原理简介

分页的目的是为了减少在一次性返回过多结果的情况下对服务器和数据库的压力，同时让用户更加方便的获取所需要的数据。MVC分页主要分为两个部分，分别是分页查询和分页显示。分页查询主要是通过参数指定需要返回的数据页数来获取数据，分页显示则是将获取到的分页数据以指定的方式进行展示。

2. 分页代码实现过程

以下是实现一个基于ASP.NET MVC的分页功能的代码过程

定义分页参数

通过ViewModel传递分页参数，这里我们定义一个PageViewModel用于传递分页信息：

public class PageViewModel
{
    public int CurrentPage { get; set; }  // 当前页码
    public int TotalPages { get; set; }   // 总页数
    public int PageSize { get; set; }     // 每页数据量
    public bool HasPreviousPage => (CurrentPage > 1);         // 是否有上一页
    public bool HasNextPage => (CurrentPage < TotalPages);    // 是否有下一页
}

数据分页查询

在查询数据时，我们需要通过传递的分页参数来获取特定的数据集合，这里以EF中的Query方法为例：

public IQueryable<Product> GetProducts(int pageNumber, int pageSize)
{
    return context.Products.OrderBy(p => p.Name)
                            .Skip((pageNumber - 1) * pageSize)
                            .Take(pageSize)
                            .AsNoTracking();
}

在这里，我们通过Skip和Take方法来对数据进行分页查询，并可以设置排序方式。

分页数计算

针对所查询到的总数据量，需要进行分页计算，设定每页数据量的同时，还需要获取总页数，计算方式如下：

var count = context.Products.Count();
var totalPages = (int)Math.Ceiling(count / (double)pageSize);

分页显示

最后，我们将获取到的分页数据以指定的方式进行展示，这里以Razor视图模板为例，使用@foreach循环显示查询到的数据：

@foreach (var product in Model.Products)
{
    <tr>
        <td>@product.Name</td>
        <td>@product.Category</td>
        <td>@product.Price</td>
    </tr>
}

分页链接生成

在列表底部我们需要展示分页链接，可以使用HtmlHelper扩展方法来实现：

@Html.PageLinks(Model.PageInfo, x => Url.Action("List",
            new { pageNumber = x, category = Model.CurrentCategory }))

一个完整的分页视图代码如下：

@model ProductsListViewModel

@if (Model.Products.Any())
{
    <table class="table">
        <thead>
            <tr>
                <th>名称</th>
                <th>分类</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var product in Model.Products)
            {
                <tr>
                    <td>@product.Name</td>
                    <td>@product.Category</td>
                    <td>@product.Price</td>
                </tr>
            }
        </tbody>
    </table>

    @Html.PageLinks(Model.PageInfo, x => Url.Action("List",
            new { pageNumber = x, category = Model.CurrentCategory }))
}
else
{
    <p>暂无数据！</p>
}

分页链接生成代码实现

下面是利用HtmlHelper扩展方法生成分页链接的代码实现：

public static class PagingHelpers
{
    public static MvcHtmlString PageLinks(this HtmlHelper html,
                                PageViewModel pageInfo,
                                Func<int, string> pageUrl)
    {
        var result = new StringBuilder();
        var ulTag = new TagBuilder("ul");
        ulTag.AddCssClass("pagination");

        //生成上一页
        var previous = new TagBuilder("li");
        previous.InnerHtml = (pageInfo.HasPreviousPage) ?
            $"<a href=\"{pageUrl(pageInfo.CurrentPage - 1)}\">上一页</a>" :
            "<span class=\"disabled\">上一页</span>";
        previous.AddCssClass("page-item");
        result.Append(previous.ToString());

        //生成页码
        for (int i = 1; i <= pageInfo.TotalPages; i++)
        {
            var liTag = new TagBuilder("li");
            liTag.AddCssClass("page-item");

            var aTag = new TagBuilder("a");
            aTag.AddCssClass("page-link");
            aTag.InnerHtml = i.ToString();

            if (i == pageInfo.CurrentPage)
            {
                liTag.AddCssClass("active");
                aTag.AddCssClass("text-white");
            }
            else
            {
                aTag.Attributes["href"] = pageUrl(i);
            }

            liTag.InnerHtml = aTag.ToString();

            result.Append(liTag.ToString());
        }

        //生成下一页
        var next = new TagBuilder("li");
        next.InnerHtml = (pageInfo.HasNextPage) ?
            $"<a href=\"{pageUrl(pageInfo.CurrentPage + 1)}\">下一页</a>" :
            "<span class=\"disabled\">下一页</span>";
        next.AddCssClass("page-item");
        result.Append(next.ToString());

        ulTag.InnerHtml = result.ToString();

        return MvcHtmlString.Create(ulTag.ToString());
    }
}

3. 示例说明

以下是两个使用ASP.NET MVC进行分页的示例：

示例1：分页查询投资署数据

假设我们已经连接到数据库，数据表中存储了投资署的所有机构和企业，我们需要在搜索栏中输入机构或企业名称，点击搜索按钮后，页面将自动跳转到第一页所查询出的数据列表，如果查询到的数据集合总量超过20，那么我们可以设置页面底部的分页链接来方便用户查看到更多数据。

以下是部分代码实现过程：

public class InvestOrgController : Controller
{
    public int PageSize = 20; //每页数据量

    private IDatabaseRepository _repository;
    public InvestOrgController(IDatabaseRepository repository)
    {
        _repository = repository;
    }

    public ViewResult List(string query, int page = 1)
    {
        var model = new InvestOrgListViewModel
        {
            Orgs = _repository.InvestOrgs
                    .Where(p => String.IsNullOrEmpty(query) || p.OrgName.Contains(query))
                    .OrderBy(p => p.OrgName)
                    .Skip((page - 1) * PageSize)
                    .Take(PageSize),
            PageInfo = new PageViewModel
            {
                CurrentPage = page,
                PageSize = PageSize,
                TotalItems = _repository.InvestOrgs
                    .Count(p => String.IsNullOrEmpty(query) || p.OrgName.Contains(query))
            },
            Query = query
        };
        return View(model);
    }
}

以下是部分视图代码：

@model InvestOrgListViewModel
<div class="query-form">
    @using (Html.BeginForm("List", "InvestOrg", FormMethod.Get))
    {
        <div class="row">
            <div class="col-md-9">
                @Html.TextBox("query", Model.Query, new { @class = "form-control" })
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary" type="submit">搜索</button>
            </div>
        </div>
    }
</div>
@if (Model.Orgs.Any())
{
    <table class="table">
        <thead>
            <tr>
                <th>机构名称</th>
                <th>管制项目</th>
                <th>评估结果</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var org in Model.Orgs)
            {
                <tr>
                    <td>@org.OrgName</td>
                    <td>@org.RestrictedProject</td>
                    <td>@org.Result</td>
                </tr>
            }
        </tbody>
    </table>

    @Html.PageLinks(Model.PageInfo, x => Url.Action("List",
            new { page = x, query = Model.Query }))
}
else
{
    <p>暂无数据！</p>
}

示例2：使用API调用分页数据

除了使用MVC视图来展示分页数据以外，我们还可以创建API来使用JavaScript动态调用分页数据并进行渲染。

以下是部分API代码实现：

[HttpGet]
public IActionResult Get(Guid appId, string startIndex, string count)
{
    var pageSize = Convert.ToInt32(count);
    var pageIndex = Convert.ToInt32(startIndex) / pageSize + 1;

    var data = _context.NewsList
        .Where(n => n.AppId == appId)
        .OrderByDescending(n => n.Date)
        .Skip((pageIndex - 1) * pageSize)
        .Take(pageSize).ToList();

    var totalCount = _context.NewsList.Where(n => n.AppId == appId).Count();

    var totalPage = Math.Ceiling((double)totalCount / pageSize);

    var result = new
    {
        data,
        pageIndex,
        pageSize,
        totalCount,
        totalPage
    };

    return Ok(result);
}

以下是使用Vue.js调用分页API并渲染数据的完整代码：

var app = new Vue({
  el: '#app',
  data: {
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    totalPage: 0,
    newsList: [],
    loading: false
  },
  created: function () {
    this.fetchNewsData();
  },
  methods: {
    fetchNewsData: function () {
      this.loading = true;
      var self = this;
      axios.get('/api/news', {
        params: {
          appId: '{{ appId }}',
          startIndex: (this.pageIndex - 1) * this.pageSize,
          count: this.pageSize
        }
      }).then(function (response) {
        var data = response.data;
        self.newsList = data.data;
        self.pageIndex = data.pageIndex;
        self.pageSize = data.pageSize;
        self.totalCount = data.totalCount;
        self.totalPage = data.totalPage;
        self.loading = false;
      }).catch(function (error) {
        console.log(error);
        self.loading = false;
      });
    },
    nextPage: function () {
      if (this.pageIndex < this.totalPage) {
        this.pageIndex ++;
        this.fetchNewsData();
      }
    },
    previousPage: function () {
      if (this.pageIndex > 1) {
        this.pageIndex --;
        this.fetchNewsData();
      }
    },
    setPage: function (pageIndex) {
      this.pageIndex = pageIndex;
      this.fetchNewsData();
    }
  }
});

以上就是ASP.NET MVC分页的完整攻略，包括MVC分页原理、分页代码实现过程以及示例说明。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：asp.net MVC分页代码分享 - Python技术站