Angularjs ve ASP.NET MVC ile Döviz Kurları Uygulaması - Exchange Rates Application With Angularjs and ASP.NET MVC

Bu yazıda TCMB (Türkiye Cumhuriyeti Merkez Bankası) tarafından yayınlanan ve kur bilgilerini içeren XML dosyasını kullanarak döviz kurlarını gösteren bir uygulama geliştireceğiz. Bu uygulama içinde gerekli TCMB verileri sunucu üzerinde çekilip AJAX ile tarayıcıya gönderilecektir. Neden direk tarayıcı üzerinden verileri çekmiyoruz diyen arkadaşlar varsa eğer öncelikle "same-origin policy" adı verilen kuralı incelemeleri gerekir. Bu kurala göre bir tarayıcı üzerinden değişik bir kaynaktaki (domaindeki) veriye ulaşım güvenlik endişesiyle engellenmektedir. Bu durum sadece AJAX için değil "iframe" için de geçerlidir.

Öncelikle TCMB kaynağından veriyi alacak sunucu kodunu tanımlayalım:

[HttpGet]
public ActionResult GetData()
{
     XDocument doc = XDocument.Load("http://www.tcmb.gov.tr/kurlar/today.xml");
     var dox = doc.Descendants()
         .Where(r => r.Name == "Currency")
         .Select(r => new {
             Isim = r.Element("Isim").Value,
             Kod = r.Attribute("Kod").Value,
             AlisKur = r.Element("BanknoteBuying").Value,
             SatisKur = r.Element("BanknoteSelling").Value
          });

      return Json(dox, JsonRequestBehavior.AllowGet);
}

Kod yukarıdan aşağıya incelendiğinde öncelikle dikkat çeken nokta [HttpGet] tanımlamasıdır. Bu tanımlama ile "GetData" fonksiyonuna ulaşılırken "Get" isteği kullanılması gerektiği belirtilmektedir. Yani fonksiyon "Post" veya "Delete" isteklerine cevap vermeyecektir.

Bir diğer önemli nokta ise "XDocument" sınıfıdır. Bu sınıf, XML verisini üzerinde LINQ sorgularının çalıştırılmasına olanak sağlayacak bir biçimde kullanmaktadır. Bilindiği üzere aynı işlemi yapan bir diğer sınıf da "XmlDocument" sınıfıdır. Bu sınıf XML verisini eski usül XML DOM olarak kullanmakta ve veri içindeki aramaları "XPath" ile yapmaktadır. LINQ arayüzünün daha basit olması sebebiyle bu uygulamada "XDocument" sınıfını kullandım.

Son aşamada "Json" fonksiyonu kullanılarak bir önceki LINQ işleminden dönen ön tanımsız nesneler JSON formatına dönüştürülüp istemciye gönderilmektedir. "JsonRequestBehavior.AllowGet" kullanılarak fonksiyonun "GET" isteklerine müsaade etmesi sağlanmıştır. Aksi durumda dönüşümü yapmayacaktır.

Sonraki aşamada AngularJs kodlarını tanımlayalım:

var currencyapp = angular.module('currencyapp', []);

currencyapp.controller('currencyListController', ['$scope', '$http',

  function ($scope, $http) {

      $http.get('./Home/GetData').success(function (data) {
          $scope.kurs = data;
      });

  }]);

Yukarıdaki kodlarda öncelikle "root scope" yani genel tanımlama amacıyla "currencyapp" modülü tanımlanmaktadır. Bu modülün altında "currencyListController" adında "$scope" ve "$http" servislerine bağımlı bir kontrolcü tanımlanmaktadır. Bu nesne aracılığıyla AJAX sorgusu gerçekleştirilmekte ve döviz verisi kapsam (scope) içine alınmaktadır. AJAX işlemi için "$http" servisinin "get()" fonksiyonu kullanılmaktadır.

AngularJs ile veri modeli oluşturduktan sonra son olarak bunu görüntü (View) ile ilişkilendirelim:

<div ng-app="currencyapp">
    <table ng-controller="currencyListController" class="table table-striped table-condensed">

        <thead>
            <tr>
                <th>Döviz Adı</th>
                <th>Döviz Kodu</th>
                <th>Alış</th>
                <th>Satış</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="kur in kurs">
                <td>{{kur.Isim}}</td>
                <td>{{kur.Kod}}</td>
                <td>{{kur.AlisKur}}</td>
                <td>{{kur.SatisKur}}</td>
            </tr>
    </table>
</div>

Burada "ng-app" niteliği ile ilgili DOM nesnesinin altında yer alan ögelerin "currencyapp" uygulamasına dahil olduğu belirtilmektedir. "Table" nesnesi "ng-controller" niteliği ile "currencyListController" kontrolcüsü ile ilişkilendirilmektedir. Bu kontrolcünün kapsamı dahilinde yer alan "kurs" listesinin içindeki "kur" JSON nesneleri kullanılarak tablo oluşturulmaktadır. "{{kur.Isim}}" tanımlaması ile kur nesnesinin "Isim" değeri ilgili tablo kısmına yazılmaktadır. "tr" etiketinde "ng-repeat" niteliği kullanılarak ilgili listedeki tüm nesneler için tablo satırlarının oluşturulması sağlanmaktadır. Yani listede yer alan her bir nesne için bir tablo satırı oluşturulmaktadır.

Uygulama sonunda aşağıda gösterilen tablo elde edilmektedir: