如何在我的項目中實現進度條？

Question

我一直在尋找很多關於進度條的例子，這些例子讓我很困惑。

在我的項目中，我有一個excel.png圖標，點擊時會運行一個將表格數據導出爲ex​​cel的頁面。

正如你可以理解的，編譯和導出數據可能需要一些時間約30+秒。這是用戶有足夠的時間開始點擊其他項目，因爲沒有任何跡象表明任何事情正在發生。

該解決方案當然是一個進度指示器，並且有很多示例顯示如何構建進度指示器。但是，我看不出指標如何在我的項目中使用，我的困難在於代碼的放置方式以及它的外觀。

我的頁面數據導出爲Excel是叫GenSRPFLens.cshtml：

@{  
     Layout = null;  

     var appData = Server.MapPath("~/App_Data");  
     var originalFileName = "orgSRPLens.xls";  
     var newFileName = string.Format("{0}.xls", Guid.NewGuid().ToString());  
     var originalFile = Path.Combine(appData, originalFileName);  
     var newFile = Path.Combine(appData, newFileName);  
     File.Copy(originalFile, newFile); 

     var lenscat =Database.Open("A-LensCatFE-01SQL"); 
     var CustomerCode = !UrlData[0].IsEmpty()?UrlData[0]:"1"; 

     var sql = "Select * from dbo.qryDiscountLensPrice WHERE CustomerCode=@0 Order by LensForm, LensCode"; 
     var srplensdata = lenscat.Query(sql, CustomerCode); 

     var connString = string.Format(@"Provider=Microsoft.Jet.OleDb.4.0; Data Source={0}/{1};Extended Properties='Excel 8.0;HDR=Yes;'", appData, newFileName);  
     var provider = "System.Data.OleDb";  
     using (var SRPLens = Database.OpenConnectionString(connString, provider)){ 
      sql = @"INSERT INTO [Sheet1$] (CustomerCode, LensCode, LensForm, ShortName, Description, [Index], Discount, LensMultFactor, DispensingFee, VAT, VATRate, SRPBasedOn, iScription, Cost, DiscountPrice, NoVATprice, AddVAT, SRP)   
       VALUES (@0,@1,@2,@3,@4,@5,@6,@7,@8,@9,@10,@11,@12,@13,@14,@15,@16,@17)"; 

    foreach(var LensCode in srplensdata){    
     SRPLens.Execute(sql, 
     LensCode.CustomerCode,     
     LensCode.LensCode,     
     LensCode.LensForm,     
     LensCode.ShortName,     
     LensCode.Description,     
     LensCode.Index, 
     LensCode.Discount, 
     LensCode.LensMultFactor, 
     LensCode.DispensingFee, 
     LensCode.VAT, 
     LensCode.VATRate, 
     LensCode.SRPBasedOn,  
     LensCode.iScription,   
     LensCode.Cost,     
     LensCode.DiscountPrice, 
     LensCode.NoVATPrice, 
     LensCode.AddVAT, 
     LensCode.SRP);   
     }  
     }  
     Response.AddHeader("Content-disposition", "attachment; filename=SRPFLens.xls");  
     Response.ContentType = "application/octet-stream";  
     Response.TransmitFile(newFile);  
     Response.Flush();  
     File.Delete(newFile);  
     Response.End(); 


} 

調用上面的頁面是在名爲DiscountCustomers.cshtml頁面的部分：

<img src="/images/ExcelIconGreen25x25.png" id="SRPLens" alt="Export SRP Lens" title="Export SRP F Data to Excel: Lens" /> 

@section script{ 
<script type="text/javascript"> 
     $(function() { 
     $('#SRPLens').live('hover', function() { 
      $(this).css('cursor', 'pointer'); 
     }); 
     $('#SRPLens').live('click', function() { 
      $('<iframe src=@linkSRPFLens></iframe>').appendTo('body').hide();   
     }); 
    }); 
</script> 

我有進度條.css文件名爲progressbarT2.css：

#progressBar { 
     width: 150px; 
     height: 8px; 
     border: 1px solid #111; 
     background-color: #fff; 
     float: left; margin-top: 10px; margin-left: 20px; 
     visibility: visible; 

} 
#progressBar div { 
     height: 100%; 
     color: #fff; 
     text-align: right; 
     line-height: 7px; /* same as #progressBar height if we want text middle aligned */ 
     width: 0; 
     background-color: #b200ff; 

}

然後我被卡住了，有太多的例子，我無法弄清楚代碼應該是什麼，應該放置在什麼位置才能使它工作。你需要指導，謝謝。

Answer 1

<div id="progressBar"> <div> 

CSS：

#progressBar { 
    width: 400px; 
    height: 22px; 
    border: 1px solid #111; 
    background-color: #292929; 
} 



#progressBar div { 
     height: 100%; 
     color: #fff; 
     text-align: right; 
     line-height: 22px; /* same as #progressBar height if we want text middle aligned */ 
     width: 0; 
     background-color: #0099ff; 
} 

JS：

function progress(percent, $el) { 
      var progressBarWidth = percent * $el.width()/100; 
      $el.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% "); 
     } 

    var globalP = 0; 

     var startProgressBar = function(){ 
      if(globalP < 100){ 
       globalP = globalP + 1; 
       progress(globalP, $('#progressBar')); 
       setTimeout(startProgressBar, 500); 
      } 
      else { 
       //done 
      } 
     } 

     $(document).ready(function(){ 
      startProgressBar(); 
     }) 

完全要點：

https://gist.github.com/railscash/5804857