Previous and Next result display using
Asp.net MVC and Entity Framework
Note:
here we will discuss
how to apply previous and next button for
apply this concept I have two Html.ActionLink() for (Previous
and Next).when I click on the next button it will show one by one customers
records from Sql server database .i used entity framework in MVC 4.
Here we have to use
Northwind database and we will apply this concept on Customers table ..........................
Step 1: First we
will take MvcApplication which named is WebApplication1
and create controller that’s named NoidaController
Code for NoidaController.cs.............................
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class NoidaController : Controller
{
NORTHWNDEntities database = new NORTHWNDEntities();
private int pageItemNo = 12;
// GET: Noida
public ActionResult Index()
{
var v = database.Customers.OrderBy(m
=> m.ContactName).Take(pageItemNo).ToList();
TempData["total"] = database.Customers.Count() / pageItemNo;
ViewBag.nextPage = 1;
ViewBag.PrePage = 0;
return View(v);
}
// code for button(Previous and Next)
public ActionResult PreAndNext(int pageNo)
{
if (pageNo < 0)
{
pageNo = 0;
}
var count = Convert.ToInt32(TempData.Peek("total"));
var v = database.Customers.OrderBy(m
=> m.ContactName).Skip(pageNo * pageItemNo).Take(pageItemNo).ToList();
if (pageNo < count - 1)
ViewBag.nextPage = pageNo + 1;
else
ViewBag.nextPage = pageNo;
ViewBag.PrePage = pageNo - 1;
return View("Index",
v);
}
}
}
Code for Index.cshtml...............................
@model IEnumerable<WebApplication1.Models.Customer>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ShowData</title>
<style type="text/css">
table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
width: 200px;
height: 200px;
}
table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
table tbody td {
border: solid 1px #DDEEEE;
color: #333;
text-shadow: 1px 1px 1px #fff;
}
div {
margin: 5px;
border: 1px solid;
float: left;
}
.button {
display: inline-block;
outline: none;
cursor: pointer;
background-color: #ff6a00;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius:
.5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
background-color: aqua;
}
.button:active {
position: relative;
top: 1px;
}
</style>
</head>
<body>
<div>
@foreach (var item in Model)
{
<div>
<table>
<tr>
<th>CustomerId</th>
<td>@item.CustomerID</td>
</tr>
<tr>
<th>Name</th>
<td>@item.ContactName</td>
</tr>
<tr>
<th>Company Name</th>
<td>@item.CompanyName</td>
</tr>
<tr>
<th>City</th>
<td>@item.City</td>
</tr>
<tr>
<th>Country</th>
<td>@item.Country</td>
</tr>
<tr>
<th>Phone No</th>
<td>@item.Phone</td>
</tr>
</table>
</div>
}
</div>
<div style="clear:both;"></div><br />
<p>
@Html.ActionLink("Previous", "PreAndNext", new { pageNo =
ViewBag.PrePage }, new { @class = "button" })
@Html.ActionLink("Next>>", "PreAndNext", new { pageNo =
ViewBag.nextPage }, new { @class = "button" })
</p>
</body>
</html>
Result :
Great post. Very useful information for everyone. I really thankful to you for this post. dot net training institute in pune
ReplyDeleteProvide me Source code with Database if possible
ReplyDeleteI urgently need this
Email : pandya.manav@gmail.com