开发者

Progress bar on calling controller in Asp.Net MVC 2

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 controll开发者_运维知识库er action like normal postback no ajax involve. So how can i achieve this task i am using asp.net mvc 2


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜