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

我一直在看很多关于进度条的例子，所以我迷惑了自己。

在我的项目中，我有一个excel.png图标，单击时会运行一个导出表格数据到excel的页面。

正如你所能理解的，编译和导出数据可能需要一些时间，大约需要30多秒。 这是用户有足够的时间开始点击其他项目，因为没有任何迹象表明任何事情正在发生。

这个解决scheme当然是一个进度指标，有很多例子说明如何build立进度指标。 但是，我看不出指标如何在我的项目中使用，我的难处在于代码的位置以及它的样子。

我输出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> 

我有一个名为progressbarT2.css的进度条.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 + "%&nbsp;"); } 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