Pagination For Search Results ASP.NET MVC 5

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

• ASP.NET MVC 5 CRUD Tutorial With Example For Beginners

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:

Post: Pagination For Search Results ASP.NET MVC 5

Comments

[molamk]

if (page > 0)
{
    page = page;
}
else
{
    page = 1;
}

Can be replaced with

if (page <= 0) {
    page = 1;
}