MVC 4 - Loading Message or Graphic

Question

Is it possible to display a loading message or graphic while processing a function?

I currently have a controller which carries out all the functionality before returning the view. However as part of the function includes a ServerXMLHTTP process, it can take upwards of 30 seconds while connecting to the 3rd party server. This is obviously not ideal for the user to which they observe a blank screen as the user waits for the xmlHttp.readyState to complete.

Any help would be much appreciated :-)

Answer 1

I found this solution to work perfectly for what I need, please see http://blog.michaelckennedy.net/2012/11/13/improve-perceived-performance-of-asp-net-mvc-websites-with-async-partialviews/ as this was most helpful.

Answer 2

This is an example of a javascript loading page that inserts itself between pages. This code is placed on the page before the loading. I used a simple submit button that submits my search query. You can get the ajax loading gif from here:

http://www.ajaxload.info/

<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=70);display:none">
    <p style="position: absolute; top: 30%; left: 45%; color: White;">
        Loading, please wait...<img src="../../Content/themes/base/images/ajax-loading.gif">
    </p>
</div>

<button type="submit" class="btn btn-success" onclick="JavascriptFunction()"value="filter" name="searchQuery">SUBMIT</button>

 <script type="text/javascript" language="javascript">
function JavascriptFunction() {
    var url = '@Url.Action("PostMethod", "Home")';
    $("#divLoading").show();
    $.post(url, null,
            function (data) {
                $("#PID")[0].innerHTML = data;
                $("#divLoading").hide();
            });
}
</script>

Basically when the user clicks the submit button, the loader appears until the next method/data/view is loaded.