Asp.NET MVC Pagination Entity Framework (Sayfalama - PageList)

Bu yazımız da Asp.NET MVC PageList ile nasıl sayfalama (pagination) yapılır onu öğreneceğiz. İlk önce bir veritabanı oluşturacağız. Daha sonra entity Framewok ile bir data model oluşturup controller ve view sayfalarımızı yazacağız. Hadi başlayalım…

Sql Server’da yeni bir veritabanı oluşturalım istediğiniz ismi verebilirsiniz. New Query diyerek aşağıdaki kodları çalıştıralım.

CREATE TABLE Product (
    Id int IDENTITY(1,1) NOT NULL PRIMARY KEY,
	Name varchar(250) NULL,
	Price money NULL,
	Quantity int NULL,
	Status bit NOT NULL
)
GO
INSERT Product(Name, Price, Quantity, Status) VALUES('Name 1', 20.0000, 4, 1)
GO
INSERT Product(Name, Price, Quantity, Status) VALUES('Name 2', 12.0000, 8, 0)
GO
INSERT Product(Name, Price, Quantity, Status) VALUES('Name 3', 4.0000, 3, 1)
GO
INSERT Product(Name, Price, Quantity, Status) VALUES('Name 4', 17.0000, 8, 1)

Visual Studio açıp File>New Project> Asp.NET Web Application seçip, daha sonra karşınıza çıkan ekran Empty template  ve aşağıdaki kutucuklardan MVC olanı seçip boş bir MVC projesi oluşturunuz.

Solution Explorer penceresinden Models klasörüne sağ tıklayıp Add>New Item>ADO.NET Entity Data Model oluşturunuz.

Sonra Tools menüsünden Tools>Library Package Manager> Package Manager Console tıklayıp, PageList komutlarını yazalım. Teker teker PageList paketlerini projemize yükleyelim.

Install-Package PagedList

Install-Package PagedList.Mvc

Solution Explorer penceresinden Controller sağ tıklayıp Add>Controller> MVC 5 Empty controller ekleyin. Aşağıdaki kodları yazınız.

public class ProductController : Controller
    {
        private MvcTestEntities db = new MvcTestEntities();

        public ActionResult Index(int page=1,int pageSize=2)
        {
		//veritabanından products tablosunu çekiyoruz.
            List<Product> products = db.Products.ToList();
		//Burada ise PageList tipinde bir Product model oluşturuyoruz ve özelliklerini veriyoruz. Sayfa sayısı ve sayfada kaç tane kayıt gösterilecek gibi..
            PagedList<Product> model = new PagedList<Product>(products, page, pageSize);
            return View(model);
        }
    }

Son olarak ta Views>Product Klasörün içerisine bir tane Index.cshtml oluşturunuz.

@{
    Layout = null;
}
@model PagedList.IPagedList<PaginationMVCApp.Models.Product>
@using PagedList.Mvc
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Pagination</title>
    <link rel="stylesheet"
          href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container" style="margin-top:20px;">
        <h3>product</h3>
        <table class="table table-bordered">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Status</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Sub Total</th>
            </tr>
            @foreach (var product in Model)
    {
        <tr>
            <td>@product.Id</td>
            <td>@product.Name</td>
            <td>@product.Status</td>
            <td>@product.Price</td>
            <td>@product.Quantity</td>
            <td>@(product.Price * product.Quantity)</td>
        </tr>
}
        </table>
        <br />
        @Html.PagedListPager(Model,page=>Url.Action("Index",new { page,pageSize=Model.PageSize }))
        
    </div>
</body>
</html>

Projeyi çalıştırın ve Product/Index sayfasını çağırın. Sayfalama işleminin gerçekleştiğini göreceksiniz. İyi çalışmalar hepinize kolay gelsin. 

 

Proje Dosya Linki : 

Dosya İndir