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

ASP.NET MVC – Loading Content Asynchronously

Türkçe versiyon için: ASP.NET MVC : Asenkron İçerik Yükleme

In this post, I’m going to demonstrate how to load render-blocking data asynchronously in an ASP.NET MVC application.

The render-blocking content such as images or huge string data may cause some delays when the page is rendering. The asynchronous loading technique is a proper ray to load those content without blocking the rendering process.

Why?

The reason that I’m writing this post is showing you a way to provide your users a better UX. Apart from presenting your data fancy, asynchronous loading is very important topic at being successful at SEO stuff. Loading large content synchronously causes delay at page loading process and this is not going to be nice for your page’s UX, apart from your SEO score.

 

CASE
The case in this post I am going to use is a simple page loads a few images.

The staff used:
-ASP.NET MVC
-Twitter Bootstrap (not necessary)
-jQuery

We’re just going to display a few images by loading them synchronously first, and asynchronously just after it. We are going to manage asynchronous loading by using Ajax requests, and setting image’s source properties by using jQuery.

This is how our test case will look like at the end:

SYNCHRONOUS LOADING

I’m going to examine the worse case first. Let’s create an action called ‘SyncPage’ in the Home controller.

In this method, we’re just going to add 4 URL’s of Istanbul’s beautiful place Bosphorus Bridge‘s photos and return the array as the model.

Now, it’s time to add a View. In the view, I’m going to add a panel and split it into columns for each image.

This is ordinary way to load images. But when loading large images, this will cause a delay at rendering process. The HTTP request is can not be concluded until images are loaded. LOADING LARGE IMAGES SYNCHRONOUSLY IS A BAD IDEA.

ASYNCHRONOUS LOADING

Well, this is the section of the post we are going to perform good job. We are going to begin by adding another method to Home controller just like we did in the previous section. Let’s write a method called AsyncPage and create the view for the action. Keep scrolling down.

 

 

Wait, I have mentioned that we are going to load images by performing Ajax request. Then, let’s write a method for provide our image data in JSON. We will call it GetImageData. It’s a must when we perform Ajax requests, we have to provide data in JSON format in order to make them recognized by our Javascript code.

GetImageData() method:

In GetImageData() method, we return our image array in JSON format instead of returning a View.

Now it’s time to create AsyncPage method.

Here it is, nothing special. Surprised?

It’s nothing in this method because we don’t need a model for this case. Like I mentioned above, we are going to load images by performing Ajax requests to /Home/GetImageData path.

Let’s create the View for AsyncPage action.

In the section you see above, we split the row into 4 columns just we did before. But notice that I have given id values for each image in order to manipulate JSON data.  It’s another must in order to manipulate JSON data correctly.

Let’s have a look script section of this view.

Simple, we perform an Ajax request to path ‘/Home/GetImageData/’ and set our images’ source property. Notice that we used the id properties for each image. Therefore we get a correct place to get our images displayed correctly.

That’s all, our images will be loaded asynchronously and we will be able to avoid delays at the page loading process.

You can see the difference between two cases below. Keep your eyes on progress rings and notice the difference.

Synchronously loading case:

 

Asynchronously loading case:

In the synchronous loading case the HTTP request waits for images to get ready to display. It’s the reason of delay. But in asynchronous case, we avoid the delay in page rendering by loading images in the background by making Ajax calls and setting each image’s source property.

The entire source code is accessible at Github.

Fazlasını Oku