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