Hi everyone in this blog I’m explaining about the implementation of pagination in MVC.

Description:

People who come from ASP.NET MVC Web Form background like me expect pagination in ASP.NET MVC also the same way where there would be a server control and we have set necessary property and handle some event to do the pagination. ASP.NET MVC doesn't work that way. 

Here we have to do many things manually or using some plugins or third-party component. Here come the NuGet Packages of Visual Studio that automatically takes care of version conflicts and installation.

In this sample, we have added video and get video list.

Let us start:

Open visual studio >> File >> New Project >> ASP.NET MVC Web Application

Give the application name and click OK after click OK open a window and you select project type Empty

Now install Paged list from Manage NuGet Packages

Now Add Controller

HomeController.cs:

public class HomeController : Controller
    {
        //
        // GET: /Home/
 
        MyDBEntities db = new MyDBEntities();
 
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Video(int page = 1, int pagsize = 4)
        {
            List<Video> vdo = db.Videos.ToList();
            PagedList<Video> model = new PagedList<Video>(vdo, page, pagsize);
            return PartialView("Video", model);
        }
 
        [HttpPost]
        public ActionResult Index(Video model)
        {
            if (ModelState.IsValid)
            {
                db.Videos.Add(model);
                db.SaveChanges();
            }
            return View("Index");
        }
    }

Now Add View & Partial View:

Index.cshtml (View)
@{
    ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/Script/jquery-2.1.1.min.js"></script>
<script src="~/Script/bootstrap3/js/bootstrap.min.js"></script>
 
<div class="clearfix">&nbsp;</div>
<div class="clearfix">&nbsp;</div>
<div class="clearfix">&nbsp;</div>
 
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#home-v" data-toggle="tab">Home</a></li>
                <li><a href="#profile-v" id="video" data-toggle="tab">Profile</a></li>
            </ul>
        </div>
        <div class="col-md-10">
            <div class="tab-content">
                <div class="tab-pane active" id="home-v">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 well">
                            <h3 class="text-center">Upload Video</h3>
                            @Html.Partial("Upload")
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="profile-v">
                    <div class="row">
                        @Html.Action("Video", "Home")
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

Upload.cshtml (Partial View)

@model LearnPaging.Models.Video
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-12 form-group">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                @Html.TextBoxFor(m => m.CreatedBy, new { @class = "form-control", @placeholder = "Created By" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 form-group">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                @Html.TextBoxFor(m => m.CreatedOn, new { @class = "form-control", @placeholder = "Created On" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 form-group">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-arrows-alt"></i></span>
                @Html.TextBoxFor(m => m.URL, new { @class = "form-control", @placeholder = "Video URL" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 form-group">
            <div class="input-group">
                <button type="submit" class="btn btn-primary"><i class="fa fa-upload"></i>&nbsp;Upload</button>
            </div>
        </div>
    </div>
}

Video.cshtml (Partial View)

@using PagedList
@using PagedList.Mvc
@model PagedList<LearnPaging.Models.Video>
@if (Model != null)
{
    foreach (var item in Model)
    {
    <div class="col-md-6 form-group text-center">
        <iframe style="width: 80%" height="200" src="@item.URL" frameborder="0" allowfullscreen></iframe>
    </div>
    }
}
 
<div class="col-md-12">
    <div class="pagination">
        @Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
    </div>
</div>

Output: