TypeScript’de Web Api Servisi Çağırmak

Selamlar;

Son dönemlerde gittiğim seminerlerde TypeScript’in pek bilinmemesi üzerine, bu makalede TypeScript ve WebApi servislerinin birlikte kullanıldığı bir örnekle client side tarafta nasıl server side tarafındaki gibi kolay kod yazılabileceğini göstermek istedim.

Öncelikle aşağıdaki gibi yeni bir Empty Asp.Net WebProjesi yaratılıp Mvc ve WebApi seçilir:

Daha sonra nuget’den TypeScript içinde Jquery kullanabilmek için aşağıdaki paket indirilir: Indirilen paket .ts dosyasına aşağıdaki gibi include edilmelidir.

Öncelikle bir HomeController ve Index.cshtml yaratılır. Ve alttaki ilgili script dosyalar Index.cshtml sayfasına eklenir.

Parts: Product.ts dosyasında Parts adında bir class oluşturulur: Aşağıda görüldüğü gibi Constructer’ın’a ID, Name ve Category adında üç tane property değerini alıp set etmektedir.

Products: Parts classından türüyen Product adında bir class yaratılır. Class bir başka class’dan extends keyword’ü ile türetilir: Aşağıda görüldüğü gibi Constructer’ın da aldığı parametrelerin bir kısmını super() ile inherit aldığı Parts class’ına göndermektedir.

Aşağıda görüldüğü gibi Finans işlemleri için IProductFinance interface’i yaratılır. Generic <T> tipinde bir değişken beklemektedir. İlgili değişken element propery’sine atanmaktadır.

Ayrıca  GetTotalPayment() methodu bu interface içinde tanımlanmıştır.

Aşağıda görüldüğü gibi ProductResult class’ı IproductFinans interface’inden türetilmiştir. Bir class Interfaceden türetilirken implements keyword’ü kullanılır. ProductResult’da element adında HTMLElement ve ProductList adında Product array property’si bulunmaktadır. GeList() methodu ile ilgili productlar dönülerek ilgili element nesnesinin içine basılır. Burada element değişkeni generic bir tipte tanımlandığı için aslında hertürlü nesne bu değere atanabilmektedir. GetTotalPayment() ile ürünün fiyatı hesaplanır. Bunun için price product’ın ilgili enum CurrencyType para birimine göre kur değeri ve static TaxRate değeri ile çarpılır. Sonrada toFixed(2) methodu ile 2’ye yuvarlanır.

ProductResult:

TaxRate: Classında  GatRate() static methodu ile product’ın Price değerine göre static olarak tanımlanmış olan taxrate değerini döner.

CurrencyType: Enum olarak tanımlamış para birimine göre TL karşılığıdır.

Index.cshtml’de : Product bilgilerinin içine basılacağı content div’i aşağıdaki gibi tanımlanır.

windows.onload(): Sayfa ilk yüklendiğinde sayfada productların içine basılacağı div elementi (content) belirlenir. ProductResult class’ı yaratıldıktan sonra ilgili WebApi servisinden ajax ile productlar çekildikten sonra ProductList property’sine atanır. Daha sonra GetList() methodu çağrılarak ilgili ürünler ‘content’ divinin içine basılır.

ProductsController.cs: Product class’ı aşağıda görüldüğü gibi tanımlanmıştır. Static ProductData class’ında Dummy static products adında datalar yaratılmıştır. Ayrıca yine static GetData() methodu ile ilgili datalar dönülmektedir. Bu class’ın neden static olarak tanımlandığını yazının devamında tartışacağız. Daha sonra ProductsController adındaki WebApi servisinin Get methodu olan GetAllProducts() ile ilgili ürün datası static ProductsData’dan çekilir.

Şimdi gelelim ilgili ürünü ID’si ile arama işlemine. Öncelikle Index.cshtml’e aşağıdaki Ara buttonu ve TextBox’ı eklenir.

ProductsController WebApi services’inde ID’ye göre çeken GetProduct() methodu aşağıdaki gibi tanımlanır. Eğer arama içine değer girilmemiş ise ‘0’ değeri dönülür ve tüm data çekilir.

Product.ts altında aşağıdaki gibi Ara() function’ı yazılır. Ara button’una basılınca textbox’da ilgili değer check edilip WepApi servisine ajax ile ilgli ProductID ile get işleminde bulunulup dönen result ProductResult class’ının ProductList property’sine atanır. Daha sonra GetList() methodu çağrılıp dönen data ‘content’ divinin içine basılır.

Sıra geldi işleri biraz daha ilerletmeye ve yeni data eklemeye. Dikkat ederseniz ProductData aşağıda görüldüğü gibi static olarak tanımlanmıştır. Burada amaç tüm clientlar için aynı nesnenin dönmesidir. Yani ProductData herkes için aynıdır. Böylece yeni bir data eklendiğinde ayrıca cache’de veya session’da tutmaya gerek yoktur. WebApi servis için data ortak ise static yapılar  duruma göre gayet kullanışlı olabilir. Not: Statick yapıda değişken kullanmak sizi client bazında hatalı sonuçlara götürebilir. Burada yeni gelen data bu static List<Product>’a eklenmektedir.

Öncelikle Index.cshtml’e aşağıdaki kodlar eklenir. Yeni Kayıt Ekle button’una basılınca gizlenmiş olan ‘addDiv’ nesnesi gösterilerek eklenecek product özelliklerinin girilmesi sağlanır. Bu özellikler Name, Category, Price ve Currency değerleridir. Currency yani kurlar combobox olarak seçilir.

Yeni Kayıt Ekle Button’una basılınca çağrılan Add() function’ı aşağıdaki gibi ‘addDiv’ gizli ise gösterir, gözüküyor ise gizler.

Kaydet button’una basılınca aşağıdaki Product.ts’deki Save() function’ı çağrılır. ComboBox’dan seçilen kur tipine göre Switch-Case yapısı ile CurrencyType enumndaki değer ‘cur’ değişkenine atanır. Yeni bir Product class’ı yaratılır ve yeni girilen değerler bu class’ın constructer’ına gönderilir. Daha sonra ProductsController WepApi servisindeki InsertProduct() methoduna bu girilen yeni product Post edilir. Böylece ilgili product yukarıda bahsedilen static product listesine eklenir. Daha sonra servisden dönen data productResult sınıfının ProductList propertisine atanıp GetList() methodu çağrılarak tüm data ‘content’ divine basılır. Ve ilgili textboxlar temizlenip Ad özelliğine yeni bir data girmek için odaklanılır.

ProductController: Yukarıda bahsettiğim GetData() static methodu ile static product listesine eklenir. Sonra tüm data GetData() methodu ile çağrılıp geriye döndürülür.

Böylece yukarıdaki örnek görüldüğü gibi TypeScript kullanarak aynı server side tarafta kod yazar gibi Class ve Interface kullanımını, bunlardan nasıl Inheritance yapabileceğimizi, Constructer’da değer atamayı, Enum, Static ve Generic yapıları nasıl kullanabileceğimiz gördük. En önemlisi de ajax ile TypeScript’de WebApi bir servisden nasıl data çekip, post edebileceğimizi gördük.

Böylece  bir makalenin daha sonuna geldik yeni bir makalede görüşmek üzere hoşçakalın.

Source Code: http://www.borakasmer.com/projects/TypeScript.rar

Product.ts(Tümü):

ProductsController(Tümü):

Index.cshtml(Tümü):

HomeController(Tümü):