Takip Edin

ASP.NET MVC

Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı – Blog Arama Kutusu

asp.net mvc teknoloji bloğu - blog arama kutusu öne çıkan görsel
Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı
Proje Şablonu
Entity Sınıfları
Context Sınıfı
Database Initialization
Connection String
Controller
Blog ve Kategori Tabloları
Anasayfa Blog Listesi
Blog ve Kategori Ekleme Formu
Blog ve Kategori Güncelleme Formu
Kayıt Detay Sayfası
Layout
Kategori Menüsü
Blog Filtreleme
Blog Arama Kutusu

Bu yazıda, blog arama kutusu için bir partial view oluşturma ve arama kutusuna girdiğimiz değerin, blogların başlığında veya açıklama kısmında yer alması durumunda filtrelenmesi işlemleri gerçekleştirilecektir.

Solution Explorer penceresinde, Views klasörünün altında bulunan Shared klasörüne sağ tıklayıp Add => View diyelim:

asp.net mvc teknoloji bloğu - Shared klasörüne sağ tıklayıp Add =>> View dedik

Search adında bir partial view oluşturalım:

asp.net mvc teknoloji bloğu - search partila view ekleme penceresi

Solution Explorer penceresinde, Home klasörü altında bulunan Index.cshtml ile Blog klasörü altında bulunan List.cshtml dosyalarını açalım ve arama kutusu ile ilgili olan kodları silelim:

asp.net mvc teknoloji bloğu - index.cshtml dosyasında blog arama kutuları ile ilgili kodların silinmeden önceki hali
asp.net mvc teknoloji bloğu - List.cshtml dosyasında blog arama kutuları ile ilgili kodların silinmeden önceki hali

Search.cshtml dosyasına aşağıdaki kodları yerleştirelim:

@using (Html.BeginForm("List","Blog",FormMethod.Get))
{
    <div class="card bg-dark p-4 mb-5">
        <h4 class="text-light text-center">Blog Ara</h4>
        <hr class="border-light pt-0 mt-2 mb-4" />
        <div class="input-group">
            @Html.TextBox("q", null, new { @class = "form-control" })
            <div class="input-group-append">
                <button class="btn btn-info" type="submit">Ara</button>
            </div>
        </div>
    </div>
}

Search partial view’ini, Html.Partial metoduyla Index.cshtml ve List.cshtml dosyalarında sildiğimiz yere getirelim:

asp.net mvc teknoloji bloğu - index.cshtml dosyasına Search view'ini HTML.Partial metodu ile getirdik
asp.net mvc teknoloji bloğu - List.cshtml dosyasına Search view'ini HTML.Partial metodu ile getirdik

Uygulamayı çalıştırıp /Home/Index ve /Blog/List sayfalarını açalım:

asp.net mvc teknoloji bloğu - Html.Partial ile arama kutusunu getirdikten sonra /Home/Index sayfasında kontrol etme
asp.net mvc teknoloji bloğu - Search view'ini Html.Partial ile sayfaya getirdikten sonra  /Blog/List sayfasında kontrol etme

Görüldüğü gibi Index.cshtml ve List.cshtml dosyalarına Search.cshtml partial view’ini getirme işlemi, sorunsuz bir şekilde gerçekleşti.

BlogController.cs dosyasında List action metoduna string q’yu dahil edelim:

asp.net mvc teknoloji bloğu - List action metoduna string q'yu dahil etme

Kullanıcı, arama kutusuna bir değer girdiğinde bu değerin, blogların başlık veya açıklama kısmında aranarak filtrelenmesini sağlamak için aşağıda verilen kodları, yukarıdaki resimde belirtilen yere yerleştirelim:

asp.net mvc teknoloji bloğu - List action metoduna filtreleme işlemi için gerekeli kodların yerleştirilmesi

Uygulamayı çalıştırıp /Blog/List sayfasını açtıktan sonra arama kutusuna değer girip ara tuşuna basalım ve blogları filtreleme işlemini kontrol edelim:

asp.net mvc teknoloji bloğu - arama kutusuna whatsapp değerini girdik ve ara tuşuna bastık
asp.net mvc teknoloji bloğu - arama kutusuna lcd değerini girdik ve ara tuşuna bastık

Aşağıda görüldüğü gibi arama kutusuna girdiğimiz değerler, ilgili blogları filtreleyerek karşımıza getirmiş oldu:

asp.net mvc teknoloji bloğu - whatsapp değerini, ilgili blogun başlığında bularak filtreleyip karşımıza getirdi.
asp.net mvc teknoloji bloğu - arama kutusuna lcd yazdık ve lcd değerini ilgili bloğun açıklama kısmında bulup filtrelerek karşımıza getirdi
Devamını oku

Popüler

error: Content is protected !!