Uzun zaman önce jQueryUi AutoComplete kullanımı ve Asp.Net ile jQuery Autocomplete kullanmak adında yazılar yazmıştım. Geçtiğimiz günlerde Fehmi Can abi de bir video çekerek Play framework ile autocomplete kullanımını anlatmış. Bende kıskandım aynı olayın mvc3 de nasıl yapıldığını videosuz yazarak anlatmaya çalışacağım :) Bu arada MVC3 ve jQuery kullanımı ile ilgili videolara buradan ve buradan ulaşabilirsiniz.
Hemen bir model oluşturup, ilgili kontrolleri oluşturuyoruz.
public class kullanici
{
public int id { get; set; }
public string adi { get; set; }
public string soyAdi { get; set; }
}
Kontrollerimizide oluşturduktan sonra veritabanımıza bir kaç tane kayıt ekliyoruz ve sonrasında arama işlemini yapıp geriye json data döndüren searchJson methodumuzu yazıyoruz.
public ActionResult searchJson(string term) {
var result = db.kullanicis.Where(x => x.adi.Contains(term) || x.soyAdi.Contains(term)).Select(x => new { id = x.id, value = x.adi });
return Json(result,JsonRequestBehavior.AllowGet);
}
Yukarıda ki kodda ne yaptık bundan biraz bahsetmek istiyorum. Where ile kullanici tablosunda adi veya soyadi alanında aratılan kelimeyi sorguluyoruz. Select ile geri döndürelecek veriyi kişiselleştiriyoruz. Eğer Select ile bu işlemi yapmazsak json datamız şu şekilde olacaktı, yani modeli aynen geri döndürecekti.
[{"id":3,"adi":"ahmet","soyAdi":"durmuş"},{"id":5,"adi":"mehmet","soyAdi":"kalkan"}]
Select ten sonra json datamız bu şekile dönüyor
[{"id":3,"value":"ahmet"},{"id":5,"value":"mehmet"}]
Bu işlemden sonra arama yapacağımız sayfamızı yani view ımızı oluşturuyoruz (search.cshtml) ve içine autocomplete işlemini gerçekleştirecek kodlarımızı yazıyoruz. Bu arada Jquery Ui – Autocomplete ile ilgili özelliklere buradan bakabilirsiniz.
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#deger").autocomplete({
source: "/kullanici/searchJson",
minLength: 1,
select: function (event, ui) {
alert(ui.item.id + " / " + ui.item.value);
}
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="deger">Bir değer girin: </label>
<input id="deger" size="50" />
</div>
</div>
Gördüğünüz gibi çok kolay ve hızlı bir şekilde autocomplete işlemini gerçekleştirdik. Bu örnekte aynı zamanda json veriyle ne kadar kolay işlem yaptığımızıda gördük ;) Projenin çalışan halini buradan indirebilirsiniz. Umarım faydalı bir yazı olmuştur.