I have a Razor View that contains multiple controls , control is defined as template and template is partial view, now i have lot of controls on my view means partial views and it take too much time to load all controls on page , our requirement is to render
these partial view meanwhile User Interface should be responding in timely manner.
One of the possible solution is to render partial view async, that will increase performance at least responding of UI will work as it will not block your UI thread.
Another possible solution that i really feel better is using ajax or jquery to load partial view instead of rendring by server side code. It seems complicated but it is not.
Here is complete example how you can load the partialview by using Jquery:
You can't render a partial view using only jQuery. You can, however, call a method (action) that will render the partial view for you and add it to the page using jQuery/AJAX. In the below, we have a button click handler that loads the url for the
action from a data attribute on the button and fires off a GET request to replace the DIV contained in the partial view with the updated contents
$('.js-reload-details').on('click', function(evt) {
evt.preventDefault();
evt.stopPropagation();
var $detailDiv = $('#detailsDiv'),
url = $(this).data('url');
$.get(url, function(data) {
$detailDiv.replaceWith(data);
});
});
//where the user controller has an action named details that does:
public ActionResult Details( int id )
{
var model = ...get user from db using id...
return PartialView( "UserDetails", model );
}
//This is assuming that your partial view is a container with the id detailsDiv so that //you just replace the entire thing with the contents of the result of the call.
//Parent View Button
<button data-url='@Url.Action("details","user", new { id = Model.ID } )'
class="js-reload-details">Reload</button>
//User is controller name and details is action name in @Url.Action(). UserDetails //partial view
<div id="detailsDiv">
<!-- ...content... -->
</div>
Member
5 Points
3 Posts
Page performance issue
Jan 21, 2020 08:09 AM|Ch.Hashmat.Khan|LINK
I have a Razor View that contains multiple controls , control is defined as template and template is partial view, now i have lot of controls on my view means partial views and it take too much time to load all controls on page , our requirement is to render these partial view meanwhile User Interface should be responding in timely manner.
Any help is appreciated.
Contributor
2096 Points
1040 Posts
Re: Page performance issue
Jan 21, 2020 08:25 AM|Khuram.Shahzad|LINK
One of the possible solution is to render partial view async, that will increase performance at least responding of UI will work as it will not block your UI thread.
Another possible solution that i really feel better is using ajax or jquery to load partial view instead of rendring by server side code. It seems complicated but it is not.
Here is complete example how you can load the partialview by using Jquery:
https://www.c-sharpcorner.com/UploadFile/d551d3/how-to-load-partial-views-in-Asp-Net-mvc-using-jquery-ajax/
https://vikasaspnet.blogspot.com/2015/01/how-to-load-partial-view-client-side.html
Contributor
2096 Points
1040 Posts
Re: Page performance issue
Jan 21, 2020 08:27 AM|Khuram.Shahzad|LINK
You can't render a partial view using only jQuery. You can, however, call a method (action) that will render the partial view for you and add it to the page using jQuery/AJAX. In the below, we have a button click handler that loads the url for the action from a data attribute on the button and fires off a GET request to replace the DIV contained in the partial view with the updated contents
$('.js-reload-details').on('click', function(evt) { evt.preventDefault(); evt.stopPropagation(); var $detailDiv = $('#detailsDiv'), url = $(this).data('url'); $.get(url, function(data) { $detailDiv.replaceWith(data); }); }); //where the user controller has an action named details that does: public ActionResult Details( int id ) { var model = ...get user from db using id... return PartialView( "UserDetails", model ); } //This is assuming that your partial view is a container with the id detailsDiv so that //you just replace the entire thing with the contents of the result of the call. //Parent View Button <button data-url='@Url.Action("details","user", new { id = Model.ID } )' class="js-reload-details">Reload</button> //User is controller name and details is action name in @Url.Action(). UserDetails //partial view <div id="detailsDiv"> <!-- ...content... --> </div>