Adım Adım MVC (4.Bölüm)


İş yoğunluğu sebebiyle uzun bir süre ara verdiğimiz MVC yazı dizimize devam ediyoruz. Eski anlatımları takip etmek için buradan sayfamızı ziyaret edebilirsiniz. 

PROJEMİZDE SEARCH BOX OLUŞTURMA

Projemizde bulunan herhangi bir sayfada, tabloda veya belirlediğimiz spesifik bir alanda arama kutusu oluşturmak için mevcut çalışmamız üzerinden yapılması gerekenleri işleyeceğiz. User tablomuzda First Name, Second Name, Father Name olmak üzere üç farklı column tanımlamıştık. Şimdi varolan kayıtlar üzerinden sütuna göre arama yapmak için üç farklı search box oluşturacağız.  Öncelikle arama yaparken boşluk veya null kontrolü yapmak için projemizde bir Extensions klasörü oluşturuyor ve StringExtensions class’ı yaratıyoruz:

String Extensions metod MVC

 

Böylece arama yaparken yanlış bir sonuç vermemesi için kontrolümüzü oluşturmuş olduk. Şimdi UserController class’ımıza giderek Index methodumuza arama yapacağımız üç parametreyi tanımlıyor ve sorgulama kriterlerini oluşturuyoruz:

MVC Search Box Oluşturma

 

Sarı renk ile işaretlediğimiz yerler bizim arama sorgusu için methodumuzu hangi yönde değiştirdiğimizi gösteriyor. Değişkenlerimizi tanımladıktan sonra, oluşturduğumuz StringExtensions class’ından null kontrolümüzü gerçekleştiriyor ve eğer null değilse içeren harfi sorgulatıyoruz. Şimdi Views tarafında konumlanan Index’imize geri dönerek arama kutumuzu arayüzümüz için oluşturalım:

MVC ile arama butonu yaratma

 

Arama kutularımız için View tarafına sadece sarı renkler ile sınırını belirttiğimi bölümü ekliyoruz. Projemizde standart olarak bootstrap olması sebebiyle, sayfadaki pozisyonu için değer vermek zorunda kalmadan bir sırayı 12 bölüm üzerinden düşünerek nesneleri istediğimiz gibi sayfamıza entegre edebiliriz. Yukarıda da gördüğünüz örneğin bir bölümünü inceleyelim:

<div class="row">
            <label class="col-md-2">FirstName</label>
            <div class="col-md-4">
                @Html.TextBox("FirstName", "", new { @class = "form-control" })
            </div>
            <label class="col-md-2">SecondName</label>
            <div class="col-md-4">
                @Html.TextBox("SecondName", "", new { @class = "form-control" })
            </div>
        </div>

Bu gördüğünüz tek bir row örneğinde içindeki üyelerin aldığı değere bakarsak ‘col-md ‘ toplamlarının 12 olduğunu görebiliriz. Yani bu da tek bir satırda, aldıkları değerin toplam değere oranına göre, sırasıyla gösterileceklerini tanımlıyor. Şimdi sonuca bakarak kafamızdakileri netleştirelim:

MVC butonları responsive yapma bootstrap row design

Gördüğünüz gibi tek bir row’da yazılan FirsName ve SecondName aynı satırda aldıkları değere göre konumlanmışlar. Farklı bir row’da yazılan FatherName ve Ara Butonu da aşağıda gözüküyor. Artık MVC ile fonksiyonlarına arama da eklenen mini bir müşteri listesi oluşturduk diyebiliriz. Mutlu bir gün dileğiyle, sorunsuz build’ler yanınızda olsun :)

Yazılım ile ilgili komik görseller

 

Bunlar da ilginizi çekebilir

1 Response


  • Ayça Şahin // // Reply

    Zorlanıyorum ya daha basit bir şekilde nasıl anlayabilirim bunları :S

Gitmeden yorumunuzu bırakın.


Time limit is exhausted. Please reload the CAPTCHA.