ASP.NET ile Jquery autocomplete yapmak (1)

ASP.NET ile Jquery autocomplete yapmak (1)

Bir önceki makalemde asp.net ile autocomplete kullanımını işlemiştim. Dileyen Ajax AutoComplete Extender ile gelişmiş arama linkinden ilgili makaleyi inceleyebilir. Yine aynı konunun devamı olan bir makale daha yazıyorum. Ancak bu sefer Jquery kullanarak ve daha gelişmiş bir arama motoru yapacağız. Daha önce bu işlemi Ajax AutoComplete Extender ile yapmışken şimdi neden tekrar yaptığımı merak edebilirsiniz. Birinci sebebi bu modül daha gelişmiş olacak. Bir web servis kullanacağız. Sonra Jquery autocomplete özelliğini kullanarak, ajax ile web servisimizden bu bilgileri çekeceğiz. Autocomplete extender açıkcası gelişmiş modüller için pek uygun değil. Yapısı Jquery autocomplete kadar esnek ve performans açısından da yeterli değil. Tüm bunların yanında her zaman farklı tecrübeler edinmek iyidir diyerek konuya başlıyorum.

Makalemiz üç bölümnden oluşacaktır.

  1. Web servis hazırlanması
  2. Jquery autocomplete içerisinde ajax ile servisin çağrılması
  3. Görüntüleme ve Css

Web Servis :

Bir asmx formu açıyoruz  ve aşağıdaki kodları yerleştiriyoruz.

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Configuration;

using System.Data;

using System.Web.Script.Serialization;

using Newtonsoft.Json;

 

 

[WebService(Namespace = “http://tempuri.org/”)]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]  // ScriptService aktif etmeyi unutmayın

public class CompleteWord : System.Web.Services.WebService {

 

[WebMethod]

public string KategoriAdiAl(string Kelime) // Textboxtan gelecek kelime parametre olarak alınıyor

{

 

Baglanti bag = new Baglanti(); // Bağlantı işlemlerinin yer aldığı sınıf  

 

bag.Komut = “select IlanBaslik=IlanBaslik,KategoriAd=KategoriAd,KategoriId=KategoriId,UstKategoriAd=UstKategoriAd from [vw_AutoComplete] where ” + “IlanBaslik like ‘” + Kelime + “%'”; // Bu sorgu (SqlCommand) veritabanı yapınıza göre değişiklik gösterecektir.

DataTable dt = bag.SorguCalistirTablo(); // Çektiğimiz sorguyu datatable içerisine atıyoruz.

Dictionary<string, object> keys = new Dictionary<string,object>();

keys.Add(“Kategoriler”, “”); // Liste açıldığında kategoriler adında bir başlığımız olacak. Bu başlığı listenin ilk elemanı olarak atıyoruz. 

List<Dictionary<string, object>> Kategoriler_ = new List<Dictionary<string, object>>();

Kategoriler_.Add(keys); // İlk dictionary elemanımız olan “Kategoriler” textini atadık. Ayrı zaman bu başlık olacaktır.

Buradan sonraki kodların özeti şöyle : İlk önce datatable içerisinde dönerek her bir satıra ulaşıyoruz. Her döndüğümüzde yeni bir dictionary nesnesi oluştururak içerisine datatable’dan gelen kolonların adını ve datarow içerisinden gelen değeri yazdırıyoruz. Bu döngü sonunda çekilen kolon adı ve satır değeri list içerisine kaydediliyor. Son olarak oluşturuğumuz listeyi serialize ederek geri döndürüyoruz.

Dictionary<string, object> row;

 

foreach (DataRow dr in dt.Rows)

{

row = new Dictionary<string, object>();

foreach (DataColumn col in dt.Columns)

{

row.Add(col.ColumnName, dr[col]);

}

Kategoriler_.Add(row);

}

 

return JsonConvert.SerializeObject(Kategoriler_);

}

}

JsonConvert kullanabilmek için referans göstermeniz gerekiyor. JavaScriptSerializer yerine niçin bunu kullandığımı merak edenler için JsonConvert %50 daha performanslı çalışıyor diyebilirim. İsterseniz kendinizde test edebilirsiniz. Bu linkten paketi indirilebilirsiniz.

Bir sonraki makale için tıklayınız.

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

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