Asp.Net MVC ile Ajax Helper Kullanımı

  • 20.39.2017
  • tayyipyetis
  • .Net Framework

Merhaba arkadaşlar bu makalede Asp.Net MVC ile gelen Ajax Helper kavramından bahsedeceğim. Ajax teknolojisi MVC'de WebForm'a göre daha fazla kullanılır çünkü WebForm mimarisi olay temelli olduğu için Ajax işlemleri yaparken fazladan iş mantığı kurmanız gerekir ayrıca Ajax ile çalışırken yoğun bir şekilde JSON kullanılır ve WebForm' json ile ilgili yerleşik olarak neredeyse hiç kütüphane bulunmaz aksine, WebForm XML üzerinde iyidir. fakat MVC'de Json ile rahatlıkla çalışabilirsiniz bu sebeplerden ötürü MVC kütüphaneleri oldukça kullanışlı Ajax fonksiyonları içerir. Harici olarak kullanabileceğiniz kütüphaneler olsa da dahili olanları temel düzeyde işinizi görecektir.

Ajax Helper kütüphanesi geliştiricilerin sıklıkla kullandığu ajax işlemlerine göre tasarlanmıştır. Ajax ile yapılan işlemler genelde bir butona veya linke tıklandığında bunun bir controller'a talep göndermesi ve geriye json döndürmesi şeklinde; ya da bir formun ajax ile post edilip geriye bir sonuç, validasyon uyarıları vs. döndürmesi şeklinde olur. Ajax yardımcısı bu işlemler için ActionLink ve BeginForm isminde iki kullanışlı fonksiyona sahiptir. ActionLink fonksiyonunun yapısı aşağıdaki gibidir;

//@Ajax.ActionLink("{LinkText}", "{ActionName}", new AjaxOptions() { })
@Ajax.ActionLink("Veri Getir", "GetData", new AjaxOptions() { })

Bu kullanım ile basit bir şekilde bir url'ye ajax talebinde bulunabilirsiniz fakat genelde talepden bir sonuç döner ve bu sonuç bir html etiketinde gösterilir ya da listelenir. Örneğin klasik JQuery Ajax işlemini aşağıdaki şekilde yapabiliriz.

$.ajax({
  method: "POST",
  url: "/urunler/ekle",
  dataType: "json",
  data: { isim: "Cep Telefonu", fiyat: "1500" },
  success: function(response) {
    
  }
})

Success parametresine referans gösterilen fonksiyon işlem başarılı olduğunda tetiklenir ve parametre olarak dönen değeri alır. Ajax Helper ile bu işlemi otomatik olarak yapacağız. Sadece Post ya da Get işlemleri yapmak istiyorsanız aşağıdaki gibi bir kullanımı idealdir.

$.post( "ajax/post/test.html", "arg1=123&arg2=456", function( data ) {
  $( ".result" ).html( data );
});
$.get( "ajax/get/test.html", "arg1=123&arg2=456", function( data ) {
  $( ".result" ).html( data );
});

Ajax Helper kütüphanesi aslında bu işlemleri kısaltmaktan başka bir şey yapmaz. Aynı şeyleri tekrarlamaktan ve gereksiz Javascript bloklarından sizi kurtarır. Şimdi bir örnek yapalım Ajax Helper'ın ürettiği sonuçların tarayıcılarda çalışması için bir JQuery kütüphanesine ihtiyacı vardır Jquery Ajax Unobtrusive ismindeki bu basit kütüphane HTML5 ile gelen data-* şeklindeki özel attribute'leri (öznitelik) kullanarak ajax komutlarını html içerisinden tanır ve çalıştırır. Aslında bu kütüphaneyi kullanmak için MVC Ajax Helper fonksiyonlarını kullanmanız şart değildir bu fonksiyonların ürettiği Html çıktısını direkt yazarak da aynı sonucu elde edebilirsiniz fakat bu fonksiyonların kullanılma sebebi yazılan kodu daha okunabilir ve kullanışlı hale getirme çabasıdır. Jquery Ajax Unobtrusive kütüphanesinin yorumladığı bazı Html öznitelikleri ve örnek kullanımları aşağıdaki gibidir.

data-ajax="true"

data-ajax-method="POST"

data-ajax-mode="replace"

data-ajax-update="#divResult"

data-ajax-confirm="fnConfirm"

data-ajax-loading="#imgLoading"

data-ajax-cache="true"

data-ajax-begin="fnBegin"

data-ajax-success="fnSuccess"

data-ajax-failure="fnFailure"

data-ajax-complete="fnComplete"

GitHub üzerindeki kütüphaneyi bu linkten indirin ve jquery'den sonra sayfanıza dahil edin. Aşağıdaki gibi bir kullanım ile çalışma mantığını daha iyi anlayabilirsiniz.

<script src="https://code.jquery.com/jquery-3.2.0.js"></script>
<script src="~/jquery.unobtrusive-ajax.js"></script>

<h2>Index</h2>
 
 @Ajax.ActionLink("Veri Getir", "GetData", new AjaxOptions()  {  })

Yukarıdaki View sayfasının çıktısı aşağıdaki gibidir.

<script src="https://code.jquery.com/jquery-3.2.0.js"></script>
<script src="/jquery.unobtrusive-ajax.js"></script>

<h2>Index</h2>
 
<a data-ajax="true" href="/Home/GetData">Veri Getir</a>

Görüldüğü gibi ActionLink metodu bir link etiketi üretti href parametresini ActionName'i bir URL'ye dönüştürerek oluşturdu ve data-ajax isminde bir öznitelik ekledi. şimdi AjaxOptions sınıfını kullanalım. Bu sınıf aşağıdaki parametreleri içermektedir.

  1. Allowcache // dönen sonuçların tarayıcı tarafından cache'e alınmasını sağlar. varsayılan değeri false.

  2. Confirm // Ajax işlemi başlamadan bir uyarı penceresi çıkarır, onaya göre devam eder.

  3. HttpMethod //Http metot değerini alır. Get, Post, Delete, Put vs.

  4. InsertionMode //Dönen değeri hedef gösterilen etikete nasıl uygulayacağını belirtir. InsertAfter; etiketin sonuna ekler. InsertBefore; etiketin başına ekler. Replace; etiketin içeriğinin tamamını değerle yer değiştirir.

  5. LoadingElementDuration

  6. LoadingElementId // ajax işlemi boyunda gösterilecek ve işlem bittiğinde gizlenecek html etiketinin id değeri

  7. OnBegin // ajax başlamadan tetiklenecek fonksiyon ismi

  8. OnComplete // ajax tamamlandığında tetiklenecek fonksiyon ismi

  9. OnFailure // bir hata meydana geldiğinde tetiklenecek fonksiyon ismi

  10. OnSuccess // işlem başarılı olduğunda tetiklenecek fonksiyon ismi

  11. UpdateTargetId // güncellenecek html etiketinin id değeri

  12. Url

Şimdi bu sınıfı kullanarak bir örnek yapalım. Örneğimizde bir Controller'a bir değer gönderip bu değeri değiştirerek geri sonuç alalım.

View:

<div id="divResult">

</div>

@Ajax.ActionLink("Veri Getir", "GetData", new { uyeID = 234 }, new AjaxOptions()
{
    HttpMethod = "GET",
    UpdateTargetId = "divResult"
})

Controller:

public class HomeController : Controller
{
        public ActionResult Index()
        {
            return View();
        }
        public string GetData()
        {
            string deger = Request.QueryString["uyeID"];
            return "Üyenin numarası = " + deger;
        }
}

Aşağıdaki örnekte Ajax.BeginForm() fonksiyonu kullanılarak bir form elemanı Ajax Helper ile post ediliyor ve dönen değer bir html elemanının içerisinde gösteriliyor

<div id="divResult">

</div>

@using (Ajax.BeginForm("GetData", new AjaxOptions  
{  
   InsertionMode = InsertionMode.Replace,  
   HttpMethod = "POST",  
   UpdateTargetId = "divResult",  
}))  
{  
   <div class="form-horizontal">  
      <div class="form-group">  
          Öğrenci Adı:
          <input type="text" name="isim" class="form-control" />  
      </div>  
      <div class="form-group">  
       <input type="submit" value="Ara" class="btn btn-default" />  
      </div>  
   </div>  
} 

Çıktı aşağıdaki gibidir. görüldüğü gibi form elemanına data-* özelikleri eklenmiş ve ajax için bazı ayarlamalar yapılmıştır. Bu ayarlamalar Jquery Ajax Unobtrusive kütüphanesi tarafından yorumlanır ve standart JQuery fonksiyonları ile işleme alınır.

<div id="divResult">

</div>

<form action="/Home/GetData" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#divResult" id="form0" method="post">           <div class="form-horizontal">  
               <div class="form-group">  
                   Öğrenci Adı:
                   <input type="text" name="isim" class="form-control" />  
               </div>  
               <div class="form-group">  
                   <input type="submit" value="Ara" class="btn btn-default" />  
               </div>  
           </div>  
</form> 

Umarım faydalı olmuştur.

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap