Rendering Partial Views using ajax

Question

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.

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