主视图后加载局部视图

Question

I have several partial views that have been added to my main view on my MVC site. One of the partial views takes a long time to load however, as it can take a while to retrieve the data for it. Is it possible to load the main view and start loading the partial views, but if the view is still loading then display the rest in the meantime, with the final one showing once it has finished?

On a similar note, while a partial view is loading (or being refreshed) how can I get some kind of "Loading" screen to show over the view area so that the user knows that something is happening?

Thanks

Answer 1

Try the below codes

$.ajax(
          {
              url: '/Controller/Action',
              data: { Id: '1' }, //input parameters to action
              beforeSend: function () {
                  $('#div-result').show();
                  var img = '<img src="../../Images/loading.ico" />';
                  $('#div-result').html(img);
              },
              success: function (data) {

                  // $('#div-result') -> div in the main view

                  $('#div-result').html(data);
              }
          });

Answer 2

As Alexey says, simply add content element(s) where you need the partial views

<div id="partialViewHolder" style="display:none">Ajax content goes here after initial page loads, but it is hidden until then</div>

And then in your javascript, add something like (assuming you have already loaded jquery into the DOM):

<script type="text/javascript">
$(window).load(function () {
   $( "#partialViewHolder" ).load( "@Url.Content("Your PartialView Controller Method Goes Here")" );
   $( "#partialViewHolder" ).show();
}
</script>

Note that you need to use $(window).load() instead of $(document).ready() as a trigger to allow the page to render while the partial view is loading.

Answer 3

As I understand, you want to get partial view async. You can use Ajax to draw partial view, for example, by using jQuery ajax to get data from server and draw it, when ajax request is done. So your main view will be loading much faster.