工作代码如下。
我建议您确保您的更新面板实际上正在刷新。使用我的代码，您可以对网页进行硬更新（例如 F5），您将看到更新的进度。最初，我刷新更新面板的代码没有触发。我使用查询触发更新面板中刷新链接按钮的单击，但我需要更改代码以调用 __doPostBack。
我要检查你的代码的另一件事是p_objFeedInfo.Progress是一个双且p_objFeedInfo.Total是一个双。您可能会遇到一个问题，其中一个是 int 并且来自 (p_objFeedInfo.Progress / p_objFeedInfo.Total) 小于 1 时会按整数方式转换为四舍五入到 0，然后再乘以 100。
除此之外，我将 width 属性组合到一个字符串中，并将 prgProdFeed.InnerText 设置为该字符串，这样我就不需要担心检查元素以查看宽度是否发生变化。我还设置宽度使用 Style("Width")：
Dim progressAttribute As String = progress & "%"
Me.prgProdFeed.Style("Width") = progressAttribute
Me.prgProdFeed.InnerText = progressAttribute
为了模拟长时间运行的线程，我创建了一个 feed 类，它需要Total作为构造函数。它根据自类创建以来经过的秒数返回双精度进度。
Public Class ProgressBar
Inherits System.Web.UI.Page
Public Class FeedInfo
Public ReadOnly Property Progress As Double
Get
Return Math.Min(Now.Subtract(Created).TotalSeconds, Total)
End Get
End Property
Public Total As Double
Public Created As DateTime
Public Sub New(Total)
Me.Total = Total
Created = Now
End Sub
End Class
Private Property info As FeedInfo
Get
If (Not Session("info") Is Nothing) Then
Return Session("info")
End If
Return Nothing
End Get
Set(value As FeedInfo)
Session("info") = value
End Set
End Property
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim progress As Integer = 0
If (Not info Is Nothing) Then
Dim tracker As FeedInfo = info
Dim trackerProgress As Double = tracker.Progress
Dim trackerTotal As Double = tracker.Total
progress = ((trackerProgress / trackerTotal) * 100)
End If
Dim progressAttribute As String = progress & "%"
Me.prgProdFeed.Style("Width") = progressAttribute
Me.prgProdFeed.InnerText = progressAttribute
End Sub
Private Sub runProc_Click(sender As Object, e As EventArgs) Handles runProc.Click
info = New FeedInfo(600)
End Sub
End Class
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ProgressBar.aspx.vb" Inherits="EFWCFVB.ProgressBar" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Long Running Task Progress Bar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var timerId = 0;
function trackProgress() {
if (timerId && timerId != 0)
return;
timerId = window.setInterval(refreshProgress, 2000);
}
function refreshProgress() {
if ($('.progress-bar').html() == "100%") {
window.clearInterval(timerId); return;
}
// $('#btnRefresh').click(); does not work
// var href = $('#btnRefresh').attr("href").split[0]; //"javascript:__doPostBack('btnRefresh','')"
__doPostBack('btnRefresh', '');
}
$(document).ready(function () {
trackProgress();
$('#runProc').click(function () { trackProgress();})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<h2>Long Running Task Progress Bar</h2>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="form-group">
<div class="col-md-8">
<label for="product-feed-progress">Progress</label>
<div class="progress">
<div class="progress-bar" role="progressbar" runat="server" id="prgProdFeed" style="min-width: 0em; width: 0%;">
0%
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<asp:Button ID="runProc" runat="server" Text="Run" />
<asp:LinkButton ID="btnRefresh" runat="server" Text="Refresh Panel">
</asp:LinkButton>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
