Web API ve Ajax kullanımını anlatırken daha önce oluşturduğumuz web servis‘den faydalanacağız.

Ajax Nedir?

  • Ajax, web sayfalarının, sunucu ile arkaplanda etkileşime geçerek asenkron olarak güncellenmesine olanak tanıyan bir teknolojidir.
  • Ajax ile web sayfasının tamamını tekrar yüklemeden yalnızca parçalarının güncellenin mümkün olur.
  • Asynchronous JavaScript And XML anlamına gelmektedir.
  • Uygulamalar data taşımak için XML kullanabilir fakat düz metin veya JSON göndermek de eşit derecede yaygındır.

Client Kısmı

  • Bir önceki yazıda bize gerekli verileri sağlayan web servisini Web API kullanarak oluşturmuştuk.
  • Bu servis kısmı herhangi bir programlama diliyle yazılmış olabilir. Client kısmı serverdan bağımsız olacaktır.
  • Sayfamızda bir JavaScript kütüphanesi olan Jquery ile Ajax işlemlerini gerçekleştirerek Web API ve Ajax’ın nasıl beraber çalıştığını göreceğiz.
  • Şimdi client kısmını yazacağız. Client için bir ayrı MVC projesi oluşturmak da mümkündür.
  • Fakat basit bir html sayfası ile göstermek çok daha kolay olur:

Ajax Web API

index.html dosyasının içeriği:

JavaScript kısmı içerisinde bir GET ve bir POST isteğimiz var. Bunları Jquery Objesinin Ajax metodunu kullanarak yapıyoruz. GET veri alırken, POST ise girdiğimiz veriyi ekleyecek. GET sayfa açıldığında direk olarak veriyi çekmeyi deniyor. Başarısızlık durumunda hata veriyor. POST butonun click event’ine yazılmış yani butona basıldığında aktif hale gelecek. O da başarısızlık durumunda hata veriyor.

Sayfa Açılırken Gerçekleşenler

Sayfamız açılırken GET metodu ile bir istek http://localhost:21040/api/category/GetAllCategories adresine yapılıyor.

İstek geldiğinde uygulamamız WebApiConfig.cs içerisindeki route’a göre gerekli action’ı seçecek. Yani CategoryController içerisindeki GetAllCategories controller’ını bizim bildirdiğimiz tanıma göre seçiyor.

Actionlar ise Controller objemiz içerisindeki metodlardı.

İlk sorguda CategoryController’ın GetAllCategories action’ı çağrılıyor.

GetAllCategories Action

Categories tablosuna SELECT çekerek databaseden gelen değerleri CategoryModel DTO tipinde bir listeye aktarıyor.  Bu liste JSON olarak return ediliyor.

Bu gelen json data bizim success fonksiyonumuz içerisinde bulunan data nesnesinin içerisine düşüyor.

Bir döngü ile KategoriAdi ve Aciklamasi değerlerini items adında bir diziye oradan da ul tagı içerisine aktarıyoruz.

Son olarak HTML formunda gizli bulunan body tagını aktif hale getiriyoruz.

Butona Tıklandığında Gerçekleşenler

Butona tıklandığında ilk olarak bir nesne oluşturulup değerler içerisine aktarılıyor:

Daha sonra bu nesne ile Ajax üzerinden POST işlemini gerçekleştiriyoruz. (Data kısmında nesneyi belirttik.)

Cevap olarak gelen “success” yazısını biz controller içerisinde biz yazmıştık. Action’un hatasız işlediğini gösteriyor.

Biz de bu mesajı aldıktan sonra değerleri listeye ekliyoruz.