在asp.net中使用JQuery ProgressBar显示进度（模拟）

来源：互联网发布：csbte武器数据修改编辑：程序博客网时间：2024/05/16 07:20

在处理较大量的数据时，往往需要使用一个进度条反应当前任务的执行状态。在这时我们使用JQuery的ProgressBar插件来模拟任务进度。

需要用到以下script和CSS,添加到<head>标签内

首先，我们了解一下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代码：

<asp:Button ID="btnGetData" runat="server" Text="Get Data" />

完成

信息来自:http://www.qytop.com/news/2010-5-26/2010526224146.html