Asp.Net
27
Oca
2013
Mvc Ajax
Kategori : MvcRazorAjax
Ekleyen : Admin
Merhaba Arkadaşlar; Uzun bir aradan sonra, yeni makalem ile beraberiz. Bu makalemde Mvc ile Ajax işlemleri konusunda örnek bir uygulama yapacağım. Ajax nedir? diye soracak olursanız. A J A X : Asynchronous JavaScript and XML kelimelerinin baş harfleri alınarak türetilmiştir. Yaptığı işe gelince web ortamında (biz o şekilde kullanacağımız için) Sayfalarımızın postback olmadan verileri alıp vermesine yarayan asenkron çalışan bir yapıdır.
Daha ayrıntılı bilgi için Ajax Nedir? Ajax hakkında nette bir çok kaynak bulabileceğiniz için o konulara girmiyorum.
Hemen örnek uygulamamıza başlıyoruz. Senaryomuz textbox a yazdığımız bir veriyi post ederek, geri dönen değeri sayfamız postback olmadan ekrana yazdırmak üzerine kurulu. Mvc İle Ajax işlemini yapabilmemiz için sayfamıza bazı jQuery Kütüphaneleri referans etmemiz gerekli bunlar ;
jquery-{versiyon hangisi ise}.js
jquery.unobtrusive-ajax.js
jquery.validate.js
jquery.validate.unobtrusive.js,
zaten Mvc 4 projelerinde bu dosyalar Scripts dizini altında mevcut bulunmaktadır.
Ajax ile post işlemi yapabilmek için ise "Ajax.BeginForm()" metodu.
   1:  @using (Ajax.BeginForm("InsertMetot", "Home", new AjaxOptions { HttpMethod = "Post", OnSuccess = "ReturnData", OnBegin = "FirstSend" }))
   2:  {
   3:      //Form elemanlarımız
   4:  }
Sayfamızda bir TextBox bir Button ve dönen değeri ekrana yazacak bir span tag'ı Ekliyoruz.
   1:  <span id="message"></span>
   2:  <div><input type="text" name="FirstName" /></div>
   3:  <div><input type="submit" value="Gönder" /></div>
..ve Formumuzun genel yapısı.
   1:  @using (Ajax.BeginForm("InsertMetot", "Home", new AjaxOptions { HttpMethod = "Post", OnSuccess = "ReturnData", OnBegin = "FirstSend" }))
   2:      {
   3:          <span id="message"></span>
   4:          <div><input type="text" name="FirstName" /></div>
   5:          <div><input type="submit" value="Gönder" /></div>
   6:      }
Formumuzun post edildiğinde çalışacak metodlar ve yapacağı eylemler bu kısımda belirtiliyor.
   1:  new AjaxOptions { HttpMethod = "Post", OnSuccess = "ReturnData", OnBegin = "FirstSend" }
  • HttpMethod = "Post" sayfanın post edilmesi gerektiğini belirtiyoruz. Duruma göre gönderme şeklini "Get" olarakta belirtebilirsiniz.
  • OnSuccess = "ReturnData" Post olan formun geri dönen değerini ekranayazan JavaScript metodumuz
  • OnBegin = "FirstSend" form post edildiğinde çalışacak olan ilk JavaScript metodumuz.
JavaScript metodlarımız ve jQuery kodlarımız.
   1:  <script>
   2:   
   3:      // form post edildiğinde ilk çalışacak olan metodumuz
   4:      function FirstSend() {
   5:   
   6:          //textbox kontrolu yapıyoruz boş / dolu --- boş ise durum false olarak işlemi sonlandırıyor.
   7:          var box = $("input[name='FirstName']").val();
   8:   
   9:          if (box == "") {
  10:              $("input[name=FirstName]").css({ 'border': 'solid 1px #f00'});
  11:              return false;
  12:          }
  13:      }
  14:   
  15:      // Formumuzun başarılı olması durumunda çalışacak fonksiyonumuz
  16:      function ReturnData(result) {
  17:   
  18:          $("#message").text(result.data);
  19:          $("input[name='FirstName']").val(''); // Textbox'i boşaltıyoruz.
  20:      }
  21:   
  22:      $(function () {
  23:   
  24:          $("input[name=FirstName]").click(function () {
  25:              $("input[name=FirstName]").css({ 'border': 'solid 1px #ccc' });
  26:          });
  27:      });
  28:   
  29:  </script>
Veriyi post ettiğimiz sayfamız. Verilerimizi jSon olarak döndürüyoruz.
   1:  [HttpPost]
   2:  public ActionResult InsertMetot(string FirstName)
   3:  {
   4:      try
   5:      {
   6:           // Geriye Dönen başarılı sonuç mesajımız
   7:           return Json(new { data = FirstName + " kayıt işlemi tamamlandı" });
   8:      }
   9:      catch (Exception ex)
  10:      {
  11:           // Hata oluşması durumunda dönen hata mesajımız.
  12:           return Json(new { data = ex.Message });
  13:      }
  14:  }
Textbox alanı boş ise aşağıdaki görüntü ile karşılaşacağız.
Başarılı bir işlem sonunda ise, sayfamıza kayıt işleminin tamamlandığına dair oluşacak ekran çıktısıda aşağıdaki gibi olacaktır.
Örnek uygulamayı indirerek konuyu daha yakından inceleyebilirsiniz. Fırsat buldukça Ajax ve jQuery ile ilgili bir kaç makale daha yazmayı düşünüyorum,
Şimdilik hoşçakalın...

Örnek Proje : Mvc Ajax İşlemleri 1
İlk yorum yazan siz olun.