Best Way To Bind Partial Views For Improving Performance

There are several ways to bind partial views and display them on views. But what is the best way? When I was working on one of my projects, I was concerned about which techniques I would need to use to make my website faster, and also if we are binding multiple partial views on the same page, which are getting the data from the database. So, those things are very complicated and in this scenario we need to choose the way which will load every partial view independently.

So, today I will discuss that. Whenever we talk about the partial view data to bind with it, we find several ways to bind the partial view. The following are a few examples.

We can bind some static data with partial view as following

@Html.Partial("SideBar")

We can also direct bind the partial view with Model.

@Html.Partial("RecentPost", Model.RecentPostl)

Partial view can be bind with ViewBag as well.

@Html.Partial("_MyPartial", (double)@ViewBag.piValue)

Now I am going to show different ways to bind the partial views.

First Way [Bad Way, Don’t Use]

I have seen many developers bind all the partial views on a single request. Actually they try to get all the partial views data as entity on action result and return view with model data. As inthe following example, you can see that I need Recent Post and Popular Post.

But on the controller, I have used only one Action Result for getting the data for both partial views.
You can see clearly i the following code that on the single view I am passing the multiple partial view which data is coming from a single request.
Here you can pass some other view data,
So, as per concern of performance, this is a bad way to bind the partial view.

Second Way [So-So Good]

We can also return the partial view fromthe action result. So, basically in this scenario we return a partial view as a div.
So, we can see that with above syntax that PartialViewResult is returning a partial view from controller. This will be good if you are binding only single partial view. But if you have multiple partial views for single view then it will not good way to bind.

Third Way [Best Way, Always Use]

As per my knowledge the best way is to bind multiple partial views on one view to use ajax call and render all the partial view separately. Every partial view will make their own request for getting the data from database and bind with partial view.

If we process the separate request for the individual partial view then it will not affect the performance of the site. It is because this will not affect loading the page. The page will be load and partial view will be trying to get the data asynchronously.

On the following example, I am going to show how to create multiple partial view and make separate request for getting the data from database. Basically I am getting Recent Post and Popular Post on the view,

View with Partial Views
My Controller
Jquery [Ajax Call]
When you run the website, you can see clearly in the following image that the website has been loaded but the content is still loading so, herethe website is not waiting for loading all the content of the site.



The part which is going to load, you can show the loading content message, if the request will get the response from the server than the data will be bound with partial view. So, using this you can make your asp.net mvc website faster. When your site will load properly then it will look like the following image with whole data.