Bu aralar sirkette isler oldukça kesat. En azindan benim bulundugum departman itibariyle böyle bir durum söz konusu. Sanirim kurumsal kimlik kazanmis firmalarin genel sorunu da bu olsa gerek. Kaynak planlamasi ve dagitiminin bir türlü istenen sekilde yapilamayisi. Hal böyle olunca ayni firmada hatta ayni departman içerisinde, çok yogun çalisan insanlara ve beraberinde her hangi bir isi olmayanlara(benim gibi) rastlamak mümkün.

Böyle bir durumda keyif sürmek ve tembel tembel internette gezmek(Video paylasmak, onun bunun ciklemesine yetismeye çalismak vb) yapilabilecek en cazip islerden birisi gibi gözükse de, hizla ilerleyen teknoloji ne yazik ki buna müsade etmemekte. Neredeyse her hafta yeni konularin ele alindigi bilmem kaç katlik yottabyte’ lik bilgi denizinde sürekli bir seyler ögrenmek zorunda olan biz köle gelistiricilerin is olmasa da kendisine is yaratmasi sart. Egitim sart da diyebiliriz Öyleyse tembel tembel oturmayalim ve gelin birlikte yeni bir mevzuya dalalim.

Asp.Net Web API alt yapisinin popüler olmasinin ardinda yatan en büyük sebeplerden birisi, HTTP tabanli servis yayilimina izin vermesidir. Hemen her fonksiyonel birimin veya bütünlügün servis odakli teknolojiler ile ele alindigi ve istemcilere sunuldugu bir dünyada, bu ihtiyaci eskiden beri var olan HTTP protokolünün Post, Put, Get, Delete gibi standart metodlarina göre karsilamak elbette önemlidir. Bu sayede Microsoft tabanli olarak gelistirilen Web API servislerinin, dis dünyadaki herhangibir Client tarafindan tüketilmesi de oldukça kolaydir. Üstelik OData(Open Data Protocol) destegi sayesinde, veri odakli servislerin standart URL bazli parametreler ile sorgulanabilmesi mümkün hale gelmektedir.

Bir önceki cümlede belirttigimiz veri odakli servis(Data-Centric Service) aslinda bu yazimizdaki senaryomuzun da ana konularindandir. Veri odakli servisler tahmin edilecegi üzere büyük boyutlu verileri de ele alabilirler. Çok eskilerden de bildigimiz üzere Asp.Net ile web programlamanin ilk yillarinda yasanan en büyük sikintilardan birisi, verinin sayfalanarak getirilmesiydi. Stored Procedure’ ler de yapilan bazi hamleler ile bu isi çözebiliyor olsak da, SP destegi olmayan bir veri kaynaginin kullanilma olasiligini da göz ardi etmemek gerekiyor.

Hatirlayacaginiz gibi web tarafindaki ilk veri bagli kontrollerde sayfalama sistemi söyle çalismaktaydi:

Sorgulama sirasinda tüm veri çekilir ve içinden örnegin Xnci siradaki 10 luk eleman kümesi getirilirdi. Çok dogal olarak her seferinde tüm veri kümesinin çekilmesi çok da istenen bir yaklasim degildi. Örnegin 10 milyon satir içinden 3ncü 50lik kümeyi getirmek istedigimizde

Ancak ilerleyen sürümler de bu durum degisti ve özellikle SQL tarafinda row_number kullanimi ile dogru sayfalama islemlerinin yapilabilmesinin yolu açildi. Buna bir de LINQ tarafindaki anahtar kelime destegi eklenince, Entity Framework gibi alanlarda dogru sayfalama stratejilerini kullanabilir olduk.

Peki Asp.Net Web API tarafinda sayfalama islevselligi nasil karsilanabilir? Iste bu yazimizda cevap bulmaya çalisacagimiz soru bu. Şimdi basit bebek adimlari ile ilerleyerek senaryomuzu hayata geçirmeye çalisalim.

Asp.Net MVC Web API Proje için Ön Hazırlıklar

Ilk olarak Visual Studio 2012 ortaminda Empty MVC 4 sablonunda bir web uygulamasi açarak yola koyulabiliriz.

Söz konusu senaryomuzda istemci tarafinda yazacagimiz kodlar oldukça önemlidir. Bu yüzden jQuery ve Knockout.js’ in son sürümlerinin kullanilmasinda yarar vardir. Ayrica OData sorgularini kullanacagimiz için Microsoft ASP.NET Web API OData paketini de eklememiz gerekmektedir. Bu referanslari NuGet paket yönetim araci ile projeye kolayca dahil edebiliriz.

jQuery

knockout.js

ve Microsoft ASP.NET Web API OData

Bu eklentilerin yüklenmesi sonrasinda jQuery ve knockout.js için scripts klasörü asagidaki hale gelecektir.

Buradaki Javascript kütüphaneleri cshtml tarafinda kullanilacaktir.

Asp.Net MVC Web API Projesine Veri Modelinin Eklenmesi

Çok dogal olarak senaryomuzda veri odakli bir uygulama öngörülmektedir. Örnegimizde Entity Framework’ den yararlanilabilir. Bu nedenle Model klasörüne yeni bir Ado.Net Entity Data Model ögesi ekleyelim. Örnegimizde kobay veritabanlarimizdan birisi olan Chinook’ a baglaniyor olacagiz. Bu veritabanin yer alan Invoice tablosu 400 satirdan fazla veri içermekte ve senaryomuz için ideal bir veri kümesi sunmaktadir. Bu sebpeten sadece ilgili tabloyu kullansak yeterli olacaktir.

Asp.Net MVC Web API Projesine Controller Eklenmesi

Pek tabi veri modelinin olusturulmasinin ardindan bir de Controller’ in eklenmesi gerekmektedir. Model ile View arasindaki köprüyü kuracak olan Controller sinifinin temel özelliklerini asagidaki gibi belirleyebiliriz.

Sinif içerigi bizim için otomatik olarak üretilecektir. Ancak senaryomuz için gerekli olmayan detaylari çikartabiliriz. Buna göre içerigi asagidaki kod parçasinda görüldügü gibi degistirmemiz yeterli olacaktir.

using System.Web.Http;
using MvcApplication5.Models;

namespace MvcApplication5.Controllers
{
    public class InvoicesController : ApiController 
    {
        private ChinookEntities db = new ChinookEntities();

        // GET api/Invoices
        [Queryable] 
        public IQueryable<Invoice> GetInvoices() 
       { 
            return db.Invoices.AsQueryable(); 
        } 
       
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

ApiController türevli InvoicesController sinifi içerisinde yer alan GetInvoices metodu, Queryable tipi ile nitelendirilmistir. Bu nitelik(Attribute) sayesinde OData sorgu destegi saglanmis olmaktadir ki bu, sayfalama için kullanilacak olan top,skip ve orderby komutlari için gereklidir.

Asp.Net MVC Web API Projesine Görsel Taraf(Istemci) için Controller Eklenmesi

ApiController bilindigi üzere Web API servis destegi için gereklidir. Ancak istemci tarafini düsündügümüzde standart bir MVC Controller’ inin kullanilmasi gerekecektir. Nitekim cshtml içerigini kullanarak Web API servisi üzerinden OData anahtar kelimeleri ile sayfalama talebinin gönderilip, sonuçlarin gösterilecegi bir View ögesi gerekmektedir. Bunun için projeye yeni bir MVC 4 Controller ekleyerek ilerleyebiliriz.

Bu islem sonucunda asagidaki sinif içerigi üretilmis olacaktir.

using System.Web.Mvc;

namespace MvcApplication5.Controllers
{
    public class InvoiceListController
        : Controller 
    {
        //
        // GET: /InvoiceList/

        public ActionResult Index() 
        { 
            return View(); 
        } 
    }
}

Asp.Net MVC Web API Projesine View Ögesinin Eklenmesi (index.cshtml)

Tahmin edilecegi üzere bir de View ögesine ihtiyacimiz bulunmakta. Bu amaçla Views klasörü içerisinde InvoicesList isimli bir alt klasör açarak içerisine yeni bir View ilave edip devam edebiliriz. (View’ un adini index olarak belirleyip Razor Engine’ i kullanacak sekilde tesis edelim)

Içerigi ise asagidaki sekilde düzenleyelim.

@{
    ViewBag.Title = "Index";
}

<h2>Invoice List</h2>

<script src="~/Scripts/jquery-2.0.0.min.js"></script>
<script src="~/Scripts/knockout-2.2.1.js"></script>

<div>
    Gösterilmek istenen satir sayisi<br />
    <input type="text" id="txtRowSize" /> 
    <br />
    Baslangiç Noktasi<br />
    <input type="text" id="txtRowIndex" /> 
    <br />
  <input type="button" id="btnGetInvoices" value="Get Inovices" data-bind="click: InvoiceModel.GetInvoices"/> 
</div>

<table border="1">

<thead>
  <tr>
   <th>InvoiceId</th>
   <th>CustomerId</th>
   <th>InvoiceDate</th>
   <th>BillingAddress</th>
   <th>BillingCity</th>
   <th>BillingState</th>
   <th>BillingCountry</th>
   <th>BillingPostalCode</th>
   <th>Total</th>
  </tr>
</thead>

<tbody data-bind="template: { name: 'InvoiceDataModel', foreach: InvoiceModel.Invoices }">
</tbody> 
</table>
<script type="text/html" id="InvoiceDataModel"> 
<tr>
  <td>
   <span style="width:100px;"  data-bind="text: $data.InvoiceId" />
  </td>
  <td>
   <span style="width:100px;"  data-bind="text: $data.CustomerId" />
  </td>
  <td>
   <span style="width:100px;"  data-bind="text: $data.InvoiceDate" />
  </td>
  <td>
   <span style="width:100px;" data-bind="text: $data.BillingAddress"  />
  </td>
  <td>
   <span style="width:100px;"  data-bind="text: $data.BillingCity" />
  </td>
      <td>
   <span style="width:100px;"  data-bind="text: $data.BillingState" />
  </td>
    <td>
   <span style="width:100px;"  data-bind="text: $data.BillingCountry" />
  </td>
    <td>
   <span style="width:100px;"  data-bind="text: $data.BillingPostalCode" />
  </td>
    <td>
   <span style="width:100px;"  data-bind="text: $data.Total" />
  </td>
</tr>
</script>

<script type="text/javascript">

var InvoiceModel = { 
  Invoices:ko.observableArray([])
};

InvoiceModel.GetInvoices= function ()
{ 
    InvoiceModel.Invoices([]);

  var rowSize = $("#txtRowSize").val(); 
  var rowIndex = $("#txtRowIndex").val();

 
  var url = "/api/Invoices?$top=" + rowSize + '&$skip=' + (rowIndex * rowSize) + '&$orderby=InvoiceId'; 
 
  $.ajax({ 
   type: "GET", 
   url: url, 
   success: function (data) 
   {
    InvoiceModel.Invoices(data); 
   }, 
   error: function (err) 
   {
    alert(err.status + "," + err.statusCode); 
   } 
  });
};
ko.applyBindings(InvoiceModel);
</script>

Kisa da olsa neler yaptigimiza bir bakalim. En önemli kisim tabi ki btnGetInvoices isimli dügmeye basildiktan sonra çalisan kod içerigidir. Burada kilit nokra url degiskenine atanan ifadedir. Dikkat edilecegi üzere burada bir OData sorgusu olusturulmakta ve top ile skip komutlarindan yararlanilarak bir veri çekme islemi gerçeklestirilmektedir. Elde edilen sonuç kümesinin ilgili veri kontrolüne baglanmasi noktasinda ise bir Ajax çagrisi söz konusudur. success blogunda sorgu sonuçlarinin ilgili veri kontrolüne doldurulmasi islemi icra edilmektedir.

Asp.Net MVC Web API Projesinde Route Ayarlari

Testlere baslamadan önce InvoiceList görünümü için Route ayarlarini güncellememizde yarar vardir. Bunun için App_Start klasöründe yer alan RouteConfig.cs içerigini asagidaki gibi degistirelim.

using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication5
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "InvoiceList", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

Buna göre uygulamamizi çalistirdigimizda varsayilan olarak InoviceList ile iliskili View’ a gidilecektir.

Test

Ilk olarak Web API servisinin çalistigindan emin olmaliyiz. Bu amaçla URL satirina http://localhost:46672/api/Invoices benzer bir ifade girildiginde, asagidaki ekran görüntüsündekine benzer bir içerigin üretilmis olmasi gerekmektedir.

Eger asagiya dogru inerseniz tüm Invoice içeriginin çekildigini görebilirsiniz.

Ne var ki, Web API servisimiz için test noktasinda önem arz eden bir mevzuda top, skip ve orderby komutlarina cevap verebiliyor olmasidir. Örnegin http://localhost:46672/api/invoices?$top=3&$skip=10&$orderby=InvoiceId seklinde bir talep girdigimizi düsünelim. Aslinda bu talep ile servis tarafina su mesaji iletmis oluyoruz;

Önce Invoice satirlarini InvoiceId degerine göre bir diz bakalim. Sonra da10ncu indisten itibaren bana ilk 3 siradakini getir.

Talebin islenmesi sonrasi tarayici üzerinde asagidakine benzer bir sonuç elde etmemiz gerekmektedir.

Şimdi asil View içerigini test ederek asil senaryomuzu yürütebiliriz. Uygulamamizi varsayilan olarak çalistirdigimizda Route tanimlamasi nedeniyle dogrudan index.cshtml içerigini görüyor oluruz.

Şimdi bazi veriler girerek örnegimizi test edelim.

Dikkat edilecegi üzere 51 numarali InvoiceId degerinden itibaren 5 adet satir getirilmesi istenmis ve buna göre bir sonuç kümesi elde edilmistir. Tabi burada önemli olan bir diger nokta da fonksiyonun icra edilmesi sirasinda SQL tarafinda çalistirilan sorgu ifadesidir. Özellikle bu sorgu ifadesinde dogru bir sayfalama yapilmasi da çok önemlidir. Bu amaçla SQL Server Profiler aracindan yararlanabiliriz. Sonuç itibariyle asagidakine benzer bir T-SQL sorgusunun çalistirilmis oldugunu görürüz.

Dikkat edilecegi üzere row_number komutundan yararlanilarak gerçek anlamda sayfalama islemi uygulanmistir.

Sonuç

Görüldügü üzere OData sorgu destegi sunan Asp.Net Web API servislerini kullanarak sayfalama islemlerini gerçeklestirmek oldukça kolaydir. Bu is de basrol oyuncu olan top, skip ve orderby anahtar kelimeleri bir OData standardi oldugundan, istemci tarafi Microsoft disi bir platform da olabilir. Tabi burada tek baglayici nokta SQL veritabani ve Entity Framework kullanimidir. Farkli veri kaynaklarinda row_number gibi bir kullanim sekli söz konusu olmayabilir. Böyle bir vaka da tahmin edilecegi üzere Web API Controller içerisindeki ilgili operasyon noktalarinda müdahale de bulunmak gerekebilir(Arastirmadim benim yerime siz bu isi yapin ) Böylece geldik bir makalemizin daha sonuna. Tekrardan görüsünceye dek hepinize mutlu günler dilerim.