Veysel Uğur KIZMAZ

Asp.Net MVC WebGrid içerisinde nasıl arama yapacağımızı öğrenelim.

Önceki makalemizde WebGrid kullanımını ve cursorun üzerine geldiği satırı renklendirip link oluşturmayı öğrenmiştik.

Makale linki: http://www.ugurkizmaz.com/YazilimMakale-1846-Asp-Net-MVC-WebGrid-Satirini-Tiklanabilir-Yapma-Clickable-Row.aspx

Şimdi benzer bir örnek üzerinden işlemimizi gerçekleştirelim. Örnek uygulamamızda benzer bir ürün listesi oluşturacağız. Ürün listesinin Ad değerinde, viewa yerleştireceğimiz input > text kontrolüne yazacağımız metnin yer aldığı ürünleri listeleyeceğiz.  

Asp.Net MVC projemizde ürün bilgilerini bir nesne üzerinde tanımlayalım. Ürünün Id, Ad, Fiyat ve Adet (stok miktarı) bilgilerinin bulunduğu Urun sınıfını oluşturalım.

public class Urun
{
    public int Id { get; set; }
    public string Ad { get; set; }
    public double Fiyat { get; set; }
    public int Adet { get; set; }
}

Ürün bilgilerimizi Veri isminde bir sınıf içerisinde static olarak tanımlayalım. Ürün aramayı ürünün adına göre yapacağımız için string parametre alan UrunSorgula isimli bir metod da oluşturalım. View içerisinde arama işlemini bu metod ile gerçekleştirelim.

public class Veri
{
    private static List<Urun> _urunler = new List<Urun>()
    {
        new Urun{ Id = 1, Ad = "Masaüstü Bilgisayar", Fiyat = 1200, Adet = 20},
        new Urun{ Id = 2, Ad = "Laptop", Fiyat = 2000, Adet = 40},
        new Urun{ Id = 3, Ad = "Tablet", Fiyat = 800, Adet = 65},
        new Urun{ Id = 4, Ad = "Akıllı Telefon", Fiyat = 1450, Adet = 230},
        new Urun{ Id = 5, Ad = "LCD TV", Fiyat = 1100, Adet = 55},
        new Urun{ Id = 6, Ad = "LED TV", Fiyat = 2200, Adet = 90},
        new Urun{ Id = 7, Ad = "Çamaşır Makinesi", Fiyat = 1000, Adet = 15},
        new Urun{ Id = 8, Ad = "Bulaşık Makinesi", Fiyat = 900, Adet = 20},
        new Urun{ Id = 9, Ad = "Ekmek Kızartma Makinesi", Fiyat = 165, Adet = 25},
        new Urun{ Id = 10, Ad = "Saç Kurutma Makinesi", Fiyat = 100, Adet = 42},
        new Urun{ Id = 11, Ad = "Flat TV", Fiyat = 700, Adet = 30}
    };
    public static List<Urun> UrunSorgula(string urunAd)
    {
        if (string.IsNullOrEmpty(urunAd))
            return _urunler;
        var urunler = (from u in _urunler
                       where u.Ad.Contains(urunAd)
                       select u).ToList();
        return urunler;
    }
}

Veri > UrunSorgula metodunda eğer parametrede boş bir string geliyorsa tüm verileri döndürecek, aksi durumda filtrelemeyi yapıp sonucu geri döndürecek şekilde tanımlama yaptık.

NOT: Eğer urunAd değeri null gelirse kod hata verecektir (“Value cannot be null”)

Projemizde HomeController içerisinde UrunAra isminde bir action oluşturalım ve model olarak Veri.UrunAra ‘yı tanımlayalım.

public class HomeController : Controller
{
    public ActionResult UrunAra()
    {
        return View();
    }
}

HomeController > Urunler actionı için view oluşturalım: Views > Home > UrunAra.cshtml

İşlemler tamamlandığına göre Urunler viewına gelebiliriz. Öncelikle burada WebGrid nesnemizi oluşturmamız gerekmektedir. WebGrid nesnesini oluştururken içerisinde hangi verilerin yer alacağını da tanımlayalım. Ardından WebGrid nesnesini view içerisinde görüntüleyelim.

@{
    string urunAdi = Request["urunAd"];
    var urunler = Makale.MVCWebGrid.Veri.UrunSorgula(urunAdi);

    var grid = new WebGrid(urunler, rowsPerPage:11);
}

Request["urunAd"] ile, filtreleme kriterini yazacağımız input > text kontrolündeki değeri alıyoruz (kontrolü bir sonraki adımda ekleyeceğiz).

Şimdi arama yapacağımız input > text ve arama işlemini gerçekleştirecek olan input > submit (buton) kontrollerini ekleyelim. Text kontrolünün value’suna @Request["urunAd"] tanımlamasını yaparak buradan gelecek değeri form post edildiğinde kullanacağız. Formun post edilme işlemi ise buton ile yapılacaktır.

<form method="post">
    <div>
        Ürün Adı:
        <input type="text" name="urunAd" value="@Request["urunAd"]" />
        <input type="submit" value="Ara" />
    </div>
</form>

Son olarak WebGrid kontrolünü ekleyelim.

@grid.GetHtml(
columns: grid.Columns(
            grid.Column("Id", "Ürün Kodu"),
            grid.Column("Ad", "Ürün Adı"),
            grid.Column("Fiyat", "Fiyatı"),
            grid.Column("Adet", "Stok Miktarı")
        ))

UrunAra.cshtml viewının tüm kodları aşağıdaki gibi olacaktır.

@{
    ViewBag.Title = "UrunAra";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    string urunAdi = Request["urunAd"];
    var urunler = Makale.MVCWebGrid.Veri.UrunSorgula(urunAdi);

    var grid = new WebGrid(urunler, rowsPerPage:11);
}
<h2>Ürün Ara</h2>
<form method="post">
    <div>
        Ürün Adı:
        <input type="text" name="urunAd" value="@Request["urunAd"]" />
        <input type="submit" value="Ara" />
        @grid.GetHtml(
        columns: grid.Columns(
                    grid.Column("Id", "Ürün Kodu"),
                    grid.Column("Ad", "Ürün Adı"),
                    grid.Column("Fiyat", "Fiyatı"),
                    grid.Column("Adet", "Stok Miktarı")
                ))
    </div>
</form>

Örnek projemizi çalıştıralım ve  Home > UrunAra viewını açalım.

“Ürün Adı” Text kontrolüne “Makine” yazıp Ara butonuna tıklayalım. İçerisinde “Makine” ifadesinin geçtiği ürünler listelenecektir.

 

Yepyeni makalelerde görüşmek dileğiyle :)

Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com