Как реализовать индикатор выполнения в моем проекте?

Question

Я смотрел столько примеров, что я смутил себя.

В моем проекте у меня есть значок excel.png, который при нажатии запускает страницу, которая экспортирует данные таблицы в excel.

Как вы можете понять, сбор и экспорт данных может занять некоторое время около 30 секунд. Этого достаточно, чтобы пользователи могли нажимать на другие элементы, потому что нет никаких признаков того, что что-то происходит.

Решение является, конечно, индикатором прогресса, и существует так много примеров, которые показывают, как можно построить индикатор прогресса. Тем не менее, я не вижу, как этот индикатор можно использовать в моем проекте, моя трудность заключается в том, где поставить код и как он выглядит.

Моя страница, которая экспортирует данные, чтобы преуспеть называется 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; 
} 

ЯШИ:

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