Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Asp.NET MVC’de Ajax Üzerinden Sayfalama Yapımı ve Filtreleme İşlemleri

Bir önceki yazmış olduğum Asp.NET MVC’de PagedList Kullanarak Verileri Sayfalama başlıklı yazımda Asp.NET MVC’de PagedList ile sayfalama yapımını detaylıca irdelemiştik.Bu yazımızda ise hızlı bir şekilde PagedList ile sayfalama yapılmış bir veri kümesinde Ajax ile filtreleme işlemlerine değineceğiz.

Bu yazımızdaki örneklendirmeyide önceki yazımızda olduğu gibi Northwind veritabanındaki Müşteriler tablosu üzerinden gerçekleştireceğiz.

Oluşturduğumuz boş bir Asp.NET MVC mimarisine gerekli PagedList Componenti ve JQuery ve Ajax kütüphanelerini entegre ettikten sonra(ki bu işlemler için yukarıda vermiş olduğum adresteki yazıyı inceleyiniz) Models katmanımızda ilgili veritabanının Linq To Sql ile entegresini gerçekleştirelim.Bu yazımızda yukarıda vermiş olduğum adresteki proje kodlarını temel alacağımız için örneğimizin PagedList entegrasyonunda çok fazla teferruata girmeyeceğim.
Şimdi “Home(Controller).cs” isimli bir Controller oluşturalım ve “Index” isimli Action metodunun View katmanındaki .cshtml uzantılı dosyasında aşağıdaki yapıyı oluşturalım.

@using PagedList
@using PagedList.Mvc
@using PagedListExample.Models
@model Musteriler

<h2>Müşteriler</h2>

<div id="dvMusteriFiltre">
    <input type="text" value="Şirket Adı" id="txtSirketAdi" name="txtSirketAdi" />
    <input type="text" value="Müşteri Adı" id="txtMusteriAdi" name="txtMusteriAdi" />
    <input type="text" value="Şehir" id="txtSehir" name="txtSehir" />
    <input type="submit" value="Ara" id="btnAra" />
</div>
<div id="dvMusteriListesi">
    @Html.Partial("~/Views/Home/_MusteriListesi.cshtml", Model)
</div>

Bu oluşturduğumuz yapıda hem “_MusteriListesi.cshtml” içinde PagedList ile sayfalama yaparken, bir yandan da dinamik filtrelemeyi oluşturacağız.Tabi burada filtrelemeyi yaparken Ajax’tan yararlanacağız lakin oturup Ajax yazmadan, Ajax.BeginForm yardımıyla bu işlemi göreceğiz.Yazımızın ilerideki adımlarında bu alanı düzelteceğiz.

Şimdi “_MusteriListesi.cshtml” Partial’ını düzenlemeden Modelimizdeki Musteriler Entity’sine bir kaç ekleme gerçekleştireceğiz.

    partial class Musteriler
    {
        public int? SayfaNumarasi { get; set; }
        public IPagedList<Musteriler> MusteriListesi { get; set; }
    }

Bu propertylerin eklenmesinin sebebi, filtreleme esnasında verileri bir Musteriler modeli olarak Action’a post ettikten sonra PagedList’in SayfaNumarasi’ni tutacak veriyi ve PagedList’e veri kaynağı olacak koleksiyonu barındırması için bu eklemeleri yaptım.

Şimdi “_MusteriListesi.cshtml” Partial’ını aşağıdaki gibi oluşturalım.

@using PagedList
@using PagedList.Mvc
@using PagedListExample.Models
@model Musteriler

<table>
    <thead>
        <tr>
            <th>Şirket Adı</th>
            <th>Müşteri Adı</th>
            <th>Şehir</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var Musteri in Model.MusteriListesi)
            {
            <tr>
                <td>@Musteri.SirketAdi</td>
                <td>@Musteri.MusteriAdi</td>
                <td>@Musteri.Sehir</td>
            </tr>
        }
    </tbody>
</table>

@Html.PagedListPager(Model.MusteriListesi, _sayfaNo =>
Url.Action("Index", "Home", new RouteValueDictionary
{
    {"SirketAdi", Model.SirketAdi },
    {"MusteriAdi", Model.MusteriAdi },
    {"Sehir", Model.Sehir },
    {"SayfaNumarasi", _sayfaNo }
}), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { UpdateTargetId = "dvMusteriListesi" }))

Partial sayesinde listelememizi gerçekleştirmiş olduk.Dikkat ederseniz eğer new RouteValueDictionary nesnesi ile gönderilecek modelin property isimleri yazılıp, karşılarına değerleri girilmektedir.Neticede bu şekilde her talep doğrultusunda bu property isimlerine ilgili değerler yüklenip post edilecek ve server tarafında bu post neticesinde biz gelen datayı model olarak yakalayabileceğiz.Verilen property isimleriyle uyumluluk gösterdiği için gelen veriyi Musteri modeli olarak yakalayacağız.Şimdi ilgili “Home(Controller).cs” isimli Controller katmanımızda ki “Index” Action metodunu aşağıdaki gibi oluşturalım.

    public class HomeController : Controller
    {
        VeriTabaniDataContext Veri = new VeriTabaniDataContext();
        public ActionResult Index(Musteriler Musteri)
        {
            int _sayfaNo = Musteri.SayfaNumarasi ?? 1;
            Musteri.MusteriListesi = Veri.Musterilers.Where(
                m => (String.IsNullOrEmpty(Musteri.SirketAdi) || m.SirketAdi.Contains(Musteri.SirketAdi)) &&
                (String.IsNullOrEmpty(Musteri.MusteriAdi) || m.MusteriAdi.Contains(Musteri.MusteriAdi)) &&
                (String.IsNullOrEmpty(Musteri.Sehir) || m.Sehir.Contains(Musteri.Sehir))
                ).OrderByDescending(m => m.MusteriID).ToPagedList<Musteriler>(_sayfaNo, 10);

            if (Request.IsAjaxRequest())
            {
                return PartialView("~/Views/Home/_MusteriListesi.cshtml", Musteri);
            }

            return View(Musteri);
        }
    }

Evet, yukarıdaki kod bloğunu incelerseniz eğer dinamik Where sorgusu inşaa ettik ve filtreleme kriterlerine göre verilerimizi çektirdik.Bu algoritmayı iyi okursanız eğer sayfa ilk açılıyorsa tüm verileri getireceğini göreceksinizdir.

Şimdi son olarak “Index.cshtml” sayfamızda Ajax formunu oluşturmak için yeniden buraya alalım ve güncelleyelim.

@using PagedList
@using PagedList.Mvc
@using PagedListExample.Models
@model Musteriler

<h2>Müşteriler</h2>

<div id="dvMusteriFiltre">
    @using (Ajax.BeginForm("Index","Home",FormMethod.Post, new AjaxOptions { OnSuccess = "jsFiltreleme" }))
    {
        <strong>Şirket Adı</strong>@Html.TextBoxFor(model => model.SirketAdi)
        <strong>Müşteri Adı</strong>@Html.TextBoxFor(model => model.MusteriAdi)
        <strong>Şehir</strong>@Html.TextBoxFor(model => model.Sehir)
        <input type="submit" value="Ara" id="btnAra" />
    }
</div>
<div id="dvMusteriListesi">
    @Html.Partial("~/Views/Home/_MusteriListesi.cshtml", Model)
</div>

Gördüğünüz gibi filtreleme yapacağımızı alanı Ajax.BeginForm ile yapılandırmış olduk.Burada dikkat etmeniz gerkeen husus AjaxOptions nesnesinde OnSuccess propertysine vermiş olduğumuz “jsFiltreleme” değeridir.Bu nedir diye sorarsanız şöyle izah edeyim.Filtreleme amaçlı değerler post edildiği zaman Ajax ile işlenecektir ve eğer serverda yapılan işlemler neticesinde geriye bir değer dönülüyorsa OnSuccess propertysinde ismi verilen JavaScript fonksiyonu çalıştırılacaktır.Yani geriye dönülen değeri biz “jsFiltreleme” fonksiyonunda yakalayabileceğiz.Tabi birazdan bu fonksiyonu oluşturacağız.Şunu demeden geçemeyeceğim ki, OnSuccess özelliği, Ajax komutlarındaki success fonksiyonuyla birebir mantıktır.

<script type="text/javascript">
    function jsFiltreleme(GelenDeger)
    {
        $("#dvMusteriListesi").html(GelenDeger);
    }
</script>

Gördüğünüz gibi son olarakta JavaScript fonksiyonumuzu oluşturmuş oluyoruz.Nihayetinde Ajax ile post işlemi neticesinde geriye bir PartialView dönülecektir.İşte bu PartialView değerini GelenDeger parametresiyle yakalayıp, ilgili div içine tekrardan bastırıyoruz ve PagedList’te hem sayfalamada hem de filtrelemede dinamik yapıları kullanmış oluyoruz.

Projemizi derleyip çalıştıralım ve aşağıdaki videoda da olduğu gibi gayet esnek, güzel ve hoş bir yapıyla karşılaşalım.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…

Kaynak : https://www.youtube.com/watch?v=0opJw6w8mmY

Bunlar da hoşunuza gidebilir...

9 Cevaplar

  1. Ercan Akar dedi ki:

    Proje indirme dosyasını da link şeklinde koyarsanız daha güzel olur sanırım.

    Teşekkürler 🙂

    • Gençay dedi ki:

      Merhaba,

      İlgili makalenin içeriğindeki örnek kodlar dışında proje kaynak kodları ne yazık ki saklamadığım için elimde bulunmamaktadır.

      Kolay gelsin.
      Sevgiler…

  2. Ertan dedi ki:

    Hocam Merhabalar.
    Partial View’ da RouteValueDictionary yollarken Model.SirketAdi yazdıgımda hata veriyor daha dogrusu oyle bir nesne yok bulamıyor onu bunuun nedeni sizce nedir ?
    Teşekkürler

    • Gençay dedi ki:

      Merhaba,
      Controller’da ilgili View’e nesne göndermeyi unutmuş olabilirsin.

      • İlker EPİK dedi ki:

        Abi nasıl çalıştırdın bu kodu anlamıyorum, sürekli aynı yerde takılıyorum. Listeyi nesneadı.propertyAdı ile çağıramazsın, yani ben öyle biliyorum ve visual studio da derlemiyor zaten.

  3. İlker EPİK dedi ki:

    Ertan isimli arkadaşta yazmış, senin cevabınada ekleme yapmamış. Ama şöyle bir durum var, Musteriler içerisinde MusteriListesi bir Liste, bu sebepten dolayı Model.Sirket adını kabul etmiyor. Bir foreach içerinde olsa item.SirketAdi nı kabul eder. Bende tam olarak o noktada takıldım. Yardımcı olursan sevinirim.

  4. Funda dedi ki:

    İlker ve Ertanın dediği gibi kodda hata var ancak hala soruları yanıtlamıyorsunuz. Madem hatanızı düzeltmeyeceksiniz ya da bir cevap yazmayacaksınız neden blog yazıyorsunuz!!!!

    • Gençay dedi ki:

      Neden mi blog yazıyorum? Kendim için…!

      Yapılan yorumların paralelinde aynı kişiler tarafından mailden gelen sorulara verdiğim destekler neticesinde, muhattaba bu desteği ilgili makale altında paylaşması için yaptığım ricalara karşılık aldığım sözlerin %95’ini gerçekleştirmeyen bir toplumda gelip buradaki en masum niyeti yargılamanızı abesle iştigal görüyorum.

      Lütfen, hayati bir mesele olmadığı sürece kendim için yazdığım bu bloğa gelip kendinizi koca internet kaynağından mahrum ederek vakit ve imkanlarınızı kısırlaştırmamanızı tavsiye ederim.
      Kolay gelsin…

  5. mamud dedi ki:

    eline sağlık bir sorum olacak checkbox ile multifiltreleme yaptığımız zaman httpPost ile gönderdiğimiz verileri 2. sayfa yenilemesinde kaybediyoruz bu verileri tutmanın bir yolu var mıdır?

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.