Question

I have 2 different type of user

When I log in, I am submitting my page to account/logon

Depending up of the type of user I am redirecting to (using RedirectToAction) to

Teacher/index
Or
Student/index.

The action Student/index is a simple one and returns its view immediately.

But the action Teacher/index is having immense data access and the view will be returned only after one minute. (I will optimize the data access don’t worry abbot it because it not a part of this post)

During the one minute I want to show “loading” message in browser.

How can I do this?

I have Jquery and MVC2

Answer 1

One possibility is to split this action into two: one that will render a simple view and one which will do the heavylifting and render a partial. So when a teacher logs in you would redirect to the first action and render a simple HTML view containing a spinner. Then you would trigger an AJAX call to the second action to do the data access, inject the partial into the DOM and hide the progress.

So you could put something like this into the view:

<img id="progress" src="progress.gif" alt="" />
<div id="result" data-url="<%= Url.Action("TeacherData") %>"></div>

and then in a separate js file trigger the AJAX call:

$(function() {
    $.ajax({
        url: $('#result').data('url'),
        type: 'POST',
        complete: function() {
            $('#progress').hide();
        },
        success: function(result) {
            $('#result').html(result);
        }
        error: function() {
            alert('oops');
        }
    });
});

and on your controller:

public ActionResult Teacher()
{
    return View();
}

[HttpPost]
public ActionResult TeacherData()
{
    var model = ... do the heavy data access
    return PartialView(model);
}