ted*_*ski 1 c# asp.net ajax asynchronous progress-bar
我很难过.我试图在我的网站执行查询时显示进度条.查询需要4-6分钟.我的进度条从数据库中获取其值,Oracle有一个内置查询来为进度条提供值.我正在使用EssentialObjects的ProgressBar.基本上我只是将"Value"设置为1到100之间的整数.
这是我的代码的简化版本:
页:
<asp:UpdatePanel ID="upQuery" runat="server">
<ContentTemplate>
<asp:Button ID="btnExecute" runat="server" OnClick="btnExecute_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upProgress" runat="server">
<ContentTemplate>
<asp:Timer ID="tmr" runat="server" Enabled="false"
OnTick="tmr_Tick" Interval="3000"></asp:Timer>
<eo:ProgressBar ID="pbr" runat="server" ></eo:ProgressBar>
</ContentTemplate>
</asp:UpdatePanel>
码:
protected void btnExecute_Click(object sender, EventArgs e) {
tmr.Enabled = true;
ExecuteLongQuery();
}
protected void tmr_Tick(object sender, EventArgs e) {
pbr.Value = GetProgress();
}
基本上当我点击btnExecute时,计时器在回发完成之前不会启动,因此进度条永远不会显示.我尝试了一个回调,不确定我是否正确,但页面不会在回发期间显示结果.当页面处于异步回发状态时,如何让计时器(或任何内容)响应？
我发现了这个,它对我有用.您可以根据需要进行更改.它适用于每个页面回发,如果您想限制它,则根据您的要求更改代码.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.modalPopup
{
background-color: #696969;
filter: alpha(opacity=40);
opacity: 0.7;
xindex: -1;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="ScriptManager2" runat="server" />
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
//Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
prm.add_beginRequest(BeginRequestHandler);
// Raised after an asynchronous postback is finished and control has been returned to the browser.
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args)
{
//Shows the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null)
{
popup.show();
}
}
function EndRequestHandler(sender, args)
{
//Hide the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null)
{
popup.hide();
}
}
</script>
<div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="waiting.gif" AlternateText="Processing" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
<ajaxtoolkit:modalpopupextender id="modalPopup" runat="server" targetcontrolid="UpdateProgress" popupcontrolid="UpdateProgress" backgroundcssclass="modalPopup" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>