blog

Home / DeveloperSection / Blogs / Simple Pagination in ASP.NET MVC

Simple Pagination in ASP.NET MVC

Anonymous User15622 05-Mar-2015

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

Simple Pagination in ASP.NET MVC

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

Now install Paged list from Manage NuGet Packages

Simple Pagination in ASP.NET MVC

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:

Simple Pagination in ASP.NET MVC


Updated 22-Feb-2018
I am a content writter !

Leave Comment

Comments

Liked By