---
title: "Simple Pagination in ASP.NET MVC"  
description: "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"  
author: "Anonymous User"  
published: 2015-03-05  
updated: 2018-02-22  
canonical: https://www.mindstick.com/blog/829/simple-pagination-in-asp-dot-net-mvc  
category: "asp.net mvc"  
tags: ["bootstrap"]  
reading_time: 3 minutes  

---

# Simple Pagination in ASP.NET MVC

Hi everyone in this blog I’m explaining about the [implementation](https://www.mindstick.com/forum/33764/how-to-implementation-of-class-in-c-sharp) of [pagination](https://www.mindstick.com/blog/265/pagination-in-php) in MVC.

##### Description:

##

People who come from [ASP.NET MVC](https://www.mindstick.com/forum/155798/what-is-caching-in-asp-dot-net-mvc) Web Form [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp) 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](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) 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](https://www.mindstick.com/blog/11962/packages-in-java) of [Visual Studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) 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](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about)

![Simple Pagination in ASP.NET MVC](https://www.mindstick.com/blogs/9cff81ac-f70a-4fb7-bbb5-abfd03d919ec/images/894b898b-96b4-402e-8d2e-744f95124fb8.png)

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

![Simple Pagination in ASP.NET MVC](https://www.mindstick.com/blogs/9cff81ac-f70a-4fb7-bbb5-abfd03d919ec/images/abfe6e4f-f597-4b4a-a6a7-425436154a14.png)

Now install Paged list from Manage NuGet Packages

![Simple Pagination in ASP.NET MVC](https://www.mindstick.com/blogs/9cff81ac-f70a-4fb7-bbb5-abfd03d919ec/images/a700f72a-4fc9-447a-901b-408c4a0f523a.png)

**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:

##

![Simple Pagination in ASP.NET MVC](https://www.mindstick.com/blogs/9cff81ac-f70a-4fb7-bbb5-abfd03d919ec/images/171b2491-5630-4be7-9a98-1c401ac1a128.png)

---

Original Source: https://www.mindstick.com/blog/829/simple-pagination-in-asp-dot-net-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.