如何在我的项目中实现进度栏？

Question

I have been looking at so many examples regarding progress bars that I have confused myself.

In my project I have a an excel.png icon which when clicked runs a page that exports table data to excel.

As you can understand compiling and exporting the data can take some time about 30+ seconds. This is enough time for users to start clicking other items because there is no indication that anything is happening.

The solution is of course a progress indicator and there are so many examples that show how the progress indicator can be built. However, I cannot see how the indicator can be used in my project, my difficulty is where to put the code and what does it look like.

My page that exports the data to excel is called 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();


}

The part that calls the above page is in a page called 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>

I have a progress bar .css file called 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;

}

Then I get stuck, there are so many examples that I cannot make any sense of what the code should be and where it should be placed to get this to work. Your guidance is needed, thanks.

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

for complete gist:

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