title: How to implement a progress bar in my project?
body: <p>I have been looking at so many examples regarding progress bars that I have confused myself.</p>
  
  <p>In my project I have a an excel.png icon which when clicked runs a page that exports table data to excel.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>My page that exports the data to excel is called GenSRPFLens.cshtml:</p>
  
  <pre><code> @{    
        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();
  
  
  }
  </code></pre>
  
  <p>The part that calls the above page is in a page called DiscountCustomers.cshtml:</p>
  
  <pre><code>&lt;img src="/images/ExcelIconGreen25x25.png" id="SRPLens" alt="Export SRP Lens" title="Export SRP F Data to Excel: Lens" /&gt;
  
  @section script{   
  &lt;script type="text/javascript"&gt;
          $(function () {
          $('#SRPLens').live('hover', function () {
              $(this).css('cursor', 'pointer');
          });
          $('#SRPLens').live('click', function ()  {
              $('&lt;iframe src=@linkSRPFLens&gt;&lt;/iframe&gt;').appendTo('body').hide();        
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I have a progress bar .css file called progressbarT2.css:</p>
  
  <pre><code>#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;
  </code></pre>
  
  <p>}</p>
  
  <p>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.</p>