接着上一个demo
现在controller中创建一个新的action
先添加两个私有字段分别表示每页条数，和整个一组多少个，为了方便演示，设置小点
1
2
| private int PageSize = 3;
private int PageGroupSize = 2;
|
创建page页的model
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| public class PagingInfo
{
public int CurrentPage { get; set; }
public int PageSize { get; set; }
public int TotalItems { get; set; }
public int CurrentDividePage
{
get
{
if (CurrentPage % PageGroupSize == 0)
return (int)CurrentPage / PageGroupSize;
return (int)CurrentPage / PageGroupSize + 1;
}
}
public int TotalDividePages
{
get
{
return (int)Math.Ceiling((decimal)TotalItems / PageSize / PageGroupSize);
}
}
public int TotalPages
{
get
{
return (int)Math.Ceiling((decimal)TotalItems / PageSize);
}
}
public int PageGroupSize { get; set; }
public bool HasPre
{
get { return CurrentDividePage == 1 ? false : true; }
}
public bool HasNext
{
get { return CurrentDividePage == TotalDividePages ? false : true; }
}
}
|
编写page action 分一下步骤
- 想取得对应页的list
1
2
3
4
| var products = productService.Products
.OrderBy(m => m.ProductID)
.Skip((page - 1) * PageSize)
.Take(PageSize);
|
- 创建对应的pageinfo
1
2
3
4
5
6
7
| var pageinfo = new PagingInfo()
{
CurrentPage = page,
PageSize = this.PageSize,
TotalItems = productService.Products.Count(),
PageGroupSize = PageGroupSize
};
|
此时需要创建创建对应的page页view model
添加实体中的项目方便model操作
1
2
3
4
5
6
7
8
9
10
11
12
13
| public class ProductViewModel
{
[DisplayName("编号")]
public int ProductID { get; set; }
[DisplayName("商品名")]
public string Name { get; set; }
[DisplayName("描述")]
public string Description { get; set; }
[DisplayName("价格")]
public decimal Price { get; set; }
public IEnumerable<Product> Products { get; set; }
public PagingInfo PageInfo { get; set; }
}
|
- 创建view对象，返回view（model）完成action
1
2
3
4
5
6
7
| var model=new ProductViewModel()
{
Products = products,
PageInfo = pageinfo
};
return View(model);
|
- 创建对应的视图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <table class="striped responsive-table">
<tr>
<th>
@Html.DisplayNameFor(model => model.ProductID)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
</tr>
@foreach (var item in Model.Products)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ProductID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
</tr>
}
</table>
|
创建page navigation
创建pagehelper用来动态创建page navigation ，委托用来传pageindex对应的url，可以用方法代替
1
2
3
4
5
6
7
| public static class PageHelper
{
public static MvcHtmlString PageLink(this HtmlHelper htmlHelper, PagingInfo pageinfo，Func<int, string> pageUrl)
{
}
}
|
先创建一个为htmlhelper拓展方法的静态方法，方便在razor视图里面操作
此时创建的会根据你使用的界面有所不同
- 先根据传入的pageinfo.CurrentPage
- 方法中主要是对尾页跟每个页组最后一位进行特殊处理，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| public static MvcHtmlString PageLink(this HtmlHelper htmlHelper, PagingInfo pageinfo, Func<int, string> pageUrl)
{
StringBuilder sb = new StringBuilder();
int length;
if (pageinfo.TotalPages < pageinfo.PageGroupSize)
length = pageinfo.TotalPages;
else if (pageinfo.CurrentDividePage == pageinfo.TotalDividePages)
{
length = pageinfo.TotalPages - (pageinfo.CurrentDividePage - 1) * pageinfo.PageGroupSize;
}
else
length = pageinfo.PageGroupSize;
TagBuilder ul = new TagBuilder("ul");
ul.MergeAttribute("class", "pagination");
var pre = new TagBuilder("li");
var pre_a = new TagBuilder("a");
var i_pre = new TagBuilder("i");
i_pre.MergeAttribute("class", "material-icons");
i_pre.SetInnerText("chevron_left");
pre_a.InnerHtml = i_pre.ToString();
if (!pageinfo.HasPre)
pre.MergeAttribute("class", "disabled");
else
pre_a.MergeAttribute("href", pageUrl((pageinfo.CurrentDividePage - 2) * pageinfo.PageGroupSize + 1));
pre.InnerHtml = pre_a.ToString();
sb.Append(pre.ToString());
for (int i = 1; i <= length; i++)
{
TagBuilder liTag = new TagBuilder("li");
TagBuilder tag = new TagBuilder("a");
if (pageinfo.CurrentPage % pageinfo.PageGroupSize != i)
{
if (pageinfo.CurrentPage % pageinfo.PageGroupSize == 0 && i == length)
{
liTag.MergeAttribute("class", "active");
}
else
{
liTag.MergeAttribute("class", "waves-effect");
tag.MergeAttribute("href",
pageUrl((pageinfo.CurrentDividePage - 1) * pageinfo.PageGroupSize + i));
}
}
else
{
liTag.MergeAttribute("class", "active");
}
tag.SetInnerText(i.ToString());
liTag.InnerHtml = tag.ToString();
sb.Append(liTag.ToString());
}
var next = new TagBuilder("li");
var next_i = new TagBuilder("i");
next_i.MergeAttribute("class", "material-icons");
next_i.SetInnerText("chevron_right");
var next_a = new TagBuilder("a");
next_a.InnerHtml = next_i.ToString();
if (!pageinfo.HasNext)
next.MergeAttribute("class", "disabled");
else
next_a.MergeAttribute("href", pageUrl(pageinfo.CurrentDividePage * pageinfo.PageGroupSize + 1));
next.InnerHtml = next_a.ToString();
sb.Append(next.ToString());
ul.InnerHtml = sb.ToString();
return MvcHtmlString.Create(ul.ToString());
}
|
- view文件夹下面web.config添加配置
1
2
3
4
5
6
7
8
| <system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="luox78.GraduationProject.WebDemo.Helper" />
</namespaces>
</pages>
</system.web.webPages.razor>
|
view页面添加，生成块
1
| @Html.PageLink(Model.PageInfo,m=>Url.Action("Page","Product",new { page = m }))
|