How do I update a page during an asynchronous postback?
I'm stumped. I am attempting to show a progress bar while my site executes a query. The query takes anywhere from 4-6 minutes. My progress bar gets its value from the database, Oracle has a built-in query to provide the values to the progress bar. I'm using EssentialObjects' ProgressBar. Basically I just set "Value" to an integer between 1 and 100.
Here is a simplified version of my code:
Page:
<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>
Code:
protected void btnExecute_Click(object sender, EventArgs e) {
tmr.Enabled = true;
ExecuteLongQuery();
}
protected void tmr_Tick(object sender, EventArgs e) {
pbr.Value = GetProgress();
}
Basically when I click btnExecute, the timer doesn't start until the postback has completed, making the progress bar n开发者_StackOverflow中文版ever show. I tried a callback, not sure if I did it right, but the page wouldn't show the result during postback. How do I get the timer (or anything) to respond while the page is in async postback?
The fact that you've enabled the timer isn't passed to the client until the postback is completed. That's just how it works. Executing code on the server doesn't have an immediate effect on the client. If you're waiting for ExecuteLongQuery() to complete before sending the response to the client then you'll never see a timer.
Your best bet is probably to run ExecuteLongQuery() in a seperate thread on the server, allowing the postback to complete and the timer to start.
I would suggest reading up on the ASP.Net page lifecycle - this looks like a good place to start.
I found this and It works for me. You can change it according to your needs. It works for every page postback, and if you want to restrict it, then change in code for your requirements.
<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>
加载中,请稍侯......
精彩评论