使用 ASP.Net 在单击事件期间多次更新标签文本

Question

我有一个使用 VS2012 用 C# 编写的简单应用程序，位于 Web 表单应用程序中。

有一个按钮可以开始处理，我想通过在标签中放置一些文本来让用户更新处理进度。我想我可以将 Label 控件放在 UpdatePanel 中，然后在 Button 单击事件期间通过调用 UpdatePanel Update() 方法触发 Label 文本的更改。但是，标签文本的唯一更改是在单击事件完成并显示标签文本“处理完成”之后。

这是我的 xml：

这是后面的代码：

protected void btnCreateFiles_Click(object sender, EventArgs e)
    {
        //Do some stuff

        //Show the message that the application is processing
        lblCaption.Text = "Processing...updating label data";
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();      

        //Call to database to insert labels
        //Call to database to get the labels 

        lblCaption.Text = "Processing...creating label files.";
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();   

       //Create Text files from data

        lblCaption.Text = "Processing...updating label counts.";
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();   

        //Database call to insert count records
        //Create file of count records

        lblCaption.Text = "Processing...completed.";
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();   
    }

唯一显示的文本是上次更新...“处理中...已完成。”

为什么其他更新不会触发更改标签文本？

谢谢

更新要求

我稍微改变了我的要求。而不是多次更新。我在进度模板中添加了一个标签，以在处理开始时显示初始消息，然后在处理完成时使用 lblCaption 标签显示另一条消息。但是，当第二次单击该按钮时，会显示两条消息：“正在创建文件……请稍候……”和“正在处理……已完成”。

如何重置进度模板中的文本以仅显示“请稍候...”消息而不显示“处理中...完成”消息？

这是现在的 aspx 文件：

现在按钮事件处理程序方法如下所示：

protected void btnCreateFiles_Click(object sender, EventArgs e)
        {
            //All of the processing is done here...

            //This works correctly the first time a user click the button
            //But the second time, this text remains and the 'Please wait...' text from the lblProgress label
            // is added above this text.
            ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
            ProgressUpdatePanel.Update();   
            lblCaption.Text = "Processing...completed.";

        }

更新 我尝试了以下方法来清除标签 lblCaption 中的文本。我已通过代码执行此代码，因为标签文本未清除。
我尝试在 Page_Load() 方法中重置标签，如下所示：

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            txtBoxEnvironment.Text = CurrentEnvironment;
            DAL.setConnectionString(CurrentEnvironment);
        }
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();   
        lblCaption.Text = "";
    }

我已删除 ProgressUpatePanel 方法并尝试仅设置标签文本但未重置。

我错过了什么？

Answer 1

UpdatePanel 上的 Update 方法无法按您预期的方式工作。

来自 MSDN http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.update(v=vs.110).aspx： 如果您有必须执行以确定是否应更新 UpdatePanel 控件的服务器代码，请调用 Update 方法。

如果您想模拟一个进程，您可以通过调用隐藏按钮来触发多个部分回发。每个按钮都会执行另一个步骤，并通过 javascript 调用按钮单击以进行下一步。这可能容易出错并且效率低下。但这是一种方法来做你正在尝试的事情。 另一种方法是使用 JQuery 并（仍然进行多次调用）使用 $.ajax，在成功回调中调用下一步。

以您的代码为例，这是您想要的基本工作示例 - 我理解的方式：

标记

<asp:UpdatePanel ID="ProgressUpdatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button ID="btnCreateFiles" runat="server" Text="Go" OnClick="btnCreateFiles_Click" />
        <asp:Label ID="lblCaption" runat="server" Text="" />
    </ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">
    $(document).ready(function () {
        bindButton();
    });
    function bindButton() {
        $('#<%=btnCreateFiles.ClientID%>').on('click', function () {
            $('#<%=lblCaption.ClientID%>').html('Please Wait...');
    });
}
</script>

代码背后

    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) {
            //txtBoxEnvironment.Text = CurrentEnvironment;
            //DAL.setConnectionString(CurrentEnvironment);
        }
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();
        lblCaption.Text = "";

    }

    protected void btnCreateFiles_Click(object sender, EventArgs e) {
        //All of the processing is done here...

        //This works correctly the first time a user click the button
        //But the second time, this text remains and the 'Please wait...' text from the lblProgress label
        // is added above this text.
        ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
        ProgressUpdatePanel.Update();
        lblCaption.Text = "Processing...completed.";
        System.Threading.Thread.Sleep(1000);

        ScriptManager.RegisterClientScriptBlock(Page, typeof(string), "bindButton", "bindButton();", true);
    }

Answer 2

我认为如果不编写一些额外的代码，您将无法做自己想做的事情。 UpdatePanel 不会为 UI 提供多个更新。

这篇文章可能会帮助你到达那里：http://encosia.com/easy-incremental-status-updates-for-long-requests/

这篇文章有点老了，但仍然可能有用：http://msdn.microsoft.com/en-us/magazine/cc163393.aspx

Answer 3

我同意 Rick S 我们确实需要查看处理代码；您在此处拥有的代码不仅会处理得太快而无法查看其他消息。这将导致您看到的问题是唯一显示的消息是最后一条消息。