ASP. NET MVC4 Razor Template Simple Paging Effect
- 2021-08-16 23:35:51
- OfStack
1. No data submission
Step 1, create an empty controller named PageIndex for Controller, and customize one method as follows:
public ActionResult PageIndex(string action, string controller, int currentPage, int pageCount)
{
//int count = db.Product.Count();
ViewBag.PageCount = pageCount;// Getting the total data pages from the operation will be passed into the paged view page
ViewBag.CurrentPage = currentPage;// Getting the current number of pages from the action will be passed into the paging view page
ViewBag.action = action;
ViewBag.controller = controller;
return PartialView();
}
Pass in 4 parameters:
action: Action (for the view to be paged, default to Index);
controller: Controller;
currentPage: Current number of pages;
pageCount: Total pages of data
Step 2: Add View (PageIndex)
@if (ViewBag.PageCount == null || ViewBag.PageCount == 0)
{
<span> Hello, there is no data display at present !</span>
}
else
{
if (ViewBag.CurrentPage <= 10)
{
<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = 1 }, null)">
Home page </a>|</span>
}
else
{
<a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = 1 }, null)">
Home page </a>
<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage - 10 }, null)">
...</a> </span>
}
for (int i = ViewBag.CurrentPage - 3; i < ViewBag.CurrentPage + 3; i++)
{
if (i <= 0)
{
continue;
}
if (i > ViewBag.PageCount)
{
break;
}
<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = i }, null)">
No. 1 @i Page </a>|</span>
}
if (ViewBag.CurrentPage > 1)
{
<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage - 1 }, null)">
Upper 1 Page </a>|</span>
}
if (ViewBag.PageCount > ViewBag.CurrentPage)
{
<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage + 1 }, null)">
Under 1 Page </a></span>
}
if (ViewBag.CurrentPage == ViewBag.PageCount || ViewBag.CurrentPage >= ViewBag.PageCount - 10)
{
<a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.PageCount }, null)">
Tail Page </a>
}
else
{
<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage + 10 }, null)">
...</a></span>
<a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.PageCount }, null)">
Tail Page </a>
}
<span style="padding-left: 20px"> Current Pages: @ViewBag.CurrentPage | Altogether @ViewBag.PageCount Page
</span>
}
Step 3: Modify the controller of the view of operation
public ViewResult Index(int? pageIndex)
{
int pageInd = pageIndex.HasValue ? pageIndex.Value : 1;
ViewBag.PageCount = (int)Math.Ceiling(result.Count() / 20.0);
// Here is the take According to each page 20 Display
return View(result.OrderBy(t => t.PID).Skip((pageInd - 1) * 20).Take(20));
}
Step 4: Page invocation (the last step)
@Html.Action("PageIndex", "Product", new { action = "Index", controller = "Log", pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })
Generally speaking, the data are changeable.
2. There is data submission
Step 1: Create an empty controller named PageIndex for Controller, and customize one method as follows:
public ActionResult PageIndexKey(int currentPage, int pageCount)
{
ViewBag.PageCount = pageCount;// Getting the total data pages from the operation will be passed into the paged view page
ViewBag.CurrentPage = currentPage;// Getting the current number of pages from the action will be passed into the paging view page
return PartialView();
}
Step 2: Create a distribution view
<script>
$(function () {
$("#pageingByForm a").click(function (event) {
$("#pageIndex").val($(this).attr("pageIndex"));
//$(this).parent("Form").submit();
document.getElementsByTagName("Form").item(0).submit();
event.preventDefault();
});
});
</script>
@Html.Hidden("pageIndex")
<div id="pageingByForm">
@if (ViewBag.PageCount == null || ViewBag.PageCount == 0)
{
<span> No data currently available </span>
}
else
{
if (ViewBag.CurrentPage <= 10)
{
<span><a pageindex="1" href="#"> Home page </a>|</span>
}
else
{
<span><a pageindex="1" href="#"> Home page </a>|</span>
<span><a pageIndex="@(ViewBag.CurrentPage - 10)" href="#">...</a>|</span>
}
for (int i = ViewBag.CurrentPage - 3; i < ViewBag.CurrentPage + 3; i++)
{
if (i <= 0)
{
continue;
}
if (i > ViewBag.PageCount)
{
break;
}
<span><a pageIndex="@i" href="#"> No. 1 @i Page </a>|</span>
}
if (ViewBag.CurrentPage >1)
{
<span><a pageIndex="@(ViewBag.CurrentPage - 1)" href="#"> Upper 1 Page </a>|</span>
}
if (ViewBag.PageCount > ViewBag.CurrentPage)
{
<span><a pageIndex="@(ViewBag.CurrentPage + 1)" href="#"> Under 1 Page </a></span>
}
if (ViewBag.CurrentPage >= ViewBag.PageCount - 10)
{
}
else
{
<span><a pageIndex="@(ViewBag.CurrentPage + 10)" href="#">...</a>|</span>
<span><a pageIndex="@ViewBag.PageCount" href="#"> Tail Page </a></span>
}
<span style="padding-left: 20px"> Current Pages: @ViewBag.CurrentPage | Altogether @ViewBag.PageCount Page
</span>
}
</div>
Step 3: Modify the action view and controller
public ViewResult Index(int? pageIndex ,string search)
{
int pageInd = pageIndex.HasValue ? pageIndex.Value : 1;
ViewBag.PageCount = (int)Math.Ceiling(result.Count() / 20.0);
return View(result.OrderBy(t => t.PID).Skip((pageInd - 1) * 20).Take(20));
}
View (page call):
@using (Html.BeginForm())
{
Get query results according to gender
Gender: @ Html.TextBox ("sex")
< input type= "submit" value= "Query"/ >
@Html.Action("PageIndexKey", "PageIndex", new { pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })
}
Example:
// Data ,1 A list Collection of
List<string> s = new List<string>();
s.Add(" Zhang Jun ");
ViewBag.PageCount = (int)Math.Ceiling(s.Count() / 20.0);
return View(s.Skip((pageInd - 1) * 20).Take(20));
@Html.Action("PageIndex", "PageIndex",
new { action = "", controller = "", pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })