2010-12-22 60 views
1

我想在用戶提交表單時顯示進度條,因爲該過程需要時間可能需要8到10秒左右,所以我想顯示進度條,所以用戶必須有一個想法需要多少時間。這個過程將在一個控制器動作的簡單調用上執行,就像正常的回發沒有ajax涉及一樣。那麼,如何實現這一任務,我使用asp.net的MVC 2在Asp.Net MVC調用控制器的進度條2

+0

你怎麼知道它需要8到10秒?如果您確實知道如何以編程方式獲取這些值,那麼您可以使用簡單的ajax創建一個進度條。如果不知道自己在哪裏以及何時完成任務,那麼製作進度欄是不可能的。 – goenning 2010-12-22 13:14:54

回答

2

FRAZ,

雖然我注意到你說NO AJAX參與進來,以爲我會把我扔下這爲信息的目的。

只要你不關心顯示確切進度的'plase wait'指示器,那麼有一個簡單的方法可以用jQuery來做到這一點,我的答案依賴於此。

基本上,創建一個'等待'視圖,其中包含一個簡單的消息以及嵌入其中的動畫gif。然後只需通過以下基本輪廓火了您的插入(或長時間運行的動作):

$(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); 
     } 
    } 
} 

明顯,將有一個稍微複雜些錯誤conditons等,但是這是基本的「模板」。

希望這可以幫助