﻿
{"id":3267,"date":"2015-09-20T18:46:26","date_gmt":"2015-09-20T18:46:26","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=3267"},"modified":"2015-09-20T18:46:26","modified_gmt":"2015-09-20T18:46:26","slug":"asp-net-mvcde-pagedlist-kullanarak-verileri-sayfalama","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/asp-net-mvcde-pagedlist-kullanarak-verileri-sayfalama\/","title":{"rendered":"Asp.NET MVC&#8217;de PagedList Kullanarak Verileri Sayfalama"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Web projelerinde, veritaban\u0131nda bulunan binlerce sat\u0131rl\u0131k verilerle hizmet vermemiz gereken noktalarda sayfalamay\u0131 tercih ederiz.Bunun en temel noktas\u0131 kullan\u0131c\u0131lara g\u00f6rsel olarak yeterli veri ak\u0131\u015f\u0131 g\u00f6stermenin yan\u0131nda, server&#8217;da olu\u015fturulan sitedenin performans a\u00e7\u0131s\u0131ndan daha h\u0131zl\u0131 derlenebilmesi, veritaban\u0131na olan y\u00fck\u00fcn minimize edilmesi ve web sitenin kullan\u0131\u015fl\u0131l\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan daha kaliteli bir yap\u0131ya b\u00fcr\u00fcnd\u00fcr\u00fclmesi gibi fakt\u00f6rlerde temel etkenler aras\u0131ndad\u0131r.Bir sayfa olu\u015fumu s\u00fcrecinde binlerce veriyi veritaban\u0131ndan talep edip, kullan\u0131c\u0131lara sunmak, hem veritaban\u0131na a\u011f\u0131r bir y\u00fcklenme olacakt\u0131r hemde kullan\u0131c\u0131 a\u00e7\u0131s\u0131ndan sunulan yo\u011fun bilgiden kaynaklanan kompleks bir ekranla kar\u015f\u0131la\u015f\u0131ld\u0131\u011f\u0131ndan dolay\u0131 amaca d\u00f6n\u00fck hizmet istemsizce verimsizle\u015fecektir.<\/p>\n<p>Asl\u0131nda sayfalama tekni\u011fi olarak kendi algoritmalar\u0131m\u0131z\u0131 geli\u015ftirebilece\u011fimiz gibi bu konu \u00fczerine olu\u015fturulan t\u00fcrl\u00fc t\u00fcrl\u00fc Componentler \u00fczerinde de sayfalama i\u015flemimizi ger\u00e7ekle\u015ftirebiliriz.Bu yaz\u0131m\u0131zda ilgili konu \u00fczerine geli\u015ftirilmi\u015f olan PagedList Componenti&#8217;ni derinlemesine inceleyece\u011fiz.Tabi bu Component&#8217;in di\u011ferlerinden ek olarak art\u0131 ve eksileri mevcuttur.Lakin PagedList&#8217;in \u015fahsen tercih sebebim olmas\u0131nda a\u015fa\u011f\u0131da belirtti\u011fim bir ka\u00e7 husus temel etkenlerdir;<\/p>\n<ul>\n<li>PagedList ile yap\u0131la sayfalamalar QueryString mant\u0131\u011f\u0131yla \u00e7al\u0131\u015ft\u0131\u011f\u0131 gibi Ajax ile dinamik sayfalama esnekli\u011fi sunmaktad\u0131r.<\/li>\n<li>Arkaplanda veritaban\u0131ndan t\u00fcm veriler \u00e7ekilip sayfalama yap\u0131lmamakta, bilakis bir sayfada yap\u0131lacak adet kadar veri i\u00e7in veritaban\u0131na talep olu\u015fturulmaktad\u0131r.<\/li>\n<li>Sayfalama i\u00e7in farkl\u0131 \u015fablonlar sunmas\u0131.<\/li>\n<\/ul>\n<p>Belirtti\u011fim bu hususlar haricinde PagedList&#8217;in daha fazla art\u0131 ve eksisi oldu\u011funu unutmay\u0131n\u0131z.<\/p>\n<p>Bir Asp.NET MVC projesinde PagedList ile sayfalama yapmak i\u00e7in nelere ihtiyac\u0131m\u0131z var sorusunu pe\u015fin cevapland\u0131rmam\u0131z gerekirse e\u011fer;<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>PagedList ve PagedList.Mvc DLL&#8217;lerine.<br \/>\n<a href=\"https:\/\/www.nuget.org\/packages\/PagedList.Mvc\/\" target=\"_blank\">https:\/\/www.nuget.org\/packages\/PagedList.Mvc\/<\/a><\/li>\n<li>jQuery Unobtrusive Validation k\u00fct\u00fcphanesine.<br \/>\n<a href=\"https:\/\/www.nuget.org\/packages\/Microsoft.jQuery.Unobtrusive.Validation\/\" target=\"_blank\">https:\/\/www.nuget.org\/packages\/Microsoft.jQuery.Unobtrusive.Validation\/<\/a><\/li>\n<li>jQuery Unobtrusive Ajax k\u00fct\u00fcphanesine.<br \/>\n<a href=\"https:\/\/www.nuget.org\/packages\/Microsoft.jQuery.Unobtrusive.Ajax\/\" target=\"_blank\">https:\/\/www.nuget.org\/packages\/Microsoft.jQuery.Unobtrusive.Ajax\/<\/a><\/li>\n<\/ul>\n<p>\u015eimdi bir MVC projesinde nas\u0131l PagedList entegre ediliyor ve veri sayfalan\u0131yor teferruatland\u0131ral\u0131m.<\/p>\n<p>Yapaca\u011f\u0131m\u0131z \u00f6rnekte, Northwind veritaban\u0131nda \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirece\u011fiz ve LINQ deste\u011fi ile sayfalamay\u0131 sa\u011flayaca\u011f\u0131m\u0131z\u0131 ve ayriyetten ilgili konuyu temelden izah edebilmek i\u00e7in bo\u015f bir Asp.NET MVC projesi \u00fczerinden \u00e7al\u0131\u015fmam\u0131z\u0131 \u00f6rneklendirece\u011fimizi \u00f6ncelikle bildiriyorum.<\/p>\n<p>\u00d6ncelikle projemize yukar\u0131da vermi\u015f oldu\u011fum linklerdeki ilgili Packagelar\u0131 entegre etmemiz gerekiyor.<\/p>\n<p>Tabi entegre i\u015flemini g\u00f6stermeden \u00f6nce yukar\u0131da vermi\u015f oldu\u011fum linklerin zamanla ge\u00e7ersiz olabilme ihtimali oldu\u011fu i\u00e7in bu Packagelara nas\u0131l ula\u015fabilece\u011finizi izah etmektede fayda var.<\/p>\n<p><a href=\"http:\/\/www.nuget.org\" target=\"_blank\">www.nuget.org<\/a> adresine girip, kar\u015f\u0131m\u0131za \u00e7\u0131kan sayfada arama kutusuna &#8220;PagedList&#8221; anahtar s\u00f6zc\u00fc\u011f\u00fcn\u00fc yaz\u0131yor ve arat\u0131yoruz.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3270\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama.png\" alt=\"Asp.NET MVC'de PagedList Kullanarak Verileri Sayfalama\" width=\"458\" height=\"380\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama.png 458w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-300x249.png 300w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><br \/>\nArama ekran\u0131nda \u00e7\u0131kan PagedList.Mvc linkine t\u0131klad\u0131\u011f\u0131m\u0131z zaman a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde de g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi kar\u015f\u0131m\u0131za bir kod \u00e7\u0131kmaktad\u0131r.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3271\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-2.png\" alt=\"Asp.NET MVC'de PagedList Kullanarak Verileri Sayfalama-2\" width=\"734\" height=\"216\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-2.png 734w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-2-300x88.png 300w\" sizes=\"auto, (max-width: 734px) 100vw, 734px\" \/><\/a><br \/>\nBu kodu kopyal\u0131yoruz ve Visual Studio&#8217;da &#8220;Package Manager Console&#8221; penceresine yap\u0131\u015ft\u0131r\u0131yoruz.<\/p>\n<p>&#8220;Package Manager Console&#8221; men\u00fcs\u00fcn\u00fc a\u00e7mak i\u00e7in &#8220;Tools&#8221; -&gt; &#8220;Nuget Package Manager&#8221; -&gt; &#8220;Package Manager Console&#8221; kombinasyonunu takip ediyoruz.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3272\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-3.png\" alt=\"Asp.NET MVC'de PagedList Kullanarak Verileri Sayfalama-3\" width=\"706\" height=\"329\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-3.png 706w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-3-300x140.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/a><br \/>\n\u0130lgili kombinasyonu takip ettikten sonra kar\u015f\u0131m\u0131za a\u015fa\u011f\u0131daki gibi bir pencere gelmektedir.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3273\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-4.png\" alt=\"Asp.NET MVC'de PagedList Kullanarak Verileri Sayfalama-4\" width=\"706\" height=\"182\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-4.png 706w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-4-300x77.png 300w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/a><br \/>\nGelen bu pencereye kopyalam\u0131\u015f oldu\u011fumuz Packege kodunu yap\u0131\u015ft\u0131r\u0131yor ve Enter tu\u015funa bas\u0131yoruz.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3274\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-5.png\" alt=\"Asp.NET MVC'de PagedList Kullanarak Verileri Sayfalama-5\" width=\"826\" height=\"191\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-5.png 826w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-5-300x69.png 300w\" sizes=\"auto, (max-width: 826px) 100vw, 826px\" \/><\/a><\/p>\n<blockquote><p><em><strong>Dikkat!!!<\/strong><\/em><br \/>\n<em><strong> PagedList Componenti, 4.5 Framework&#8217;\u00fcnde \u00e7al\u0131\u015fmaktad\u0131r.<\/strong><\/em><\/p><\/blockquote>\n<p>Bu i\u015flemi ger\u00e7ekle\u015ftirdikten sonra projemizin &#8220;References&#8221; klas\u00f6r\u00fcne g\u00f6z atarsak e\u011fer &#8220;PagedList&#8221; ve &#8220;PagedList.Mvc&#8221; DLL&#8217;lerinin y\u00fcklendi\u011fini g\u00f6rm\u00fc\u015f olaca\u011f\u0131z.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3277\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-6.png\" alt=\"Asp.NET MVC'de PagedList Kullanarak Verileri Sayfalama-6\" width=\"204\" height=\"122\" \/><\/a><\/p>\n<p>Ayriyetten projemizin &#8220;Content&#8221; klas\u00f6r\u00fcne g\u00f6z atarsak e\u011fer &#8220;PagedList.css&#8221; CSS dosyas\u0131n\u0131n eklendi\u011fini g\u00f6rece\u011fiz.Bu dosya PagedList Componenti&#8217;nin style yap\u0131s\u0131n\u0131 olu\u015fturmaktad\u0131r.\u0130sterseniz siz de\u011fi\u015ftirebilirsiniz.Bu dosyay\u0131 PagedList&#8217;i kulanaca\u011f\u0131m\u0131z ilgili sayfaya ya da Layout sayfas\u0131na entegre edece\u011fiz.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3278\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-7.png\" alt=\"Asp.NET MVC'de PagedList Kullanarak Verileri Sayfalama-7\" width=\"152\" height=\"36\" \/><\/a><br \/>\nPagedList Componenti&#8217;ni projemize entegre etmi\u015f olduk.<br \/>\n&#8220;jQuery Unobtrusive Validation&#8221; ve &#8220;jQuery Unobtrusive Ajax&#8221; k\u00fct\u00fcphanelerinide ayn\u0131 \u015fekilde projeye entegre edebilirsiniz.Tabi bu k\u00fct\u00fcphaneler projenizde varsay\u0131lan olarak gelmi\u015f olabilir.Ola ki yoktur ya da silmi\u015f olabilirsiniz, bu \u015fekilde y\u00fcklemeyi ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\n<p>\u015eimdi projemizde Layout sayfam\u0131z\u0131 d\u00fczenleyelim.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;link href=&quot;~\/Content\/PagedList.css&quot; rel=&quot;stylesheet&quot; \/&gt;\r\n    &lt;script src=&quot;~\/Scripts\/jquery-1.10.2.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script src=&quot;~\/Scripts\/jquery.unobtrusive-ajax.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script src=&quot;~\/Scripts\/jquery.validate.unobtrusive.min.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;script src=&quot;~\/Scripts\/jquery.validate.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n        @RenderBody()\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi yaz\u0131m\u0131z boyunca PagedList&#8217;te yapaca\u011f\u0131m\u0131z her t\u00fcrl\u00fc i\u015flemde bize s\u0131k\u0131nt\u0131s\u0131z e\u015flik edecek k\u00fct\u00fcphaneleri Layout&#8217;a entegre etmi\u015f olduk.<\/p>\n<p>\u015eimdi &#8220;Home(Controller).cs&#8221; isimli bir Controller s\u0131n\u0131f\u0131 olu\u015fturup &#8220;Index&#8221; Action&#8217;\u0131n\u0131n View katman\u0131ndaki .cshtml sayfas\u0131nda sayfalama ekran\u0131m\u0131z\u0131 olu\u015ftural\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;h2&gt;M\u00fc\u015fteriler&lt;\/h2&gt;\r\n\r\n&lt;div id=&quot;dvMusteriListesi&quot;&gt;\r\n    &lt;table&gt;\r\n        &lt;thead&gt;\r\n            &lt;tr&gt;\r\n                &lt;th&gt;\u015eirket Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;M\u00fc\u015fteri Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;\u015eehir&lt;\/th&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n            &lt;tr&gt;\r\n                &lt;td&gt;&lt;\/td&gt;\r\n                &lt;td&gt;&lt;\/td&gt;\r\n                &lt;td&gt;&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>&#8220;Index.cshtml&#8221; dosyam\u0131z\u0131 yukar\u0131daki gibi olu\u015fturuyorum.Birazdan veritaban\u0131ndan \u00e7ekece\u011fimiz verileri bu tabloda repeat ederek g\u00f6sterece\u011fiz.<\/p>\n<p>&#8220;Models&#8221; katman\u0131nda veritaban\u0131m\u0131z\u0131 Linq To Sql ile olu\u015fturup, &#8220;Home(Controller).cs&#8221; isimli Controller s\u0131n\u0131f\u0131m\u0131zdaki &#8220;Index&#8221; Action&#8217;\u0131nda a\u015fa\u011f\u0131daki i\u015flemlerimizi yapal\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nusing PagedList;\r\nusing PagedList.Mvc;\r\n\r\nnamespace PagedListExample.Controllers\r\n{\r\n    public class HomeController : Controller\r\n    {\r\n        VeriTabaniDataContext Veri = new VeriTabaniDataContext();\r\n        public ActionResult Index(int? SayfaNo)\r\n        {\r\n            int _sayfaNo = SayfaNo ?? 1;\r\n            var MusteriListesi = Veri.Musterilers.OrderByDescending(m =&gt; m.MusteriID).ToPagedList&lt;Musteriler&gt;(_sayfaNo, 10);\r\n\r\n            return View(MusteriListesi);\r\n        }\r\n    }\r\n}\r\n<\/pre>\n<p>G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi sayfaya &#8220;PagedList&#8221; ve &#8220;PagedList.Mvc&#8221; DLL&#8217;lerini using ettikten sonra ToPagedList Extension metodunu kullanabiliyoruz.Bu metod IQueryable tipler \u00fczerine Extension olarak in\u015faa edilmi\u015f ve geriye IPagedList tipinden de\u011fer d\u00f6nmektedir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n@using PagedList\r\n@using PagedList.Mvc\r\n@using PagedListExample.Models\r\n@model IPagedList&lt;Musteriler&gt;\r\n\r\n&lt;h2&gt;M\u00fc\u015fteriler&lt;\/h2&gt;\r\n\r\n&lt;div id=&quot;dvMusteriListesi&quot;&gt;\r\n    &lt;table&gt;\r\n        &lt;thead&gt;\r\n            &lt;tr&gt;\r\n                &lt;th&gt;\u015eirket Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;M\u00fc\u015fteri Ad\u0131&lt;\/th&gt;\r\n                &lt;th&gt;\u015eehir&lt;\/th&gt;\r\n            &lt;\/tr&gt;\r\n        &lt;\/thead&gt;\r\n        &lt;tbody&gt;\r\n            @foreach (var Musteri in Model)\r\n            {\r\n                &lt;tr&gt;\r\n                    &lt;td&gt;@Musteri.SirketAdi&lt;\/td&gt;\r\n                    &lt;td&gt;@Musteri.MusteriAdi&lt;\/td&gt;\r\n                    &lt;td&gt;@Musteri.Sehir&lt;\/td&gt;\r\n                &lt;\/tr&gt;\r\n            }\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n\r\n    @Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }))\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>&#8220;Home(Controller).cs&#8221; isimli Controller s\u0131n\u0131f\u0131m\u0131z\u0131n &#8220;Index&#8221; isimli Action metodun View katman\u0131ndaki &#8220;Index.cshtml&#8221; g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc yukar\u0131daki gibi de\u011fi\u015ftiriyorum.<\/p>\n<p>Ne gibi de\u011fi\u015fiklikler yapt\u0131m izah edelim.<\/p>\n<ul style=\"list-style-type: circle;\">\n<li><strong>1 &#8211; 4 sat\u0131r aral\u0131\u011f\u0131nda,<\/strong> projemize entegre etmi\u015f oldu\u011fumuz &#8220;PagedList&#8221; ve &#8220;PagedList.Mvc&#8221; DLL&#8217;lerini bu sayfada kullanabilmek i\u00e7in entegre ettim.Ayriyetten Models katman\u0131na rahat ula\u015fabilmek i\u00e7in projedeki Models entegre edilmi\u015ftir ve Index Action&#8217;\u0131ndan gelecek modeli yakalayacak IPagedList<Musteriler> tipini entegre ettim.<\/li>\n<li><strong>18 &#8211; 25 sat\u0131r aral\u0131\u011f\u0131nda,<\/strong> IPagedList<Musteriler> modelinin i\u00e7inde d\u00f6nerek ne kadar veri varsa listeledim.Tabi burada ne kadar veri derken, bizim Controller&#8217;da ToPagedList Extension medoyla yapt\u0131\u011f\u0131m\u0131z ayar baz al\u0131nmaktad\u0131r.Evet, IPagedList<T> tipi, bir IEnumerable tipi oldu\u011fu gibi i\u00e7inde rahat\u00e7a d\u00f6nebilir ve T yerine verilen referans\u0131n propertylerine d\u00f6ng\u00fc esnas\u0131nda s\u0131k\u0131nt\u0131s\u0131z ula\u015fabilirim.Nihayetinde Generic bir koleksiyon gibi d\u00fc\u015f\u00fcnebilirsiniz.<\/li>\n<li><strong>29. sat\u0131rda ise,<\/strong> &#8220;PagedList&#8221; ve &#8220;PagedList.Mvc&#8221; dll&#8217;leri sayesinde sayfam\u0131zda kullanabildi\u011fimiz PagedListPager metodu bize sayfaya gelen ve i\u00e7inde d\u00f6n\u00fclen modele ba\u011fl\u0131 bir sayfalama olu\u015fturulmaktad\u0131r.Metot, birinci parametresinde sayfalama yap\u0131lacak koleksiyonu isterken, ikinci parametresinde bir Func tipinden metod talep etmektedir.Bu metodu biz lambda ile i\u015faretlemekteyiz._sayfaNo parametresi o anki sayfay\u0131 temsil ederken, olu\u015fturulan linke ilgili sayfa g\u00f6nderilmektedir.Buradan anlayaca\u011f\u0131m\u0131z PagedList Componenti hangi sayfada oldu\u011funu _sayfaNo parametresi sayesinde kendisi tutabilmekte ve bizi bu zahmetten ar\u0131nd\u0131rmaktad\u0131r.<\/li>\n<\/ul>\n<p>\u015eimdi projemizi derleyip \u00e7al\u0131\u015ft\u0131ral\u0131m.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-8.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-8.png\" alt=\"Asp.NET MVC&#039;de PagedList Kullanarak Verileri Sayfalama-8\" width=\"423\" height=\"413\" class=\"aligncenter size-full wp-image-3283\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-8.png 423w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-8-300x293.png 300w\" sizes=\"auto, (max-width: 423px) 100vw, 423px\" \/><\/a><\/p>\n<p>G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi sayfalama i\u015flemi ba\u015far\u0131yla ger\u00e7ekle\u015ftirilmi\u015ftir.<br \/>\nBurada bir hususa de\u011finmek istiyorum.Dikkat ederseniz e\u011fer PagedList ile yap\u0131lan sayfalama neticesinde bir QueryString de\u011feri ile(<em>\u00d6rn, ?SayfaNo=3<\/em>) o anki sayfa elde edilmektedir.Haliyle bir MVC projesinin temel mekanizmas\u0131 olan Routing sistemine ters bir yap\u0131 olarak g\u00f6rebiliriz.Tabi, gidip ilgili route&#8217;u olu\u015fturup QueryString de\u011ferini ortadan kald\u0131rarak normal bir \u015fekilde MVC&#8217;ye yak\u0131\u015f\u0131r bir link olu\u015fturtabiliriz.E\u011fer PagedList&#8217;i bu \u015fekilde kullanacaksan\u0131z sizlere tavsiyem bu duruma dikkat ediniz.<\/p>\n<p>Peki PagedList&#8217;in nimetleri bu kadar m\u0131? diye sorabilirsiniz.Daha durun, aceleye gerek yok.Daha sayfalama \u015fablonlar\u0131na de\u011finece\u011fiz ve ayriyetten ajax ile sayfalama ger\u00e7ekle\u015ftirece\u011fiz.Yani sayfada git &#8211; gel kalkacak.Ha birde filtreleme yapaca\u011f\u0131z ama onu san\u0131r\u0131m bir sonraki yaz\u0131ya ay\u0131rmakta fayda var diye d\u00fc\u015f\u00fcn\u00fcyorum.<\/p>\n<p>Evet, \u015fimdi gelin sayfalama \u015fablonlar\u0131na g\u00f6z atal\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    &lt;h3&gt;Varsay\u0131lan sayfalama&lt;\/h3&gt;\r\n    @Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }))\r\n    &lt;div class=&quot;t&quot;&gt;&lt;\/div&gt;\r\n\r\n    &lt;h3&gt;\u00d6nceki, Sonraki&lt;\/h3&gt;\r\n    @Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }), PagedListRenderOptions.Minimal)\r\n    &lt;div class=&quot;t&quot;&gt;&lt;\/div&gt;\r\n\r\n    &lt;h3&gt;\u00d6nceki, Sonraki ve hangi sayfadas\u0131n\u0131z&lt;\/h3&gt;\r\n    @Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }), PagedListRenderOptions.MinimalWithPageCountText)\r\n    &lt;div class=&quot;t&quot;&gt;&lt;\/div&gt;\r\n\r\n    &lt;h3&gt;\u00d6nceki, Sonraki ve hangi sayfadas\u0131n\u0131z. Toplam kay\u0131t say\u0131s\u0131&lt;\/h3&gt;\r\n    @Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }), PagedListRenderOptions.MinimalWithItemCountText)\r\n    &lt;div class=&quot;t&quot;&gt;&lt;\/div&gt;\r\n\r\n    &lt;h3&gt;Sayfa numaralar\u0131&lt;\/h3&gt;\r\n    @Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }), PagedListRenderOptions.PageNumbersOnly)\r\n    &lt;div class=&quot;t&quot;&gt;&lt;\/div&gt;\r\n\r\n    &lt;h3&gt;\u00d6nceki, sonraki ve sayfa numaralar\u0131&lt;\/h3&gt;\r\n    @Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo + 1 }), PagedListRenderOptions.OnlyShowFivePagesAtATime)\r\n    &lt;div class=&quot;t&quot;&gt;&lt;\/div&gt;\r\n\r\n\r\n    &lt;h3&gt;Ki\u015fiselle\u015ftirilmi\u015f sayfalama&lt;\/h3&gt;\r\n    @Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }), new PagedListRenderOptions { LinkToFirstPageFormat = &quot;&lt;&lt; \u0130lk&quot;, LinkToPreviousPageFormat = &quot;&lt; \u00d6nceki&quot;, LinkToNextPageFormat = &quot;Sonraki &gt;&quot;, LinkToLastPageFormat = &quot;Son &gt;&gt;&quot; })\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Yukar\u0131da sadece PagedListPager metodunun prototiplerini payla\u015ft\u0131m.Bu sayfalama \u015fablonlar\u0131n\u0131 en iyisi a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi inceleyebilirsiniz.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-9.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-9.png\" alt=\"Asp.NET MVC&#039;de PagedList Kullanarak Verileri Sayfalama-9\" width=\"280\" height=\"481\" class=\"aligncenter size-full wp-image-3285\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-9.png 280w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2015\/09\/Asp.NET-MVCde-PagedList-Kullanarak-Verileri-Sayfalama-9-175x300.png 175w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/a><\/p>\n<p>Evet, istedi\u011finiz \u015fablonu se\u00e7ip i\u015fleminizi ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\n<p>\u015eimdi PagedList ile ilgili son olarak dinamik bir \u015fekilde sayfalamay\u0131 irdeleyelim ve yaz\u0131m\u0131z\u0131 noktalayal\u0131m.<\/p>\n<p>Dinamikten kas\u0131t her sayfa talebinde Ajax i\u015flemleriyle sayfay\u0131 git gel yapmadan yenilemesidir.Bunun i\u00e7in oturup sat\u0131r sat\u0131r Ajax komutlar\u0131yla u\u011fra\u015fmayaca\u011f\u0131z.Bu i\u015flemleri bizim i\u00e7in PagedList Componenti&#8217;nin geli\u015ftiricileri halletmi\u015fler(Allah raz\u0131 olsun).Biz sadece ufak tefek de\u011fi\u015fiklikler neticesinde bu i\u015flemi aktifle\u015ftirece\u011fiz.<\/p>\n<p>\u00d6ncelikle &#8220;Home(Controller).cs&#8221; katman\u0131m\u0131zdaki &#8220;Index&#8221; Action metodunda gelen talep Ajax ile mi? yoksa normal mi? kontrol ettirmeliyiz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nusing PagedList;\r\nusing PagedList.Mvc;\r\n\r\nnamespace PagedListExample.Controllers\r\n{\r\n    public class HomeController : Controller\r\n    {\r\n        VeriTabaniDataContext Veri = new VeriTabaniDataContext();\r\n        public ActionResult Index(int? SayfaNo)\r\n        {\r\n            int _sayfaNo = SayfaNo ?? 1;\r\n            var MusteriListesi = Veri.Musterilers.OrderByDescending(m =&gt; m.MusteriID).ToPagedList&lt;Musteriler&gt;(_sayfaNo, 10);\r\n\r\n            if (Request.IsAjaxRequest())\r\n            {\r\n                return PartialView(&quot;~\/Views\/Home\/_MusteriListesi.cshtml&quot;, MusteriListesi);\r\n            }\r\n\r\n            return View(MusteriListesi);\r\n        }\r\n    }\r\n}\r\n<\/pre>\n<p>Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer Request.IsAjaxReques() metodu ile gelen talebin Ajax ile mi? yoksa normal mi? geldi\u011fini kontrol ediyoruz.E\u011fer Ajax ile gelmi\u015fse, geriye bir PartialView g\u00f6nderiyoruz.<\/p>\n<p>&#8220;Views\/Home&#8221; klas\u00f6r\u00fc i\u00e7erisinde &#8220;_MusteriListesi.cshtml&#8221; isimli bir PartialView olu\u015fturdum.Bu PartialView&#8217;in i\u00e7eri\u011fi a\u015fa\u011f\u0131daki gibidir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n@using PagedList\r\n@using PagedList.Mvc\r\n@using PagedListExample.Models\r\n@model IPagedList&lt;Musteriler&gt;\r\n\r\n&lt;table&gt;\r\n    &lt;thead&gt;\r\n        &lt;tr&gt;\r\n            &lt;th&gt;\u015eirket Ad\u0131&lt;\/th&gt;\r\n            &lt;th&gt;M\u00fc\u015fteri Ad\u0131&lt;\/th&gt;\r\n            &lt;th&gt;\u015eehir&lt;\/th&gt;\r\n        &lt;\/tr&gt;\r\n    &lt;\/thead&gt;\r\n    &lt;tbody&gt;\r\n        @foreach (var Musteri in Model)\r\n            {\r\n            &lt;tr&gt;\r\n                &lt;td&gt;@Musteri.SirketAdi&lt;\/td&gt;\r\n                &lt;td&gt;@Musteri.MusteriAdi&lt;\/td&gt;\r\n                &lt;td&gt;@Musteri.Sehir&lt;\/td&gt;\r\n            &lt;\/tr&gt;\r\n        }\r\n    &lt;\/tbody&gt;\r\n&lt;\/table&gt;\r\n\r\n@Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { UpdateTargetId = &quot;dvMusteriListesi&quot; }))\r\n<\/pre>\n<p>Anlayaca\u011f\u0131n\u0131z &#8220;Index.cshtml&#8221; dosyas\u0131ndaki sayfalama alan\u0131n\u0131 PartialView&#8217;e koydum.&#8221;Index.cshtml&#8221; de ki ilgili alana ise a\u015fa\u011f\u0131daki gibi PartialView&#8217;i \u00e7a\u011f\u0131rmam yeterlidir.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n@using PagedList\r\n@using PagedList.Mvc\r\n@using PagedListExample.Models\r\n@model IPagedList&lt;Musteriler&gt;\r\n\r\n&lt;h2&gt;M\u00fc\u015fteriler&lt;\/h2&gt;\r\n\r\n&lt;div id=&quot;dvMusteriListesi&quot;&gt;\r\n    @Html.Partial(&quot;~\/Views\/Home\/_MusteriListesi.cshtml&quot;, Model)\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Art\u0131k sayfalama esnas\u0131nda Ajax i\u015flemleri neticesinde geri d\u00f6necek olan tabloyu PartialView olarak d\u00f6nd\u00fcrece\u011fiz.Bu i\u015flemi yapabilmek i\u00e7in PartialView&#8217;imizdeki komutu inceleyeniz.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n@Html.PagedListPager(Model, _sayfaNo =&gt; Url.Action(&quot;Index&quot;, &quot;Home&quot;, new { SayfaNo = _sayfaNo }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { UpdateTargetId = &quot;dvMusteriListesi&quot; }))\r\n<\/pre>\n<p>&#8220;_MusteriListesi.cshtml&#8221; isimli PartialView&#8217;de ki ilgili komutu ben yukar\u0131ya ald\u0131m.Bu komutta tek de\u011fi\u015fiklik PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing() metodunu kullanarak sayfalamay\u0131 Ajax ile yap demi\u015f oluyoruz ve netice olarak gelen verileri &#8220;dvMusteriListesi&#8221; de\u011ferine sahip div eleman\u0131nda g\u00f6ster diyoruz.<\/p>\n<p>Projemizi derleyip \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda sayfa git gel yapmadan sayfalaman\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcyoruz.Yapt\u0131\u011f\u0131m\u0131z i\u015flemi a\u015fa\u011f\u0131daki videodan daha net g\u00f6rebilirsiniz.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/kmuhYszJTbA\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Evet, PagedList Componenti&#8217;nin teferruat\u0131yla nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 incelemi\u015f olduk.<br \/>\nYaz\u0131m\u0131z\u0131 sonuna kadar okuma zahmetine katland\u0131\u011f\u0131n\u0131z i\u00e7in sizlere te\u015fekk\u00fcr ederim.<\/p>\n<p>Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere&#8230;<br \/>\nHepinizi iyi \u00e7al\u0131\u015fmalar dilerim&#8230;<\/p>\n<p>Kaynak : https:\/\/www.youtube.com\/watch?v=0opJw6w8mmY, http:\/\/www.apostylee.com\/pagedlist-mvc-paging-data\/<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Web projelerinde, veritaban\u0131nda bulunan binlerce sat\u0131rl\u0131k verilerle hizmet vermemiz gereken noktalarda sayfalamay\u0131 tercih ederiz.Bunun en temel noktas\u0131 kullan\u0131c\u0131lara g\u00f6rsel olarak yeterli veri ak\u0131\u015f\u0131 g\u00f6stermenin yan\u0131nda, server&#8217;da olu\u015fturulan sitedenin performans a\u00e7\u0131s\u0131ndan daha h\u0131zl\u0131 derlenebilmesi, veritaban\u0131na&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,11,600,18,19,780,226],"tags":[744,746,785,792,789,748,751,283,787,786,788,791,192,790],"class_list":["post-3267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-asp-net-mvc","category-asp-net-mvc-5","category-javascript","category-jquery","category-json","category-linq","tag-ajax","tag-asp-net-mvc","tag-component","tag-enableunobtrusiveajaxreplacing","tag-ipagedlist","tag-jquery","tag-linq","tag-mvc","tag-package-manager-console","tag-pagedlist","tag-pagedlist-mvc","tag-pagedlistrenderoptions","tag-querystring","tag-topagedlist"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=3267"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3267\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=3267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}