BootStrap mvcpager分页样式(get请求,刷新页面)

下面是详细讲解"BootStrap mvcpager分页样式(get请求,刷新页面)"的攻略。

什么是Bootstrap MvcPager？

Bootstrap MvcPager是一个基于ASP.NET MVC的分页控件，它支持Bootstrap 3和4版本，并且提供了多种自定义风格。利用它可以方便地实现Bootstrap风格的分页效果。

实现Bootstrap MvcPager的步骤

1. 首先，在你的MVC项目中安装Bootstrap MvcPager包。

在NuGet控制台中输入以下命令进行安装：

Install-Package MvcPagers -Version 3.0.3

1. 然后，修改你的视图文件，将分页代码替换为Bootstrap MvcPager分页控件。

例如，在你的Index.cshtml文件中添加如下代码实现分页效果：

```
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}

Bootstrap MvcPager Demo

@{
var options = new MvcPaging.MvcPagerOptions
{
PageIndexParameterName = "pageIndex",
PageSize = Model.PageSize,
MaxDisplayedPages = 10,
DisplayTemplate = "Bootstrap3Pagination"
};
}

@foreach (var item in Model.Items)
{

}

Id	Name	Age
@item.Id	@item.Name	@item.Age

@Html.PagedListPager(Model.Items, Model.PageIndex, Model.PageSize, Model.TotalItemCount, options)
```

特别需要注意的是，分页代码中要设置好分页参数，例如PageIndexParameterName、PageSize和MaxDisplayedPages等等。另外，DisplayTemplate用来指定分页显示的样式，这里使用了Bootstrap3Pagination样式。

1. 最后，在你的控制器中实现分页方法，然后将结果传递到视图中进行显示。

例如，在你的HomeController.cs文件中添加如下代码实现分页操作：

```
public class HomeController : Controller
{
private const int PAGE_SIZE = 10;

   public ActionResult Index(int? pageIndex)
   {
       int currentPageIndex = pageIndex ?? 0;
       List<User> users = new List<User>
       {
           new User { Id = 1, Name = "张三", Age = 20 },
           new User { Id = 2, Name = "李四", Age = 25 },
           new User { Id = 3, Name = "王五", Age = 30 },
           new User { Id = 4, Name = "赵六", Age = 18 },
           new User { Id = 5, Name = "田七", Age = 22 },
           new User { Id = 6, Name = "马八", Age = 28 },
           new User { Id = 7, Name = "朱九", Age = 34 },
           new User { Id = 8, Name = "刘十", Age = 26 },
       };

       var usersPaged = users.OrderBy(u => u.Id).ToPagedList(currentPageIndex, PAGE_SIZE);
       return View(usersPaged);
   }

   public class User
   {
       public int Id { get; set; }
       public string Name { get; set; }
       public int Age { get; set; }
   }

}
```

至此，一个简单的Bootstrap MvcPager分页样式就实现了！

示例说明

示例1：基础分页

在Index视图中，添加如下代码实现基础分页效果：

@Html.PagedListPager(Model.Items, Model.PageIndex, Model.PageSize, Model.TotalItemCount, new MvcPaging.MvcPagerOptions() { DisplayTemplate = "Bootstrap3Pagination" })

示例2：更改分页参数

在Index视图中，添加如下代码实现更改分页参数：

@{
   var options = new MvcPaging.MvcPagerOptions
   {
       PageIndexParameterName = "page",
       PageSize = 5,
       MaxDisplayedPages = 5,
       DisplayTemplate = "Bootstrap4Pagination"
   };
}

@Html.PagedListPager(Model.Items, Model.PageIndex, Model.PageSize, Model.TotalItemCount, options)

以上示例中，DisplayTemplate指定为Bootstrap4Pagination样式。这样就可以轻松地更改MvcPager的分页参数和样式了。