如何在应用繁忙时更新UpdatePanel中的文本

时间:2015-01-23 09:40:18

标签: c# asp.net ajax

我有一个使用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);
    }

因此,当用户按下'计算'按钮,出现进度对话框。我使用ModalPopupExtender控件和UpdatePanel控件作为' 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>

&#39; Timer1_Tick&#39;代码隐藏中的函数如下所示:

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函数,因此文本标签根本不会更新。

我还想向用户展示每个小组的进度 - 例如&#39;小组1 of 10&#39; ......&#39;小组2 of 10&#39;我尝试更新“foreach”中的文字标签。循环上面,然后调用&#39; ProgressPanel.Update();&#39;但文字没有改变。

在应用程序为每个面板计算组合时,是否可以更新UpdatePanel的文本?也许有些东西我错过了或者没有看到,所以希望你们可以指出它。

1 个答案:

答案 0 :(得分:1)

如果您想使用Progress Bar显示ASP并弹出ajax模型,那么就可以这样做了。

触发处理事件的按钮

 <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({})或点击progresstaskButton点击后调用此ajax电话。

如果要在中间停止此过程添加此事件

  protected void btnPopUpNo_Click(object sender, EventArgs e)
    {
        mdlPopUpAutoReview.Hide();
        Session["IsStopAutoReview"] = true;
    }

需要根据您的需要进行更改。但这应该做到。如有任何问题请评论。