Mvc ile Gelişmiş Arama

Selamlar arkadaşlar;

Bugün Mvc ile asenkron, multitasking, jquery post  bir arama yapıp sonuçları Partail View dönen bir web uygulaması yazacağız.

Öncelikle boş bir DetaylıAra adında Mvc Web Application yaratılır.

Index.cshtml: Arama yapılacak Index sayfası aşağıdaki gibi kodlanmıştır. Sayfanın tepesinde gözüken bir header, içine logo ve detaylı aramanın yapılacağı txtSearch id’li ‘textbox’. Ve yanına arama button’u konur. Hemen aşağısında aram sonuçlarının içine basılacağı ‘searchDiv’ bulunmaktadır.

src

Index.html için oluşturulan Css dosyası: Header ile alakalı stillerin tanımlaması aşağıdaki gibi yapılmıştır.

Index.cshtml (Javascript) Datayı Çekme: Aşağıda document.ready() function’ında  search textbox’ına “,” , “%”ve enter haricinde bir tuşa basılır ise tuşun yukarı hareketinde ilgili javascript çalıştırılır. Girilen karakter sayısı 3 ve 3’den büyük ise delay() function’ı çağrılır. Burada amaç text içine hızlı bir şekilde yazı yazılması durumunda herbir karakter için ilgili script’in çalıştırmamasıdır.  Home Controller’ın Search action’ına aranacak kelime parametre olarak Post edilir. Daha sonra dönen result yani Partial View searchDiv‘inin içine basılır. Hata durumunda ilgili uyarılar verilir. Aynı şekilde id’si ‘srcButton‘ olan search button’una tıklanınca txtSearch’in keyup event’i tetiklenir. Böylece aranacak isim post edilmiş olunur.  En sonda txtSearch‘ün üstüne gelinip odaklanıldığında içindeki “Detaylı ara?” yazısı kaybolur. Yine aynı şekilde text’den ayrılınıldığı zaman içine bir yazı yazılmamış ise yani içerik boş ise gene üstüne default “Detaylı ara?” yazısı yazılır. Burada amaç kullanıcıya mümkün olduğunca algıda kolaylık sağlamaktır.

Database işlemleri için Code First kullanılmıştır. Öncelikle aşağıdaki gibi DAL adında Bir Class Library yaratılıp NorthContext adında Entity Data Model oluşturulur. Daha sonra var olan Northwind database’inden CoderFirst ile Customers,Employees ve Suppliers poco nesneleri oluşturulup, North DBContext class’ı oluşturulur.

1-) Class Library ve Entity Data Model

DAL1 Entity1

2-) Var olan database üzerinden Code First ve Poco Nesneleri:

codef1  tab1

DAL2

NorthContext.cs:

Şimdi sıra HomeController’dan dataların çekilmesinde. Öncelikle sorgulanacak search key’e göre Customer, Supplier ve Employee’den multitasking data aşağıdaki gibi çekilir.  Task.Factory.StartNew(() => ile herbir tablodan linq ile çekilen data bir task’a atanır. Daha sonra List<Task> döndüren  GetSeachResult() methodu oluçturulan taskCustomer, taskSupplier, taskEmployee’, bir Task listesine ekleyip geri döndürür. Bu arada sonuçların gösterileceği Search View Model burada doldurulur.

SearchModel.cs:

HomeController.cs(Search) : Client Side tarafından jquery post yapılacak Search() methodunda GetSearchResult() ile dönen tasklerin await Task.WhenAll(tasks) ile tamamlanması beklenir. Asenkron işlem için Search() methodunun başına async ifadesi konur. Aynı şekilde taskların tamamlanması await keyword’u ile asenkron olarak beklenilir. Bu işlem sonucunda ViewModel doldurulmuş olunur. Daha sonra sonuçlar ilgili model ile birlikte Partial View olarak döndürülür. Burada altını çizmek istediğim nokta geri dönüş tipinin Partial View olması yani arama sonucu için ayrıca bir html üretilmemesidir. Jquery ile client side tarafında yapılan request sonucu dönen Partial View divResult‘in içine aşağıdaki gibi basılır. DAL projesinin DetaylıAra projesine referance olarak eklenmesi, Nuget’den EntityFramework’ün projeye eklenmesi ve Web.config’e connection strings’in tanımlanması unutulmamalıdır.

list

ResultView.cshtml(Partial View): Aşağıdaki ResultView model olarak SearchModel beklemektedir. Gelen Customer, Employee ve Supplier listeleri içinde  tek tek dönülerek bulunan resultlar ekrana basılır. Databaseden filitrelenen isimler yazılırken search ekranında aranan harflerin yerleri ismin içinde bulunup font rengi değiştirilir. Bu işlem yapılırken ismin büyük veya küçük harf ile başlaması gibi bir çok olasılık denenerek ilgili harfler çağrılan result data içiresinde bulunur. Burada amaç kullanıcının algısını arttırarak, aranan harflerin ilgili ismlerin içinde nerelerde geçtiğini göstermektir. Ayrıca Partial View’da DetaylıAra.Controllers adında bir namespace tanımlanmıştır. Amaç HtmlHelperExtensions.UppercaseFirst extension’ı kullanılarak aranacak kelimenin baş harfini büyütmektir. Böylece başharfi büyük olan search’ler de kelime içinde bulunularak font’u değiştirilir.

UppercaseFirst Extension:

ResultView.cshtml(Partial View):

Böylece Mvc ile aranan bir ismi sql database’deki farklı tablolardan asenkron multitasking olarak search edip, partial view olarak dönen result’ı jquery ile bir div içine bastık.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın. Source kodlar ve ilgili NortWind database’i aşağıdadır.

Hoşçakalın.

NorthWind DataBase : http://www.microsoft.com/en-us/download/details.aspx?id=23654

Source Code : http://www.borakasmer.com/projects/DetaylıAra.rar

Herkes Görsün:

Sevebilirsin...

15 Yanıt

  1. Veysel diyor ki:

    Selamlar Bora Hocam;
    Öncelikle çok güzel ve detaylı bir yazı olmuş. Elinize sağlık. Tam da search yapısı ile ilgili türkçe kaynak ararken taze taze karşıma bu sizin makaleniz çıktı. En kısa zamanda var olan sistemimizi asenkron ve multitasking’e çevirmeye karar verdim. Yazınız için bir daha teşekkürler.

    • borsoft diyor ki:

      Teşekkürler Veysel;
      Sistemi asenkron bir yapıya çevirince, performans sonuçlarını benle de paylaşırsan sevinirim.

      İyi çalışmalar.

  2. Yigit diyor ki:

    Merhaba hocam,

    Gectigimiz gunlerde 5+ webservis uzerinden ayni anda sonuc alma istegi gelmisti. SignalR ile gelistirmistim uygulamayi. Yaptiginiz gibi ben de Multitask PartialView cevirdim.

    Elinize saglik.

  3. Cem diyor ki:

    Selamlar Hocam;
    Çok güzel bir yazı olmuş. Eminim birçok kişinin işine yarıyacaktır. Ben de elimdeki birçok yapıyı asenkron yapıya geçirmeyi planlıyorum.

    Elinize sağlık. Teşekkürler.

  4. Ferit diyor ki:

    Selamlar, paylaştığınız içerik için teşekkür ederim. Ben ilk karakteri büyük yapmak için CultureInfo.CurrentCulture.TextInfo.ToTitleCase(stringValue); şeklinde kullanıyorum.

    • borsoft diyor ki:

      Selam Ferit;
      Senin de belirttiğin gibi ilk harfi büyütme işini CulterInfo class’ı ile de yapabilirdik. Bu yazıda amacım, konu arasında Mvc View Engine’de yani Razor’da Extension kullanımını da göstermekti.
      Yine de daha kısa bir yola örnek verdiğin için teşekkürler.

      İyi çalışmalar.

  5. Yaşar diyor ki:

    Bu makalenizde anlattığınız konuyu 3-4 gündür internette arıyorum. Gerçekten çok güzel bir örnek. Böyle bir örneği paylaşmanız harika bir şey. Bu kadar yoğun bir tecrübe ve bilgi birikimi sonrası oluşmuş bu örneği paylaşmanızı haddim olmayarak takdir ediyorum.
    Çok teşekkür ederim.

  6. Zehra diyor ki:

    Paylaşımınız için tşk ederim.Gerçekten aradığım ve bulamadığım örneklerden birtanesi.Kodlarınızı denedim sonuca ulaştım :)
    Okurlara faydası olacağını düşündüğüm için eklemek istediğim; Task.WhenAll() kullanımını .Net Framework 4.5 destekliyor..Net Framework 4.0’de Task.WhenAll yerine TaskEx.WhenAll kullanılıyor.Bunun içinde https://www.nuget.org/packages/Microsoft.Bcl.Async/1.0.168 adresindeki sürümün yüklenmesi gerekiyor.
    Yeniden tşk ederim.İyi Çalışmalar

  7. Zehra diyor ki:

    Benim sormak istediğim bir konu var ki bulunan sonuçlar arasından bir tanesini seçip textbox içine id değerini aktarmak istiyorum.Nasıl bir yol izlemem gerekiyor.Şimdiden teşekkür ederim.

  8. ahmet diyor ki:

    Şuan o kadar çok işime yaradı ki bu makale anlatamam. Çok teşekkür ediyorum bora abi.

Bir Cevap Yazın

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