programad programad - 4 months ago 23
jQuery Question

Rendering Partial Views using ajax

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

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