I want to show progress bar when user submit the form because that process will take time may be around 8 to 10 seconds, so i want to show the progress bar so user must have an idea of how much time it will take. This process will be executed on simple call of a controller action like normal postback no ajax involve. So how can i achieve this task i am using asp.net mvc 2
-
And how do you know that it takes 8 to 10 seconds? If you do know how to get that values programatically, then you can make a progress bar with simple ajax. It's impossible to make a progress bar without know where you are and when you're going to finish the task.goenning– goenning2010-12-22 13:14:54 +00:00Commented Dec 22, 2010 at 13:14
Add a comment
|
1 Answer
Fraz,
Whilst i notice you say NO AJax INVOLVED, thought I'd chuck this in for info purposes.
As long as you don't care about the 'plase wait' indicator showing exact progress, then there's a simple way to do this with jquery and my answer here is dependent on that.
basically, create a 'Wait' view that contains a simple message along with an animated gif embedded within it. then just fire off your insert (or long running action) via the following basic outline:
$(document).ready(function() {
$('#btnSave').click(function() {
$.ajax({
type: "POST",
url: '<%=Url.Content("~/Booking/Save") %>',
data: { data: prepareData() }, // your data properties to be saved
beforeSend: beforeQuery(),
success: function(data) {
saveDataResponse(data);
},
error: function(xhr) { alert(xhr.statusText); }
});
});
});
// here we show the 'wait' view prior to processing starting
function beforeQuery() {
var url = '<%= Url.Action("Wait", "Booking") %>';
$("#mainDiv").load(url);
}
// when the long running process has completed (or error'd)
// either populate mainDiv with the details view of the booking
// or show the error appropriately
function saveDataResponse(data) {
if (data.length != 0) {
if (data.indexOf("ERROR:") >= 0) {
$("#mainDiv").html(data).css('backgroundColor','#eeaa00');
}
else {
$("#mainDiv").html(data);
}
}
}
obviously, there would be a little more involved for error conditons etc, but this is the basic 'template'.
hope this helps