How to make a custom paging in ASP.net MVC 5 depend on bootstrap?

Question

how can i add a custom paging to my application that's writing in C# MVC5 with using a database and Entity Framework 6 with Bootstrap ?

Answer 1

This is my code and its working properly :

Note: this paging code need bootstrap to be exist

Add new file in the models named paging.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using System.Web.Security;

namespace project.Models
{
    public class Paging
{
    private projectEntities db = new projectEntities();

    public string Pagination(int total, int page, int Take, int offset, string Controler, string View, string Params)
    {
        if (total > 0)
        {
            string c_url = HttpContext.Current.Request.Url.AbsoluteUri.ToLower();
            string URL = c_url.Substring(0, c_url.IndexOf(Controler.ToLower()));
            double rowPerPage = Take;
            if (Convert.ToDouble(total) < Take)
            {
                rowPerPage = Convert.ToDouble(total);
            }

            int totalPage = Convert.ToInt16(Math.Ceiling(Convert.ToDouble(total) / rowPerPage));
            int current = page;
            int record = offset;
            int pageStart = Convert.ToInt16(Convert.ToDouble(current) - Convert.ToDouble(offset));
            int pageEnd = Convert.ToInt16(Convert.ToDouble(current) + Convert.ToDouble(offset));
            string numPage = "";
            if (totalPage < 1) return "";
            numPage += "<ul class='pagination'>";
            if (current > 1) numPage += "<li class='previous'><a href='" + URL + Controler + View + "?Page=" + (page - 1) + Params + "' aria-label='Previous'>&laquo;</a></li>";
            else numPage += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
            if (current > (offset + 1)) numPage += "<li><a href='" + URL + Controler + View + "?Page=1" + Params + "' name='page1'>1</a></li><li class='disabled spacing-dot'><a href='#'>...</a></li>";
            for (int i = 1; i <= totalPage; i++)
            {
                if (pageStart <= i && pageEnd >= i)
                {
                    if (i == current) numPage += "<li class='active'><a href='#'>" + i + " <span class='sr-only'>(current)</span></a></li>";
                    else numPage += "<li><a href='" + URL + Controler + View + "?Page=" + i + Params + "'>" + i + "</a></li>";
                }
            }
            if (totalPage > pageEnd)
            {
                record = offset;
                numPage += "<li class='disabled spacing-dot'><a href='#'>...</a></li><li><a href='" + URL + Controler + View + "?Page=" + (totalPage) + Params + "'>" + totalPage + "</a></li>";
            }
            if (current < totalPage) numPage += "<li class='next'><a class='ui-bar-d' href='" + URL + Controler + View + "?Page=" + (page + 1) + Params + "'>&raquo;</a></li>";
            else numPage += "<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>&raquo;</span></a></li>";
            numPage += "</ul>";
            return numPage;
        }
        else
        {
            return "no records found";
        }
    }
}
}

You can used in your controller like the below:

Paging pg = new Paging();
private projectEntities db = new projectEntities();

//ex : Controller name-> news , view_name -> browse
public ActionResult Index()
    {
        int offset = 1;
        int Page = 1;
        int Take = 20;
        if (Convert.ToInt32(Request.QueryString["Page"]) > 1)
        {
            Page = Convert.ToInt32(Request.QueryString["Page"]);
        }

        int skip = 0;
        if (Page == 1)
            skip = 0;
        else
            skip = ((Page - 1) * Take);
        int total = db.Table_Name.Count();
        var data = db.Table_Name.Skip(skip).Take(Take);
        string paging = pg.Pagination(total, Page, Take, offset, "news", "/browse", "");
        ViewBag.Paging = paging;
        return View(data.ToList());
    }

After that you can call it in the view like this:

@model IEnumerable<project.Models.project>
@{
    ViewBag.Title = "News";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">

    <table class="table table-striped">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.field_name)
            </th>
        </tr>

        @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.field_name)
            </td>
        </tr>
    }

</table>
@Html.Raw(ViewBag.Paging)