Continue with the previous post, in the article, i will share how to search for returned data and pagination in ASP.NET MVC 5.
I will continue writing the code of the previous lesson, you can see here
Actualy, there are plugins support pagination, but i don't use. I want share way create a calculation formula pagination
Okay, if you have read the previous article, now you open HomeController.cs in Controllers directory, you modify it
public int pageSize = 2;
public ActionResult Index(string txtSearch,int? page)
{
var data = (from s in _db.Posts select s);
if (!String.IsNullOrEmpty(txtSearch))
{
ViewBag.txtSearch = txtSearch;
data = data.Where(s => s.Title.Contains(txtSearch));
}
if (page > 0)
{
page = page;
}
else
{
page = 1;
}
int start = (int)(page - 1) * pageSize;
ViewBag.pageCurrent = page;
int totalPage = data.Count();
float totalNumsize = (totalPage / (float)pageSize);
int numSize = (int)Math.Ceiling(totalNumsize);
ViewBag.numSize = numSize;
ViewBag.posts = data.OrderByDescending(x => x.Id).Skip(start).Take(pageSize);
return View();
}
You can set the parameters as follows
- pageSize: the number of post, I need to display
- ViewBag.pageCurrent: get the current page value
- totalPage: the sum of all post data
- totalNumsize: the total number of pages to display
- Math.Ceiling: function used to round decimal numbers
Okay, continue you can edit the interface, you open Index.cshtml file in Views/Post/Index.chtml directory
@model MVC5_HelloWorld.Models.Post
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-header">
List Posts
<a href="@Url.Action("Store", "Post")" class="btn btn-success">Add</a>
</div>
<div class="card-body">
<div class="card-header">
Search
@using (Html.BeginForm("Index", "Post", FormMethod.Get))
{
<input type="text" name="txtSearch" placeholder="Search!"/>
<button type="submit" class="btn btn-warning">Search</button>
}
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>STT</th>
<th>Title</th>
<th>Body</th>
<th>Created_at</th>
<th>Updated_at</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
@{
int i = 1;
}
@foreach (var post in ViewBag.Posts)
{
<tr>
<td>@i</td>
<td>@post.Title</td>
<td>@post.Body</td>
<td>@post.Created_at</td>
<td>@post.Updated_at</td>
<td><a href="@Url.Action("Edit","Post",new {id=post.Id})" class="badge badge-warning">Modify</a></td>
<td><a href="@Url.Action("Delete","Post",new {id=post.Id})" class="badge badge-danger">Remove</a></td>
</tr>
i++;
}
</tbody>
</table>
<div class="card-footer">
<nav aria-label="Page navigation example">
<ul class="pagination">
@{
int position;
int pageCurrent = ViewBag.pageCurrent;
string txtSearch = ViewBag.txtSearch;
float numSize = ViewBag.numSize;
if (pageCurrent > 1)
{
<li class="page-item">
<a class="page-link" href="@Url.Action("Index", "Post", new { txtSearch = (txtSearch != "" ? txtSearch : null), page = pageCurrent-1 })" tabindex="-1">Previous</a>
</li>
}
for (position = 1; position <= numSize; position++)
{
if (position == pageCurrent)
{
<li class="page-item active"><a class="page-link" href="@Url.Action("Index", "Post", new { txtSearch = (txtSearch != "" ? txtSearch : null), page = position })">@position</a></li>
}
else
{
<li class="page-item"><a class="page-link" href="@Url.Action("Index", "Post", new { txtSearch = (txtSearch != "" ? txtSearch : null), page = position })">@position</a></li>
}
}
if (pageCurrent > 0 && pageCurrent < numSize)
{
<li class="page-item">
<a class="page-link" href="@Url.Action("Index", "Post", new { txtSearch = (txtSearch != "" ? txtSearch : null), page = pageCurrent+1 })" tabindex="-1">Next</a>
</li>
}
}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
Demo:
Top comments (1)
Can be replaced with