{"id":3289,"date":"2015-09-21T09:34:36","date_gmt":"2015-09-21T09:34:36","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=3289"},"modified":"2015-09-21T09:36:03","modified_gmt":"2015-09-21T09:36:03","slug":"asp-net-mvcde-ajax-uzerinden-sayfalama-yapimi-ve-filtreleme-islemleri","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/asp-net-mvcde-ajax-uzerinden-sayfalama-yapimi-ve-filtreleme-islemleri\/","title":{"rendered":"Asp.NET MVC’de Ajax \u00dczerinden Sayfalama Yap\u0131m\u0131 ve Filtreleme \u0130\u015flemleri"},"content":{"rendered":"
<\/div>\n

Bir \u00f6nceki yazm\u0131\u015f oldu\u011fum Asp.NET MVC\u2019de PagedList Kullanarak Verileri Sayfalama<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda Asp.NET MVC’de PagedList ile sayfalama yap\u0131m\u0131n\u0131 detayl\u0131ca irdelemi\u015ftik.Bu yaz\u0131m\u0131zda ise h\u0131zl\u0131 bir \u015fekilde PagedList ile sayfalama yap\u0131lm\u0131\u015f bir veri k\u00fcmesinde Ajax ile filtreleme i\u015flemlerine de\u011finece\u011fiz.<\/p>\n

Bu yaz\u0131m\u0131zdaki \u00f6rneklendirmeyide \u00f6nceki yaz\u0131m\u0131zda oldu\u011fu gibi Northwind veritaban\u0131ndaki M\u00fc\u015fteriler tablosu \u00fczerinden ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n

Olu\u015fturdu\u011fumuz bo\u015f bir Asp.NET MVC mimarisine gerekli PagedList Componenti ve JQuery ve Ajax k\u00fct\u00fcphanelerini entegre ettikten sonra(ki bu i\u015flemler i\u00e7in yukar\u0131da vermi\u015f oldu\u011fum adresteki yaz\u0131y\u0131 inceleyiniz) Models katman\u0131m\u0131zda ilgili veritaban\u0131n\u0131n Linq To Sql ile entegresini ger\u00e7ekle\u015ftirelim.Bu yaz\u0131m\u0131zda yukar\u0131da vermi\u015f oldu\u011fum adresteki proje kodlar\u0131n\u0131 temel alaca\u011f\u0131m\u0131z i\u00e7in \u00f6rne\u011fimizin PagedList entegrasyonunda \u00e7ok fazla teferruata girmeyece\u011fim.
\n\u015eimdi “Home(Controller).cs” isimli bir Controller olu\u015ftural\u0131m ve “Index” isimli Action metodunun View katman\u0131ndaki .cshtml uzant\u0131l\u0131 dosyas\u0131nda a\u015fa\u011f\u0131daki yap\u0131y\u0131 olu\u015ftural\u0131m.<\/p>\n

\r\n@using PagedList\r\n@using PagedList.Mvc\r\n@using PagedListExample.Models\r\n@model Musteriler\r\n\r\n<h2>M\u00fc\u015fteriler<\/h2>\r\n\r\n<div id="dvMusteriFiltre">\r\n    <input type="text" value="\u015eirket Ad\u0131" id="txtSirketAdi" name="txtSirketAdi" \/>\r\n    <input type="text" value="M\u00fc\u015fteri Ad\u0131" id="txtMusteriAdi" name="txtMusteriAdi" \/>\r\n    <input type="text" value="\u015eehir" id="txtSehir" name="txtSehir" \/>\r\n    <input type="submit" value="Ara" id="btnAra" \/>\r\n<\/div>\r\n<div id="dvMusteriListesi">\r\n    @Html.Partial("~\/Views\/Home\/_MusteriListesi.cshtml", Model)\r\n<\/div>\r\n<\/pre>\n
Bu olu\u015fturdu\u011fumuz yap\u0131da hem “_MusteriListesi.cshtml” i\u00e7inde PagedList ile sayfalama yaparken, bir yandan da dinamik filtrelemeyi olu\u015fturaca\u011f\u0131z.Tabi burada filtrelemeyi yaparken Ajax’tan yararlanaca\u011f\u0131z lakin oturup Ajax yazmadan, Ajax.BeginForm yard\u0131m\u0131yla bu i\u015flemi g\u00f6rece\u011fiz.Yaz\u0131m\u0131z\u0131n ilerideki ad\u0131mlar\u0131nda bu alan\u0131 d\u00fczeltece\u011fiz.<\/p>\n
\u015eimdi “_MusteriListesi.cshtml” Partial’\u0131n\u0131 d\u00fczenlemeden Modelimizdeki Musteriler Entity’sine bir ka\u00e7 ekleme ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n
\r\n    partial class Musteriler\r\n    {\r\n        public int? SayfaNumarasi { get; set; }\r\n        public IPagedList<Musteriler> MusteriListesi { get; set; }\r\n    }\r\n<\/pre>\n
Bu propertylerin eklenmesinin sebebi, filtreleme esnas\u0131nda verileri bir Musteriler modeli olarak Action’a post ettikten sonra PagedList’in SayfaNumarasi’ni tutacak veriyi ve PagedList’e veri kayna\u011f\u0131 olacak koleksiyonu bar\u0131nd\u0131rmas\u0131 i\u00e7in bu eklemeleri yapt\u0131m.<\/p>\n
\u015eimdi “_MusteriListesi.cshtml” Partial’\u0131n\u0131 a\u015fa\u011f\u0131daki gibi olu\u015ftural\u0131m.<\/p>\n
\r\n@using PagedList\r\n@using PagedList.Mvc\r\n@using PagedListExample.Models\r\n@model Musteriler\r\n\r\n<table>\r\n    <thead>\r\n        <tr>\r\n            <th>\u015eirket Ad\u0131<\/th>\r\n            <th>M\u00fc\u015fteri Ad\u0131<\/th>\r\n            <th>\u015eehir<\/th>\r\n        <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n        @foreach (var Musteri in Model.MusteriListesi)\r\n            {\r\n            <tr>\r\n                <td>@Musteri.SirketAdi<\/td>\r\n                <td>@Musteri.MusteriAdi<\/td>\r\n                <td>@Musteri.Sehir<\/td>\r\n            <\/tr>\r\n        }\r\n    <\/tbody>\r\n<\/table>\r\n\r\n@Html.PagedListPager(Model.MusteriListesi, _sayfaNo =>\r\nUrl.Action("Index", "Home", new RouteValueDictionary\r\n{\r\n    {"SirketAdi", Model.SirketAdi },\r\n    {"MusteriAdi", Model.MusteriAdi },\r\n    {"Sehir", Model.Sehir },\r\n    {"SayfaNumarasi", _sayfaNo }\r\n}), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { UpdateTargetId = "dvMusteriListesi" }))\r\n<\/pre>\n
Partial sayesinde listelememizi ger\u00e7ekle\u015ftirmi\u015f olduk.Dikkat ederseniz e\u011fer new RouteValueDictionary nesnesi ile g\u00f6nderilecek modelin property isimleri yaz\u0131l\u0131p, kar\u015f\u0131lar\u0131na de\u011ferleri girilmektedir.Neticede bu \u015fekilde her talep do\u011frultusunda bu property isimlerine ilgili de\u011ferler y\u00fcklenip post edilecek ve server taraf\u0131nda bu post neticesinde biz gelen datay\u0131 model olarak yakalayabilece\u011fiz.Verilen property isimleriyle uyumluluk g\u00f6sterdi\u011fi i\u00e7in gelen veriyi Musteri modeli olarak yakalayaca\u011f\u0131z.\u015eimdi ilgili “Home(Controller).cs” isimli Controller katman\u0131m\u0131zda ki “Index” Action metodunu a\u015fa\u011f\u0131daki gibi olu\u015ftural\u0131m.<\/p>\n
\r\n    public class HomeController : Controller\r\n    {\r\n        VeriTabaniDataContext Veri = new VeriTabaniDataContext();\r\n        public ActionResult Index(Musteriler Musteri)\r\n        {\r\n            int _sayfaNo = Musteri.SayfaNumarasi ?? 1;\r\n            Musteri.MusteriListesi = Veri.Musterilers.Where(\r\n                m => (String.IsNullOrEmpty(Musteri.SirketAdi) || m.SirketAdi.Contains(Musteri.SirketAdi)) &&\r\n                (String.IsNullOrEmpty(Musteri.MusteriAdi) || m.MusteriAdi.Contains(Musteri.MusteriAdi)) &&\r\n                (String.IsNullOrEmpty(Musteri.Sehir) || m.Sehir.Contains(Musteri.Sehir))\r\n                ).OrderByDescending(m => m.MusteriID).ToPagedList<Musteriler>(_sayfaNo, 10);\r\n\r\n            if (Request.IsAjaxRequest())\r\n            {\r\n                return PartialView("~\/Views\/Home\/_MusteriListesi.cshtml", Musteri);\r\n            }\r\n\r\n            return View(Musteri);\r\n        }\r\n    }\r\n<\/pre>\n
Evet, yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer dinamik Where sorgusu in\u015faa ettik ve filtreleme kriterlerine g\u00f6re verilerimizi \u00e7ektirdik.Bu algoritmay\u0131 iyi okursan\u0131z e\u011fer sayfa ilk a\u00e7\u0131l\u0131yorsa t\u00fcm verileri getirece\u011fini g\u00f6receksinizdir.<\/p>\n
\u015eimdi son olarak “Index.cshtml” sayfam\u0131zda Ajax formunu olu\u015fturmak i\u00e7in yeniden buraya alal\u0131m ve g\u00fcncelleyelim.<\/p>\n
\r\n@using PagedList\r\n@using PagedList.Mvc\r\n@using PagedListExample.Models\r\n@model Musteriler\r\n\r\n<h2>M\u00fc\u015fteriler<\/h2>\r\n\r\n<div id="dvMusteriFiltre">\r\n    @using (Ajax.BeginForm("Index","Home",FormMethod.Post, new AjaxOptions { OnSuccess = "jsFiltreleme" }))\r\n    {\r\n        <strong>\u015eirket Ad\u0131<\/strong>@Html.TextBoxFor(model => model.SirketAdi)\r\n        <strong>M\u00fc\u015fteri Ad\u0131<\/strong>@Html.TextBoxFor(model => model.MusteriAdi)\r\n        <strong>\u015eehir<\/strong>@Html.TextBoxFor(model => model.Sehir)\r\n        <input type="submit" value="Ara" id="btnAra" \/>\r\n    }\r\n<\/div>\r\n<div id="dvMusteriListesi">\r\n    @Html.Partial("~\/Views\/Home\/_MusteriListesi.cshtml", Model)\r\n<\/div>\r\n<\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi filtreleme yapaca\u011f\u0131m\u0131z\u0131 alan\u0131 Ajax.BeginForm ile yap\u0131land\u0131rm\u0131\u015f olduk.Burada dikkat etmeniz gerkeen husus AjaxOptions nesnesinde OnSuccess propertysine vermi\u015f oldu\u011fumuz “jsFiltreleme” de\u011feridir.Bu nedir diye sorarsan\u0131z \u015f\u00f6yle izah edeyim.Filtreleme ama\u00e7l\u0131 de\u011ferler post edildi\u011fi zaman Ajax ile i\u015flenecektir ve e\u011fer serverda yap\u0131lan i\u015flemler neticesinde geriye bir de\u011fer d\u00f6n\u00fcl\u00fcyorsa OnSuccess propertysinde ismi verilen JavaScript fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131lacakt\u0131r.Yani geriye d\u00f6n\u00fclen de\u011feri biz “jsFiltreleme” fonksiyonunda yakalayabilece\u011fiz.Tabi birazdan bu fonksiyonu olu\u015fturaca\u011f\u0131z.\u015eunu demeden ge\u00e7emeyece\u011fim ki, OnSuccess \u00f6zelli\u011fi, Ajax komutlar\u0131ndaki success fonksiyonuyla birebir mant\u0131kt\u0131r.<\/p>\n
\r\n<script type="text\/javascript">\r\n    function jsFiltreleme(GelenDeger)\r\n    {\r\n        $("#dvMusteriListesi").html(GelenDeger);\r\n    }\r\n<\/script>\r\n<\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi son olarakta JavaScript fonksiyonumuzu olu\u015fturmu\u015f oluyoruz.Nihayetinde Ajax ile post i\u015flemi neticesinde geriye bir PartialView d\u00f6n\u00fclecektir.\u0130\u015fte bu PartialView de\u011ferini GelenDeger parametresiyle yakalay\u0131p, ilgili div i\u00e7ine tekrardan bast\u0131r\u0131yoruz ve PagedList’te hem sayfalamada hem de filtrelemede dinamik yap\u0131lar\u0131 kullanm\u0131\u015f oluyoruz.<\/p>\n
Projemizi derleyip \u00e7al\u0131\u015ft\u0131ral\u0131m ve a\u015fa\u011f\u0131daki videoda da oldu\u011fu gibi gayet esnek, g\u00fczel ve ho\u015f bir yap\u0131yla kar\u015f\u0131la\u015fal\u0131m.<\/p>\n