如何在应用程序繁忙时更新 UpdatePanel 中的文本
How to update text in UpdatePanel while app is busy
我有一个使用 C#、ASP.net 和 AJAX 开发的报价应用程序。
用户输入多个面板和每个面板的 I/O 个点，此应用计算出该输入的最佳控制器组合。问题是这可能需要一点时间，我希望能够在用户等待时向他们更新进度。
只要用户按下计算按钮，应用程序就会开始在下面的函数中计算出控制器的组合。
QuoteWizard 页面处理报价的步骤并包含 'MiscProducts' 控件的几个实例。在最后一步，调用了以下函数。
QuoteWizard.aspx.cs
protected void CalculateQuote(object sender, EventArgs e)
{
var quote = CurrentQuote;
quote = DataManager.SaveQuote(quote);
foreach (Panel p in quote.Panels)
{
quote = DataManager.RecalculatePanel(quote, p);
}
CurrentQuote = quote;
IntegrationProducts.ProgressBarModalPopupExtender.Hide();
Response.Redirect(ReviseQuoteUrl, false);
}
因此，当用户按下 'Calculate' 按钮时，会出现一个进度对话框。我使用带有 UpdatePanel 控件的 ModalPopupExtender 控件作为 'PopupControlID' 实现了这一点。
通过为提交按钮设置 'OnClientClick' 元素来显示进度对话框，以通过 javascript 函数显示进度对话框。
在这个面板中，我给用户一个估计时间，我希望能够向用户显示到目前为止已经过去的时间。我添加了一个间隔为 1 秒的计时器控件和一个更新每个刻度的标签。
MiscProducts.acsx
<ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
BackgroundCssClass="ModalBackground" BehaviorID="ProgressBarModalPopupExtender"
TargetControlID="hiddenField" PopupControlID="ProgressPanel" Enabled="True"
DropShadow="true"/>
<asp:UpdatePanel ID="ProgressPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="LoadingLabel" runat="server" Text=" Loading..." />
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" />
<br />
<br />
<asp:Label ID="ElapsedTimeText" runat="server" Text="Elapsed Time: 0 second(s)" />
</ContentTemplate>
代码隐藏中的 'Timer1_Tick' 函数如下所示：
static int counter = 0;
protected void Timer1_Tick(object sender, EventArgs e)
{
counter++;
ElapsedTimeText.Text = string.Format("Elapsed Time: {0} second(s)", counter);
}
但是，当应用程序忙于计算报价时，此 Timer1_Tick 函数不会被调用，因此文本标签根本不会更新。
我还想向用户展示每个面板的进度 - 例如 'Panel 1 of 10'...'Panel 2 of 10' 等。我尝试在上面的 'foreach' 循环中更新文本标签, 然后调用 'ProgressPanel.Update();' 但文本没有改变。
是否可以在应用程序计算每个面板的组合时更新 UpdatePanel 的文本？也许有一些我错过或没有看到的东西，所以希望你们能指出来。
如果您想使用 ASP 和 ajax 模型弹出来显示 Progress Bar，那么您可以采用这种方式。
触发处理事件的按钮
<asp:Button ID="btnLongTask" runat="server" Text="Long Task" OnClick="btnProcessLongTask_Click"/>
然后模型弹出扩展器显示弹出的进度条（我正在使用 Jquery UI 进度条来显示进度条而不是仅更改文本）
<div>
<div>
<asp:HyperLink ID="popUp" runat="server" NavigateUrl="#" Visible="true"></asp:HyperLink>
</div>
</div>
<ajaxToolkit:ModalPopupExtender ID="mdlPopUpAutoReview" runat="server" TargetControlID="popUp"
PopupControlID="panelTodisplay" BackgroundCssClass="modal_background" DropShadow="true">
<Animations>
<OnShown>
<ScriptAction Script="registerModalBackgroundClickEMail();" />
</OnShown>
</Animations>
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="panelTodisplay" runat="server" CssClass="modal_popup popup_size " Style="display: none;"
ScrollBars="None">
<asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server">
<ContentTemplate>
<div style="text-align: right;" class="">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/redX.png" AlternateText="Close"
CssClass="modal_close padding_top_right" OnClick="img_btnClose_Click" />
</div>
<div class="modal_heading model_heading_background">
Auto Review
</div>
<asp:Panel ID="Panel" runat="server" CssClass="modal_popup_content">
<div class="padding_top_bottom">
<b><asp:Label ID="popUpMessage" runat="server" Text="Long task in Progress ..."></asp:Label></b>
</div>
<div id="progressbar">
<div class="progress-label">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div class="progress-message">
</div>
<br />
<div class="modal_heading">
<asp:Button CssClass="popUpNo" ID="btnPopUpNo" runat="server" Text="Cancel" CausesValidation="false"
OnClientClick="popupCloseClick();" OnClick="btnPopUpNo_Click" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
现在是显示弹出窗口和处理点击进度的代码
protected void btnProcessLongTask_Click(object sender, EventArgs e)
{
mdlPopUpAutoReview.Show();
autoReviewThread = new Thread(new ThreadStart(LongRunningTask));
autoReviewThread.Start();
Session["IsStopAutoReview"] = false;
}
现在的方法是 运行 你的长期 运行 任务
private LongRunningTask()
{
autoReviewProgressValue = 0;
if (longrunningTasks.count > 0)
{
//This for each loop for looping through your task list which can be anything or single task which takes long then you can update the autoReviewProgressValue after each short process or using the timer.
foreach(Task task in longRunningTaskList)
{
if ((bool)Session["IsStopAutoReview"])
{
ControlVisibility(false);
autoReviewThread.Abort();
}
int valueToIncreament = int.Parse(Math.Round((double)(100 - autoReviewProgressValue) / (longrunningTasks.Count - longrunningTasks.IndexOf(task)), MidpointRounding.AwayFromZero).ToString());
//Your processing of the task
If( Processtask(task))
{
autoReviewProgressMessage = "Task " + longrunningTasks.IndexOf(task) + " processed sucessfull.";
}
else
autoReviewProgressMessage = "Task " + longrunningTasks.IndexOf(task)+ " failed to process.";
autoReviewProgressValue += valueToIncreament;
}
}
}
从 ajax 调用的 Web 方法以获取进程更新
[WebMethod]
public static string ProcessAutoReview()
{
return autoReviewProgressValue + "-" + autoReviewProgressMessage;
}
最后是继续 ajax 调用，它将能够继续循环并获取更新。
function updateProgress() {
$.ajax({
type: "POST",
url: "InvoiceVerification.aspx/ProcessAutoReview",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
var data = msg.d.split('-');
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label"),
progressTitle = $('#popUpMessage');
$("#progressbar").progressbar({
value: false,
change: function () {
progressLabel.text(progressbar.progressbar("value") + "%");
progressLabel.css("left", "50%");
$('.ui-progressbar-value').css("background", "#05d42b");
},
complete: function () {
progressLabel.text("Complete!");
progressTitle.text("Auto Review Completed.");
progressTitle.css("font-weight", "bold");
progressLabel.css("left", "42%");
$('.ui-progressbar-value').css("background", "#05d42b");
$('#btnPopUpNo').prop('value', 'Close');
}
});
if (oldValue != parseInt(data[0])) {
$('.progress-message').append('<p>' + data[1] + '</p>');
}
oldValue = parseInt(data[0]);
progressbar.progressbar("value", oldValue);
if (oldValue < 100) {
setTimeout(updateProgress, 10);
}
},
cache: false
});
}
在 document.ready({}) 中调用此 ajax 调用，或在 progresstaskButton 单击时调用。
如果您想在中间停止进程，请添加此事件
protected void btnPopUpNo_Click(object sender, EventArgs e)
{
mdlPopUpAutoReview.Hide();
Session["IsStopAutoReview"] = true;
}
需要根据您的需要进行更改。但这应该可以做到。如果有任何问题请评论。
我有一个使用 C#、ASP.net 和 AJAX 开发的报价应用程序。
用户输入多个面板和每个面板的 I/O 个点，此应用计算出该输入的最佳控制器组合。问题是这可能需要一点时间，我希望能够在用户等待时向他们更新进度。
只要用户按下计算按钮，应用程序就会开始在下面的函数中计算出控制器的组合。
QuoteWizard 页面处理报价的步骤并包含 'MiscProducts' 控件的几个实例。在最后一步，调用了以下函数。
QuoteWizard.aspx.cs
protected void CalculateQuote(object sender, EventArgs e)
{
var quote = CurrentQuote;
quote = DataManager.SaveQuote(quote);
foreach (Panel p in quote.Panels)
{
quote = DataManager.RecalculatePanel(quote, p);
}
CurrentQuote = quote;
IntegrationProducts.ProgressBarModalPopupExtender.Hide();
Response.Redirect(ReviseQuoteUrl, false);
}
因此，当用户按下 'Calculate' 按钮时，会出现一个进度对话框。我使用带有 UpdatePanel 控件的 ModalPopupExtender 控件作为 'PopupControlID' 实现了这一点。
通过为提交按钮设置 'OnClientClick' 元素来显示进度对话框，以通过 javascript 函数显示进度对话框。
在这个面板中，我给用户一个估计时间，我希望能够向用户显示到目前为止已经过去的时间。我添加了一个间隔为 1 秒的计时器控件和一个更新每个刻度的标签。
MiscProducts.acsx
<ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
BackgroundCssClass="ModalBackground" BehaviorID="ProgressBarModalPopupExtender"
TargetControlID="hiddenField" PopupControlID="ProgressPanel" Enabled="True"
DropShadow="true"/>
<asp:UpdatePanel ID="ProgressPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="LoadingLabel" runat="server" Text=" Loading..." />
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" />
<br />
<br />
<asp:Label ID="ElapsedTimeText" runat="server" Text="Elapsed Time: 0 second(s)" />
</ContentTemplate>
代码隐藏中的 'Timer1_Tick' 函数如下所示：
static int counter = 0;
protected void Timer1_Tick(object sender, EventArgs e)
{
counter++;
ElapsedTimeText.Text = string.Format("Elapsed Time: {0} second(s)", counter);
}
但是，当应用程序忙于计算报价时，此 Timer1_Tick 函数不会被调用，因此文本标签根本不会更新。
我还想向用户展示每个面板的进度 - 例如 'Panel 1 of 10'...'Panel 2 of 10' 等。我尝试在上面的 'foreach' 循环中更新文本标签, 然后调用 'ProgressPanel.Update();' 但文本没有改变。
是否可以在应用程序计算每个面板的组合时更新 UpdatePanel 的文本？也许有一些我错过或没有看到的东西，所以希望你们能指出来。
如果您想使用 ASP 和 ajax 模型弹出来显示 Progress Bar，那么您可以采用这种方式。
触发处理事件的按钮
<asp:Button ID="btnLongTask" runat="server" Text="Long Task" OnClick="btnProcessLongTask_Click"/>
然后模型弹出扩展器显示弹出的进度条（我正在使用 Jquery UI 进度条来显示进度条而不是仅更改文本）
<div>
<div>
<asp:HyperLink ID="popUp" runat="server" NavigateUrl="#" Visible="true"></asp:HyperLink>
</div>
</div>
<ajaxToolkit:ModalPopupExtender ID="mdlPopUpAutoReview" runat="server" TargetControlID="popUp"
PopupControlID="panelTodisplay" BackgroundCssClass="modal_background" DropShadow="true">
<Animations>
<OnShown>
<ScriptAction Script="registerModalBackgroundClickEMail();" />
</OnShown>
</Animations>
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="panelTodisplay" runat="server" CssClass="modal_popup popup_size " Style="display: none;"
ScrollBars="None">
<asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server">
<ContentTemplate>
<div style="text-align: right;" class="">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/redX.png" AlternateText="Close"
CssClass="modal_close padding_top_right" OnClick="img_btnClose_Click" />
</div>
<div class="modal_heading model_heading_background">
Auto Review
</div>
<asp:Panel ID="Panel" runat="server" CssClass="modal_popup_content">
<div class="padding_top_bottom">
<b><asp:Label ID="popUpMessage" runat="server" Text="Long task in Progress ..."></asp:Label></b>
</div>
<div id="progressbar">
<div class="progress-label">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div class="progress-message">
</div>
<br />
<div class="modal_heading">
<asp:Button CssClass="popUpNo" ID="btnPopUpNo" runat="server" Text="Cancel" CausesValidation="false"
OnClientClick="popupCloseClick();" OnClick="btnPopUpNo_Click" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
现在是显示弹出窗口和处理点击进度的代码
protected void btnProcessLongTask_Click(object sender, EventArgs e)
{
mdlPopUpAutoReview.Show();
autoReviewThread = new Thread(new ThreadStart(LongRunningTask));
autoReviewThread.Start();
Session["IsStopAutoReview"] = false;
}
现在的方法是 运行 你的长期 运行 任务
private LongRunningTask()
{
autoReviewProgressValue = 0;
if (longrunningTasks.count > 0)
{
//This for each loop for looping through your task list which can be anything or single task which takes long then you can update the autoReviewProgressValue after each short process or using the timer.
foreach(Task task in longRunningTaskList)
{
if ((bool)Session["IsStopAutoReview"])
{
ControlVisibility(false);
autoReviewThread.Abort();
}
int valueToIncreament = int.Parse(Math.Round((double)(100 - autoReviewProgressValue) / (longrunningTasks.Count - longrunningTasks.IndexOf(task)), MidpointRounding.AwayFromZero).ToString());
//Your processing of the task
If( Processtask(task))
{
autoReviewProgressMessage = "Task " + longrunningTasks.IndexOf(task) + " processed sucessfull.";
}
else
autoReviewProgressMessage = "Task " + longrunningTasks.IndexOf(task)+ " failed to process.";
autoReviewProgressValue += valueToIncreament;
}
}
}
从 ajax 调用的 Web 方法以获取进程更新
[WebMethod]
public static string ProcessAutoReview()
{
return autoReviewProgressValue + "-" + autoReviewProgressMessage;
}
最后是继续 ajax 调用，它将能够继续循环并获取更新。
function updateProgress() {
$.ajax({
type: "POST",
url: "InvoiceVerification.aspx/ProcessAutoReview",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
var data = msg.d.split('-');
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label"),
progressTitle = $('#popUpMessage');
$("#progressbar").progressbar({
value: false,
change: function () {
progressLabel.text(progressbar.progressbar("value") + "%");
progressLabel.css("left", "50%");
$('.ui-progressbar-value').css("background", "#05d42b");
},
complete: function () {
progressLabel.text("Complete!");
progressTitle.text("Auto Review Completed.");
progressTitle.css("font-weight", "bold");
progressLabel.css("left", "42%");
$('.ui-progressbar-value').css("background", "#05d42b");
$('#btnPopUpNo').prop('value', 'Close');
}
});
if (oldValue != parseInt(data[0])) {
$('.progress-message').append('<p>' + data[1] + '</p>');
}
oldValue = parseInt(data[0]);
progressbar.progressbar("value", oldValue);
if (oldValue < 100) {
setTimeout(updateProgress, 10);
}
},
cache: false
});
}
在 document.ready({}) 中调用此 ajax 调用，或在 progresstaskButton 单击时调用。
如果您想在中间停止进程，请添加此事件
protected void btnPopUpNo_Click(object sender, EventArgs e)
{
mdlPopUpAutoReview.Hide();
Session["IsStopAutoReview"] = true;
}
需要根据您的需要进行更改。但这应该可以做到。如果有任何问题请评论。