Rendering Partial Views using ajax
78,910
Solution 1
If you want to load the page and then load the partial view via ajax you could create an ActionMethod
that does something like:
public ActionResult Create()
{
var model = new MyModel();
if (Request.IsAjaxRequest())
{
return PartialView( "_Partial", model.PartialModel );
}
else
{
return View( model );
}
}
and then in your page do something like:
$(function(){
$(document).ajaxStart(function () {
//show a progress modal of your choosing
showProgressModal('loading');
});
$(document).ajaxStop(function () {
//hide it
hideProgressModal();
});
$.ajax({
url: '/controller/create',
dataType: 'html',
success: function(data) {
$('#myPartialContainer').html(data);
}
});
});
Solution 2
Controller
public ActionResult GetModule(string partialName){
return PartialView("~/Views/Shared/"+partialName);
}
on the Default Page (using jquery ajax operation)
<div id='mod1'>Loading...</div>
<script type="text/javascript">
$("#mod1").load("/ControllerName/GetModule?partialName=test1");
</script>
Solution 3
You can render it in the initial page by writing @Html.Partial(...)
.
Related videos on Youtube
Comments
-
programad almost 4 years
I've checked this question and it solved my initial problems. But I don't want the partial view to be rendered only when the user clicks a link, I want to render partial views when the page is loaded and, possibly, show a progress indicator while the partial view is being loaded.
How to achieve that?
Thank you very much for reading this.
-
Harambe Attack Helicopter almost 8 yearsDo I need to put the file format of the
Partial View
? Like .cshtml -
Shan over 7 yearsThink @Html.Parital can't be used in Ajax, jquery.
-
SLaks over 7 years@Shan: It's a server-side thing; it has nothing to do with that.
-
cnom almost 7 years@SLaks, seems like he needs the partial views to display after the main view is displayed (probably to avoid long time initial processing). As far as I know @Html.Partial() that you propose is processed on server along with the main view. So it does not solve the mans problem. I was also tricked by the question initially.