Teknotra

İlk olarak Ajax nedir kısaca bundan bahsedeyim ve hali hazırda geliştirmekte olduğum projede Ajax kullanımına neden ihtiyaç duydum bundan bahsedeyim. Ajax, Javascript ile internet sayfalarında sayfaları yeniden yüklemeye gerek kalmadan ve yeni sayfalara yönlenmeden sayfa içeriğinin değişmesini sağlayan metodun adıdır. Ekranda bulunan bir değeri sayfayı yeniden yüklemeyerek veritabanından ya da herhangi bir yerden sorgu sonucu ile değiştirmenize olanak sağlar. Şimdi MVC Ajax Kullanımı neden vardır ve nasıl yapılır bir bakalım.

MVC Ajax Kullanımına Neden İhtiyaç Duyulur ?

Onat Göksel( @onat35 ) ile geliştirmekte olduğumuz MVC projesi içerisinde güzel bir DropdownList kullanıyoruz. Bu dropdownlistin nasıl kullanılacağını da Aranabilir Dropdownlist MVC Kullanımı başlıklı yazıda anlatmıştım. Herhangi bir elemanı seçtiğim zaman bu elemanın comboboxta yazmayan bir değerini sayfanın bir yerinde yazdırmak istiyorum. Comboboxtaki veriler bir sınıfın ad özelliğini bize gösteriyorken ben bu sınıfın ağırlık özelliğini görmek istiyorum. Bunu yapabilmek için Ajax sorgusu atmak zorunda kaldım. Bu sorguyu da comboboxın onchange metoduna koydum.

MVC Ajax Kullanımı Nasıl Yapılır ?

İlk olarak Ajax sorgusuna cevap verecek fonksiyonu oluşturalım. Bu fonksiyon bize bir JSON dosyası döndürecektir. İçerisine aldığı parametreye bağlı olarak veritabanından bir kaydı alacak ve kaydın istediğim özelliğini yani ağırlık özelliğini bana döndürecektir. Örnek olması açısından kodu paylaşıyorum:

[HttpPost()]
public ActionResult GetDokumAgirlikByID(string modelID)
 {
return Json(DokumIslemleri.GetDokumById(Convert.ToInt32(modelID)).agirlik, JsonRequestBehavior.AllowGet);
}

MVC Ajax Kullanımı için bir de bu fonksiyona istek atacak Javascript fonksiyonunu yazalım.

<script>
    function dokumChange() {
        $.post("@Url.Action("GetDokumAgirlikByID", "Dokum")", { modelID: document.getElementById("DokumDropDown").options[document.getElementById("DokumDropDown").selectedIndex].value }, function (gelenveri) {
            document.getElementById("lblAgirlik").innerHTML =(gelenveri);
        });}
</script>

Veritabanından bilgiyi döndürecek olan fonksiyonu Dokum controllerı içerisine yazdım ve fonksiyonun adı GetDokumAgirlikByID içerisine parametre olarak DokumDropDown içerisinde seçili dökümün IDsini veriyorum ve istek sonucu gelen veriyi de lblAgirlik içerisine yazdırıyorum.