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...

6 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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.