Question

当用户点击“创建文件”按钮时，我有一个UpdatePanel，显示文本“请等待文件创建...”。处理完成后，文本将更新以显示“处理已完成”。这工作正常。

我想要做的是在文本左侧添加一个处理图像，以向用户显示该应用程序正在运行。我添加了图片。当我将'Visible'属性设置为true时，它显示为旋转圆圈。我想要做的是仅在文本“请等待创建文件时...”时显示图像。

所以最初，我将图像设置为，Visible-“false”。我以为我可以在javascript中添加一行代码来显示文本，'Please wait ..'但它没有显示。以下是我的代码：

JavaScript的：

script type="text/javascript">
$(document).ready(function () {
    bindButton();
});
function bindButton() {
    $('#<%=btnCreateFiles.ClientID%>').on('click', function () {
        $('#<%=lblCaption.ClientID%>').html('Please wait while the label files are being created...');
    //I thought I could just add this line and the image would at least display.
    //But it does not display.  I have also tried setting it to 'visible' and that
    //doesn't work either.   
    // document.getElementById("<%=imgProcessing.ClientID%>").style.display='inline-block';
    });
}
</script>

HTML：

    <asp:UpdatePanel ID="ProgressUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate> 
 <asp:Image ID="imgProcessing" runat="server" CssClass="floatleft" ImageUrl="~/Images/updateProgress.gif" Visible="false" />
  <asp:Label ID="lblCaption" runat="server" CssClass="label" ForeColor="Red" Visible="true"></asp:Label>            
  <asp:Button ID="btnCreateFiles" runat="server" Text="Create Labels Files" Width="206px" CssClass="label" Height="37px" OnClick="btnCreateFiles_Click" style="float: right"/>                               
</ContentTemplate>
</asp:UpdatePanel>

这是Click事件中的Code Behind：

 protected void btnCreateFiles_Click(object sender, EventArgs e)
    {
        string tstrIssueMonth = string.Empty;
        string tstrFolderPath = string.Empty;

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

//do processing here
            ProgressUpdatePanel.ContentTemplateContainer.Controls.Add(lblCaption);
            ProgressUpdatePanel.Update();
            lblCaption.ForeColor = Color.Green;
            lblCaption.Text = "Processing completed...files have been created.";
        }
}

因此，我需要能够在显示文本“请稍候......”时显示处理图像，并且当显示“处理完成...”文本时，图像不可见。我该怎么做？

谢谢，

在UpdatePanel控件中将处理图像添加到文本

0 个答案: