In this series, I will cover some techniques that are easy to implement that will improve the performance of a web site. In this post, I will talk about asynchronous partial views.
A couple of weeks ago, I launched my personal website hendrikbulens.com. It is a MVC5 application that is hosted on an Azure website with a SQL Azure database for the data storage. Now that my website is up and running with real-live data, I am experiencing performance issues in different pages of the application. To tackle this problem, there are a few enhancements that a developer can make.
The most basic approach in generating the UI in MVC is to pass a model to the view through the controller, after which the view engine will generate the entire HTML. After the page is loaded, no additional HTML – generating actions are executed. This causes the risk to slow down the page loading, because a page will not load until the code in the controller’s actions are completed. If there is a lot of processing going on there (e.g. data retrieval from the database), it could take a while until the page is entirely loaded. A simple solution can circumvate this problem: if there are heavy duty operations required, put all relevant HTML code in a partial view, which will be rendered at runtime through some javascript code. An example on my website is visible on the home screen: the slides are rendered asynchronously. This is the code in the view:
 Loading...
The class of the div: partialContents is important here: the Javascript code will take all divs with this class and it will do an AJAX call to the URL that is defined in the data-url tag. The URL here is a controller action, which renders a PartialViewResult:
Instead of passing this data set to the parent view, we narrow down the scope of the data to this partial view only. Now we need only one snippet of Javascript code to make this all work. In the master page, add this code right before the tag:
This code will look for every div in the page with class ‘partialContents’ and it will call the URL that is defined in the data-url tag. The result of this call will be HTML which will replace the content in that div. If you want to have more detailed information about this topic, please refer to this article.
