Asp.NET MVC’de Google Suggest Yapısı [AutoComplete]

Önceki yazılarımdan Ajax AutoCompleteExtender Kontrolü İle Google Suggest Yapısı başlıklı yazımda Asp.NET mimarisinde AutoCompleteExtender kontrolü ile Google Suggest yapısının projelerimizde nasıl kullanılacağına değinmiştik.Gelin görün ki, Asp.NET MVC mimarisinde böyle bir yapıya ihtiyaç duyarsak eğer ToolBox nesneleri olmadığından ve Ajax Componentlerinin hazırları bulunmadığından dolayı işimiz birazdaha zor gibi gözükmektedir.Oturup JQuery ya da Ajax ile kodlama yapmaktansa şimdi sizlere paylaşacağım bir JQuery kütüphanesiyle bu işlemi nasıl hızlı bir şekilde gerçekleştireceğimizi bir örneklendirmeyle göreceğiz.

Asp.NET MVC projesinde Suggest yapısını kullanmak için öncelikle aşağıdaki verilen .rar dosyasını indirmeniz gerekmektedir.
Asp.NET MVC JQuery AutoComplete
Bu dosyayı rardan çıkardıktan sonra içerisinde “jquery.autocomplete.css” ve “jquery.autocomplete.js” isimli iki adet dosya göreceksiniz.Öncelikle ilk işiniz bu dosyaları MVC projenize ekleyip, Layout sayfanıza entegre etmekdir.(Tabi jquery.autocomplete.js dosyasının çalışabilmesi için jquery-1.8.2.js ve jquery-ui-1.8.24.js kütüphanelerinin projeye entegre edildiği varsayılmaktadır.)

    @Styles.Render("~/Content/jquery.autocomplete.css")
    @Scripts.Render("~/Content/jquery.autocomplete.js")

Bu işlemleri gerçekleştirdikten sonra Suggest yapısı için Controller katmanımızda ki Action metodumuzu hazırlamalıyız.

Ben örnek misali Northwind veritabanındaki Personeller tablosunu kullanacağım.

    public class PersonelController : Controller
    {
        VeriTabaniDataContext Veri = new VeriTabaniDataContext();

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult PersonelGetir(string q)
        {
            var PersonelAdi = (from p in Veri.Personellers where p.Adi.Contains(q) select p.Adi).Distinct().Take(10);

            string content = string.Join<string>("\n", PersonelAdi);
            return Content(content);
        }
    }

Gördüğünüz gibi TextBox nesnesine yazılacak her karakter için “Personel(Controller).cs” isimli Controller katmanında bulunan “PersonelGetir” isimli Action metod tetiklenecek ve yeni sonuç listesi gönderilecektir.

Controller katmanımızı yazdık, kullanacağımız JQuery kütüphanelerini de projemize entegre ettik.Eee…!
Peki şimdi ne yapmamız gerekiyor? diye sorarsanız eğer hemen söyleyeyim.

Hangi TextBox nesnesinde çalışacağımızı belirledikten sonra ufak bir kod ile JQuery metodu çağırdığımız zaman işlemimiz sona erecek ve TextBox’ta Suggest yapısı hızlı bir şekilde çalışacaktır.

    <script type="text/javascript">
            $(document).ready(function () {
                $("#txtPersonelAdi").autocomplete('@Url.Action("PersonelGetir", "Personel")', { minChars: 3 });
            });
    </script>
    <input type="text" id="txtPersonelAdi" name="txtPersonelAdi" />

Yukarıdaki kod bloğunu incelerseniz eğer id si “txtPersonelAdi” olan TextBox için JQuery ile çağrılmış olan “autocomplete” metodu sayesinde Suggest yapısı kullanılmıştır.

Ekran görüntüsü aşağıdaki gibi olacaktır.
Asp.NET MVC Suggest

Faydalanmanız dileğiyle..
İyi çalışmalar..

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.