• Anasayfa
  • Hakkımızda
  • Etkinlikler
  • Destek Verin
  • Site Haritası
  • Giriş Yap
  • Üye Ol
  • Facebook
  • Twitter
  • RSS
Yazılım Dilleri
  • Soru - Cevap
  • EĞİTİM SETİ
  • KATEGORİ
  • DUYURU
  • TEKNOLOJİ HABERLERİ

Son Sorular

  • 23.04.2016 00:55:33C programlama 2 oyun
  • 20.04.2016 16:34:41Local Database
  • 15.04.2016 14:26:15Fatura kayıt işlemi
  • 21.03.2016 01:55:30C# problem

Popüler Sorular

  • 27.05.2012 05:49:50Asp.Net ile Date time alana veri ekleyemiiyorum ?
  • 2.04.2012 00:45:18.exe uzantılı dosya için dijital imza nerde nasıl alınır.
  • 12.05.2012 08:44:49Acil Yardım
  • 27.05.2012 13:46:51veri tabanı bağlantısı
  • .Net Framework
  • 8085 Assembly
  • Active Directory
  • ADO.NET
  • Android
  • Apple IOS
  • Arduino
  • ASP.NET
  • ASP.NET MVC
  • Blackberry
  • C#.Net
  • C++
  • CCG Framework
  • CISCO
  • CSS
  • Diğer
  • Dreamweaver
  • Entity Framework
  • Exchange Server
  • Gömülü Sistemler
  • GSM Programlama
  • Güncel
  • Güvenlik
  • HTML5
  • Java
  • Javascript / JQuery
  • Jira
  • Kariyer ve İş Yaşamı
  • LINQ
  • LibreOffice
  • Linux
  • Matlab
  • Microsoft Dynamics CRM
  • Mobil Uygulama Geliştirme
  • MySQL
  • NoSQL
  • Oracle
  • OWIN
  • PFSense
  • PHP
  • Powershell
  • Python
  • Sanallastirma
  • SAP-ABAP
  • SCOM 2012
  • SEO
  • Sharepoint 2010
  • Sharepoint 2013
  • Silverlight
  • Sistem Analiz ve Tasarımı
  • SQL Server
  • Symantec
  • TFS
  • T-SQL
  • Ubuntu
  • VB.NET
  • Veritabanı Yönetim Sistemleri
  • Visual Studio
  • VMware
  • WCF
  • Web Hosting
  • Windows 8
  • Windows Azure
  • Windows Phone 7.1
  • Windows Phone 8
  • Windows Server
  • Wordpress
  • WPF
  • Xamarin
  • XNA
  • Yazılım Mühendisliği
  • Yöneylem Araştırması
  • ASP.NET MVC
  • Entity Framework
  • Javascript / JQuery
  • LINQ
  • PHP

Son Duyurular

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

Asp.Net MVC Web API ile Sayfalama Nasıl Yapılır

Asp.Net Web API tarafında OData desteğini de arkamıza alıp top,skip ve orderby komutlarından yararlanarak sayfalama işlemlerinin nasıl yapılabileceğini incelemeye çalışıyoruz.

21.05.2013

Yazar: Burak Selim Şenyurt (Google+)

Kategori: ASP.NET MVC

5967

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 Smile Ö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 Confused smile

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 Winking smile ) Böylece geldik bir makalemizin daha sonuna. Tekrardan görüsünceye dek hepinize mutlu günler dilerim.

Yazar Hakkında

Burak Selim Şenyurt

Burak Selim Şenyurt

buraksenyurt.com

Yıldız Teknik Üniversitesi Matematik Mühendisliği mezunu olan Şenyurt, 1999 yılında profesyonel olarak adım attığı yazılım dünyasında, 2003 yılından beri Microsoft .Net teknolojileri ile ilgilenmektedir. Yazılım hayatına Assist Line isimli Call Center firmasında Delphi programcısı olarak başlayan Şenyurt sonrasında, sırasıyla Bizitek(Junior Developer), Netron(Master Trainer), Citibank(Outsource Senior Software Developer), Innova(Application Development Consultant), ve TCM(Software Architect) firmalarında görev almıştır. Su anda ING Bank bünyesinde Kıdemli Yazılım Danışmanı olarak görev yapmaktadir. 2006, 2007 yıllarında C#, 2008,2009,2010 yıllarında ise Connected System Developer kategorisinde Microsoft MVP seçilen Şenyurt, evli ve 1 çocuk babasıdır. C# diline olan düşkünlüğü, oğluna S(h)arp adının verilmesinde önemli bir etken olmustur.

Sosyal Medya

ORANLAR

  • 5967izleme

Arkadaşlarınla Paylaş

  • Tweet

0 Yorum

Yorum Yaz / Soru Sor

Lütfen yorum yazmak veya soru sormak için üye girişi yapınız.

Son Yorumlar

  • Hocam Link başka sayfaya yönlendiriyor.
  • merhaba benim merak ettiğim bir konu var y...
  • Merhaba download linki çalışmıyor. Rica et...
  • Nevzat Bey selamlar, Açıkçası bizler a...
  • Parametreleri Cache İşleminden Yalıtma kon...

En Güncel Sorular

  • Bilgilendirme maili (C#.Net)
  • Power Pivot (Sharepoint 2010)
  • BigInteger, BigDecimal (Asp.Net ve Asp.Net MVC)
  • visual C# ile asp nette veritabanı islemleri (Asp.Net ve Asp.Net MVC)
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ? (Sharepoint 2010)

En Son Cevap Verilen Sorular

  • Bilgilendirme maili
  • BigInteger, BigDecimal
  • visual C# ile asp nette veritabanı islemleri
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ?
  • txt dosyasına veri yazma

Twitter

Takip et: @yazilim_dilleri

En Çok Okunanlar

Elif BAYRAKDAR

C# ile SQL Server Bağlantısı, Insert, Update ve Delete Sorguları

23.05.2013

  • 120028
  • 0
Hakan Keskin

C# ile Windows Service Projesi Oluşturma, Debug Etme ve Setup Hazırlama

17.12.2013

  • 65106
  • 0
batuhan avlayan

Php - Mail Gönderme (İletişim Formu)

02.09.2013

  • 48275
  • 0

Sponsorlar

KODLAB
Pluralsight
Exchange server is
Office 365
YAZILIM DİLLERİ
Yukarı Çık
  • Hakkımızda
  • Facebook
  • Twitter
  • RSS

© Yazılım Dillerinin Buluşma Noktası | Kaynak belirtildiği sürece makaleler kopyalanabilir.
YazilimDilleri.Net sitesinde yer alan kullanıcıların oluşturduğu tüm içeriklerin yayınlanması ile ilgili yasal yükümlülükler içeriği oluşturan kullanıcıya aittir, YazilimDilleri.Net hiçbir şekilde sorumlu değildir.

Kapat

Giriş Yap

Kullanıcı Adı

Şifre

Şifremi Unuttum

KULLANICI GİRİŞİ