ASP.NET MVC – Asenkron İçerik Yükleme

ASP.NET MVC – Loading Content Asynchronously yazısının Türkçe versiyonudur.
This post is written in Turkish. English version: ASP.NET MVC – Loading Content Asynchronously

Merhaba arkadaşlar. Bu yazıda sayfa yüklenmesini geciktiren içerikleri asenkron olarak nasıl yükleyebileceğimizi anlatmaya çalışacağım.

Büyük resimler veya yüksek miktardaki metinler sayfa yüklenmesinde bazı gecikmelere sebep açabilir. Asenkron yükleme tekniğiyle bu içeriklerin sayfanın yüklenmesini bloklamadan yüklenmesini sağlayabiliriz.

Neden?

Bu yazıyı yazmamdaki sebep kullanıcılarınıza nasıl daha iyi bir kullanıcı deneyimi sunabileceğiniz göstermektir. Kullanıcı deneyiminin yanı sıra, büyük miktardaki verileri asenkron olarak yüklemek sayfa hızınızı da önemli ölçüde etkileyecektir. Senkron yüklemelerde büyük miktardaki veriler sayfa yüklenmesinde bazı gecikmelere yol açabilir ve UX açısından sakıncalıdır.

Senaryo
Bu yazıda kullanılacak senaryoda birkaç resim yükleyen basit bir HTML sayfasını inceleyeceğiz.

Kullanılanlar:
-ASP.NET MVC
-Twitter Bootstrap (zorunlu değil)
-jQuery

Öncelikle birkaç görseli sayfada senkron olarak yükleyeceğiz ve daha sonra farkı görmek adına bunları asenkron olarak yükleyeceğiz. Asenkron yükleme işlemini Ajax çağrıları yaparak gerçekleştireceğiz. Görsellerin kaynaklarını (src) sayfa yüklendikten sonra atayarak sayfadaki gecikmelerin önüne geçmiş olacağız.

Senaryo sonda böyle gözükecek.

 

Senkron Yükleme

Önce daha kötü olan senaryoyu inceleyelim. Görselleri senkron yükleyeceğimiz ‘SyncPage’ sayfası için HomeController altında bir Action oluşturalım.

Bu metodda, Boğaziçi Köprüsü’ne ait 4 fotoğrafın linklerini ekleyip model olarak döndüreceğiz.

View kısmında ise bir paneli her bir fotoğraf için kolonlara bölüyoruz.

Bu görselleri yüklemenin olağan yolu. Henüz özel birşey yok. Lakin büyük boyuttaki görseller yüklerken senkron yükleme sayfada gecikmelere yol açacaktır. HTTP Request, resimler tam olarak kaynaktan alınana kadar sonuçlanmayacaktır.

Asenkron Yükleme

Bu bölüm güzel işler yapacağımız  kısım. HomeController’a yeni bir Aksiyon ekleyerek başlayacağız. Bu aksiyon, asenkron yükleme için kullanacağımız method olacaktır. AsyncPage ismindeki Action’umuzu oluşturalım.

 

 

AsyncPage ismindeki aksiyonu oluşturmadan önce bir şeye değinmek isterim. Daha önce görselleri Ajax istekleri ile yükleyeceğimizden bahsetmiştim.

O halde verilerimizi JSON formatta sunmalıyız. Bunun için sayfanın Action’undan farklı olarak, öncelikle JSON formatta görsellerin kaynaklarını döndüren bir method yazalım. Bu metodun ismi ise GetImageData() olsun.

GetImageData() metodu:

Bu metodda, görsel verilerini JSON formatta döndürdük.

Şimdi AsyncPage sayfamız için Action oluşturalım.

Lütfen dikkat edin, bir model döndürmedik.

Bir model döndürmedik çünkü bu senaryoda bir modele ihtiyacımız yok. Yukarıda bahsettiğim gibi, görselleri ‘/Home/GetImageData’ yoluna Ajax istekleri yaparak yükleyeceğiz.

Şimdi AsyncPage sayfamızın View’ını oluşturalım.

Bu sayfada da, bir satırı 4 kolona böldük. Farklı olarak, her bir görseli ‘Id’ etiketiyle etiketledik. Bu etiketlere JSON formatındaki veriyi manipüle edebilmek için ihtiyacımız olacak.

Bu sayfanın JS kısmında ise görselleri JSON formatta yükleyip, görsellerin kaynak özelliklerine (src) atama yapıyoruz.

‘/Home/GetImageData’ yoluna bir Ajax isteği yaptık ve her bir resmin kaynaklarını güncelledik. Dikkat edeceğiniz üzere her bir resmin ‘Id’ etiketini burada kullandık.

Böylece asenkron yüklemeyi tamamlamış olduk, böylece sayfadaki görsellerden kaynaklanan gecikmeyi engellemiş olacağız.

İki senaryo arasındaki farkı aşağıda görebilirsiniz.

Senkron yükleme:

 

Asenkron yükleme:

Senkron yüklemede, HTTP Request’i görseller kaynaktan yüklenene kadar sonuçlanmıyor. Bu da sayfanın yüklenmesinde gecikmeye yol açıyor.

Asenkron yüklemede ise, görselleri arkaplanda asenkron olarak yüklediğimiz için sayfadaki gecikmeleri engellemiş oluyoruz.

Kaynak koda Github‘dan erişebilirsiniz.

 

Fazlasını Oku