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:

publicclassHomeController : Controller
    {
        //
        // GET: /Home/
 
        MyDBEntities db = newMyDBEntities();
 
        publicActionResult Index()
        {
            return View();
        }
        publicActionResult Video(int page = 1, int pagsize = 4)
        {
            List<Video> vdo = db.Videos.ToList();
            PagedList<Video> model = newPagedList<Video>(vdo, page, pagsize);
            return PartialView("Video", model);
        }
 
        [HttpPost]
        publicActionResult 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";
}
<linkhref="~/Content/bootstrap3/css/bootstrap.min.css"rel="stylesheet"/>
<linkhref="~/Content/bootstrap3/css/bootstrap-theme.min.css"rel="stylesheet"/>
<linkhref="~/Content/bootstrap3/css/font-awesome.min.css"rel="stylesheet"/>
<scriptsrc="~/Script/jquery-2.1.1.min.js"></script>
<scriptsrc="~/Script/bootstrap3/js/bootstrap.min.js"></script>
 
<divclass="clearfix">&nbsp;</div>
<divclass="clearfix">&nbsp;</div>
<divclass="clearfix">&nbsp;</div>
 
<divclass="container">
    <divclass="row">
        <divclass="col-md-2">
            <ulclass="nav nav-pills nav-stacked">
                <liclass="active"><ahref="#home-v"data-toggle="tab">Home</a></li>
                <li><ahref="#profile-v"id="video"data-toggle="tab">Profile</a></li>
            </ul>
        </div>
        <divclass="col-md-10">
            <divclass="tab-content">
                <divclass="tab-pane active"id="home-v">
                    <divclass="row">
                        <divclass="col-md-6 col-md-offset-3 well">
                            <h3class="text-center">Upload Video</h3>
                            @Html.Partial("Upload")
                        </div>
                    </div>
                </div>
                <divclass="tab-pane"id="profile-v">
                    <divclass="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))
{
    <divclass="row">
        <divclass="col-md-12 form-group">
            <divclass="input-group">
                <spanclass="input-group-addon"><iclass="fa fa-user"></i></span>
                @Html.TextBoxFor(m => m.CreatedBy, new { @class = "form-control", @placeholder = "Created By" })
            </div>
        </div>
    </div>
    <divclass="row">
        <divclass="col-md-12 form-group">
            <divclass="input-group">
                <spanclass="input-group-addon"><iclass="fa fa-calendar"></i></span>
                @Html.TextBoxFor(m => m.CreatedOn, new { @class = "form-control", @placeholder = "Created On" })
            </div>
        </div>
    </div>
    <divclass="row">
        <divclass="col-md-12 form-group">
            <divclass="input-group">
                <spanclass="input-group-addon"><iclass="fa fa-arrows-alt"></i></span>
                @Html.TextBoxFor(m => m.URL, new { @class = "form-control", @placeholder = "Video URL" })
            </div>
        </div>
    </div>
    <divclass="row">
        <divclass="col-md-12 form-group">
            <divclass="input-group">
                <buttontype="submit"class="btn btn-primary"><iclass="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)
    {
    <divclass="col-md-6 form-group text-center">
        <iframestyle="width: 80%"height="200"src="@item.URL"frameborder="0"allowfullscreen></iframe>
    </div>
    }
}
 
<divclass="col-md-12">
    <divclass="pagination">
        @Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
    </div>
</div>

Output: