CODEWITHSUNDEEP
c#jqueryhtmlcssasp.net-mvc
Pablo Tobar
Pablo Tobar

Reputation: 634

show a wait image while waiting the MVC view to display

I do have a MVC5 C# View (razor as view engine) that sends and retrieves information from a database, it doesn't use jQuery, AJAX or JSOn to make the async calls so it refresh/reload the view every time it sends info to the database.

I want to show an image (sending image) to the user in order to let the user know that the page(MVC View) is working and that has wait, I do have jQuery code in the page and has tried this:

<script language="JavaScript" type="text/javascript">
    $(window).load(function () {
        $('#cargando').hide();
    });
</script>

<style type="text/css">
    #cargando {
        width: 350px;
        height: 70px;
        clear: both;
        background-color: #FFFF00;
        color: #CC0000;
    }
</style>

and has this div

<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>

but doesn´t work, could you please tell me how to show the image before the view renders again from the actio' controller?

this is my view

<div class="section">
    <div class="container">
        <div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
        <div id="loading">
        <br />
        <div class="jumbotron">
           <div class="container">
                <img src="~/Imagenes/logo%logo.png" class="img-responsive" />
                <div class="row well">
                    <div>
                        <img src="~/Imagenes/Portada.jpg" style=" height:40%; width:100%" />  <p style="margin-left: 10px">
                        @*<img src="~/Imagenes/Edificio.jpg" style="height:3%; width:100%" />*@
                        <h4>BIENVENIDO ...</h4>
                        <p>xxx permite ... </p>
                    </div>
                </div>
             </div>
        </div>

Upvotes: 0

Views: 5376

Answers (2)

Herlander Pinto
Herlander Pinto

Reputation: 78

If you want to display a "loading overlay" because your server round trip takes a while, you can do this with javascript. The new page load will re-hide the loading screen.

Place the "overlay div" outside of your main content, at the end of the page just before the </body> closing tag:

<div id="overlay" class="overlay">
  <div class="loader"></div>
  <!-- Alternatively you can have some text here -->
</div>

Your button would look like this:

<button id="mvc-action-button">
  Some Action
</button>

Some CSS for the overlay:

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

.overlay {
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.8);
  position: absolute;
  z-index: 100;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

Use the following JS to display the loading screen:

document.getElementById('mvc-action-button')
    .addEventListener('click', function(e) {
    document.getElementById('overlay').style.display = 'flex';
});

See it all together in this jsfiddle.

Note that I've used flexbox to center the content on the overlay page, this may not work on all browsers (though modern browsers should be fine).

Caveats: If your subsequent page load hangs or fails for whatever reason, the user will be stuck on the loading screen or a white screen and will have to refresh the page.

Upvotes: 0

Farooq Hanif
Farooq Hanif

Reputation: 1899

It wont be possible without ajax because when you make a postback to your server it sends back a new HTML page and the browser processes that from scratch. To show the user a loading image in between different pages or in between different postbacks of same page, you will have to use ajax request or you can use iframes which will complicate things more than ajax and are not preferred in such situations.

Following jQuery methods will be helpful: $.load $.ajax $.get

Upvotes: 1

Related Questions