Rendering Partial Views using ajax

I've checked this question and it solved my i开发者_StackOverflownitial 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.

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);
          }
    });
});

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>

You can render it in the initial page by writing @Html.Partial(...).