Problem with updateprogress control

Question

User351619809 posted

Hi All,

I have the following code on my web page:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/M.Master"
    CodeBehind="UploadPDFFile.aspx.vb" Inherits="SMS.UPDSMS.WEB.UploadPDFFile" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphMain" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>
    <div>
        Please select a .pdf file to upload
    </div>
    <div>
        &nbsp;</div>
    <div>
        <asp:FileUpload ID="FileUpload1" name="FileParsed" runat="server" />
    </div>
      <div>
        &nbsp;</div>
    <div>
        <asp:UpdatePanel runat="server" ID="Panel1" UpdateMode="Conditional">
            <ContentTemplate>
                <div>
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="Panel1">
                        <ProgressTemplate>
                            <div id="dvProgress" runat="server" style="; top: 300px; left: 550px;
                                text-align: center;">
                                <asp:Image ID="Image2" runat="server" Height="46px" Width="47px" ImageUrl="../../Images/Progress.gif" />
                            </div>
                            Please wait to retrieve data...
                        </ProgressTemplate>
                    </asp:UpdateProgress>
            
                    <asp:Button ID="btnUpload" Text="Upload" runat="server" Style="height: 26px" />&nbsp;
                    <asp:Button ID="btnViewData" Text="View Parsed Data" runat="server" />
                    &nbsp;
                    <asp:Button ID="btnDeletedata" Text="Delete Existing Uploaded Files" runat="server" />
                    &nbsp;
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div>
        &nbsp;</div>
    <div>
        Please select a Listing .xls file to upload
    </div>
    <div>
        &nbsp;</div>
    <div>
        <asp:FileUpload ID="FileUpload2" name="FileParsed" runat="server" />
    </div>
    <div>&nbsp;</div>
    <div>
      <asp:UpdatePanel runat="server" ID="Panel2">
            <ContentTemplate>
        <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="Panel2">
            <ProgressTemplate>
                <img src="../../Images/Progress.gif" alt="Animated gif file" />Please wait...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
    <div>
        &nbsp;</div>
    <div>
      
                <asp:Button ID="BtnExcelFile" Text="Upload" runat="server" Style="height: 26px" />&nbsp;
                <asp:Button ID="BtnListing" runat="server" Text="View Section Listing Data"
                    Style="height: 26px" />
     
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

I want to see the updateProgress control when I click on the btnUpload or btnViewData or btnDeletedData or any other button present on the web page but I don't see a updateProgress control at all.

any help will be appreciated.

 

 

 

Answer 1

User2103319870 posted

You dont have a click event handler attached your button controls. UpdateProgress will show only when  When a postback event originates from an UpdatePanel control, any associated UpdateProgress controls are displayed.. Also try setting the trigger for your updatepanel.

So your button should perform a postback for updateprogress to show.

Sample code:

 <asp:UpdatePanel runat="server" ID="Panel1" UpdateMode="Always">
            <ContentTemplate>
                <div>
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="Panel1">
                        <ProgressTemplate>
                            <div id="dvProgress" runat="server" style="; top: 300px; left: 550px;
                                text-align: center;">
                                <asp:Image ID="Image2" runat="server" Height="46px" Width="47px" ImageUrl="../../Images/Progress.gif" />
                            </div>
                            Please wait to retrieve data...
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    <asp:Button ID="btnUpload" Text="Upload" runat="server" Style="height: 26px" OnClick="btnUpload_Click" />&nbsp;
                    <asp:Button ID="btnViewData" Text="View Parsed Data" runat="server" />
                    &nbsp;
                    <asp:Button ID="btnDeletedata" Text="Delete Existing Uploaded Files" runat="server" />
                    &nbsp;
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnUpload" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

C#:

        protected void btnUpload_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
        }

 

Answer 2

User555306248 posted

Refer here to upload with progress bar

http://www.aspsnippets.com/Articles/Select-and-Upload-Multiple-Files-Gmail-Style-using-JQuery-and-ASP.Net.aspx

http://mattberseth.com/blog/2008/07/aspnet_file_upload_with_realti_1.html

http://www.codeproject.com/KB/aspnet/FlashUpload.aspx 

Answer 3

User61956409 posted

Hi anjaliagarwal,

Thanks for your post.

I want to see the updateProgress control when I click on the btnUpload or btnViewData or btnDeletedData or any other button present on the web page but I don't see a updateProgress control at all.

We use the UpdateProgress control to provide visual feedback about the status of the update, when a partial-page update is slow. According to your code and description, if your page update is very fast, you could specify a delay before the UpdateProgress control is displayed to prevent flashing.

Hope it will be helpful to you.

Best Regards,

Fei Han