在asp.net中使用JQuery ProgressBar显示进度（模拟）
在处理较大量的数据时，往往需要使用一个进度条反应当前任务的执行状态。在这时我们使用JQuery的ProgressBar插件来模拟任务进度。
需要用到以下script和CSS,添加到<head>标签内
<link type="text/css" href="CSS/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="Scripts/ui.core.js"></script>
<script type="text/javascript" src="Scripts/ui.progressbar.js"></script>
首先，我们了解一下ProgressBar的参数：
设置进度条的初始值为0；
$("#progressbar").progressbar({ value: 0 });
处理进度的Javscript代码：
$("#btnGetData").click(function() {
var intervalID = setInterval(updateProgress, 250);
$.ajax({
type: "POST",
url: "Default.aspx/GetText",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function(msg) {
$("#progressbar").progressbar("value", 100);
$("#result").text(msg.d);
clearInterval(intervalID);
}
});
return false;
});
function updateProgress() {
var value = $("#progressbar").progressbar("option", "value");
if (value < 100) {
$("#progressbar").progressbar("value", value + 1);
}
}
在服务器端的C#代码中添加一个GetText的静态方法，必须使用WebMethod属性修饰符来声明此方法,代码如下：
[System.Web.Services.WebMethod]
public static string GetText()
{
for (int i = 0; i < 10; i ++)
{
Thread.Sleep(1000);
}
return "All finished!";
}
在页面上添加以下html代码：
<div id="progressbar"></div>
<div id="result"></div><br />
<asp:Button ID="btnGetData" runat="server" Text="Get Data" />
完成
信息来自:http://www.qytop.com/news/2010-5-26/2010526224146.html