Javascript ve JQuery ile Web API Kullanımı

8 Mayıs 2014
Posted by Çağatay Yıldız
2612 Views

Bu yazımızda WebAPIden dışarıya açtığımız verilerimizi javascript ve jquery kullanarak çekeceğiz. Böylelikle platform bağımsız kullanım sağlayacağız. WebAPI Hello world uygulamasını bir önceki makalemizde yazmıştık . Aynı şekilde bir yapı inşa ediyorum.
Oluşturduğum Ninja class ı ve API Controller şu şekilde

public class Ninja
{
    public int Id { get; set; }
    public string Ad { get; set; }
    public bool OyundaMi { get; set; }
    public string Memleket { get; set; }
 
}
public class NinjalarController : ApiController
    {
        Ninja[] ninjas = new Ninja[]
        {
        new Ninja(){Id = 1, Ad = "Rafael",OyundaMi = true,Memleket = "İzmir"},
        new Ninja(){Id = 2, Ad = "Donatello",OyundaMi = true,Memleket = "Livorno"},
        new Ninja(){Id = 3, Ad = "Mikalenjelo",OyundaMi = false,Memleket = "Havana"},
        new Ninja(){Id = 4, Ad = "Leonardo",OyundaMi = true,Memleket = "Barcelona"}
        };
 
        public IEnumerable<Ninja> GetAllNinja()
        {
            return ninjas;
        }
    }

Bu yapıya ek olarak id ye göre ninjanın gelmesi için aynı Controller a GetNinja isimli dışarıdan id alan bir metot ekledim.

        public Ninja GetNinja(int id)
        { 
            Ninja nj = ninjas.FirstOrDefault(n => n.Id == id);
            return nj;
        }

Şimdi ise bu verilerimi çekmek için bir html sayfası oluşturup jquery i html sayfama ekledim. Sayfamın yapısı ise şu şekilde

    <div>
    <h2>Ninja Listesi</h2>
    <ul id="products" />
  </div>
  <div>
    <h2>ID ye göre arama</h2>
    <input type="text" id="njID" size="5" />
    <input type="button" value="Search" onclick="find();" />
    <p id="ninja" />
  </div>

Html sayfamın head kısmına jquery kütüphanemi ekledim

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Sıra geldi bu yapıdan verileri çekeceğim javascript lerime

 
      var uri = 'api/Ninjalar';

      $(document).ready(function () {
          
          $.getJSON(uri)
              .done(function (data) {
               
                  $.each(data, function (key, item) {
                      
                      $('<li>', { text: formatItem(item) }).appendTo($('#ninja'));
                  });
              });
      });

      function formatItem(item) {
          return item.Ad + ":" + item.Memleket;
      }

      function find() {
          var id = $('#njID').val();
          $.getJSON(uri + '/' + id)
              .done(function (data) {
                  $('#ninja').text(formatItem(data));
              })
              .fail(function (jqXHR, textStatus, err) {
                  $('#ninja').text('Error: ' + err);
              });
      }

Scripti açıklamak gerekirse öncelikle uri diye bir obje tanımlayıp bu objeye url i verdim. Böylelikle dinamik olarak url imi bu obje üzerinden çağıracağım. Daha sonra belirttiğim ilk function döküman yüklendikten sonra verilerimi $.getJSON adlı jquery metodumla çekmemi ve çektiği verileri(yani Ninja Listemi) ekranda yazmamı sağladı.
Daha sonra Html sayfamda butonumun onclick e tanımladığım find isimli function ise ID ye göre verileri çekmemi sağladı. (ApiController tarafında id ye göre verilerimi çekmesi için GetNinja isimli bir metot tanımlamıştım) Hangi ID yi yollarsam ona ait Ninja gelmekte. format item isimli function ise gelen objedeki hangi özellikleri yazdıracağımı belirtti.
Ekran Görüntüm ise şu şekilde.
web-api-jquery-1

Arama yaptığımda ise ekran görüntüm şu şekilde oluşmakta
web-api-jquery-2
Görüldüğü gibi Id yi girdiğimde NinjaApiController da GetNinja isimli metodum bana Ninjayı getirmekte.