Powered by Blogger.

Thursday, June 5, 2014

File upload control within ajax updatepanel with update progress template asp.net



In this post we will discuss how we can use file upload control within Ajax Update Panem with Update progress template in Asp.Net.

Also you can check out:

- Clear textboxes inside a form in C#.Net

- Array and ArrayList in C#.Net

- Reset auto increment sql server 2008 - Reset Table Identity Sql Server 2008

Recently I have got a requirement like, we want to have a file upload control where we want to upload a file and then on the button click we want to process something and during processing we want to show a progress icon so that user will be able to know something is happening.

We can easily use a Ajax Progress template but we are using a file upload control which always needs a postback to work properly, it will not work with asynchronous postback.

so every time you can check FileUpload1.HasFile, it will return false.

To achieve this we have to use the PostBackTrigger like below:

  <Triggers>
                        <asp:PostBackTrigger ControlID = "btnGenerate" />
   </Triggers>

In the above case it will return true.

But the Progress icon will not work, to make this work we need to write a javascript function and need to call in the OnClientClick method of the button click.

Here is the full code:

<script type="text/javascript">
    function showProgressforGenerate() {
var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
            updateProgress.style.display = "inline-block";
            document.getElementById('loadingimg').style.display = "none";
            document.getElementById('progressBackgroundFilter_UpdatePanel').innerHTML = '<asp:Image ID="LoadImage" runat="server" ImageUrl="../images/loading-1.gif" /><br/><strong>Generating..</strong>';
        }
Upload a File <asp:FileUpload ID="fUpload" runat="server" />
<asp:UpdatePanel ID="upLoadProducts" runat="server" UpdateMode="Conditional">
             <ContentTemplate>
<asp:Button ID="btnGenerate" runat="server" Text="Generate" CssClass="buttonHPBlue" OnClick="btnGenerate_Click" OnClientClick="showProgressforGenerate()"/>
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="buttonHPGray" OnClick="btnCancel_Click" />
  <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="upLoadProducts" DynamicLayout="true">
                                 <ProgressTemplate>
                                 <div id="progressBackgroundFilter_UpdatePanel" >
                                 </div>
                                 <div id="processMessage_UpdatePanel">
                                    <div id="loadingimg"> &nbsp;<img id="Img1" alt="progress" runat="server" src="../images/loading-1.gif" /></div></div>
                                 </ProgressTemplate>
                </asp:UpdateProgress>
              
                   
            </ContentTemplate>
                <Triggers>
                        <asp:PostBackTrigger ControlID = "btnCancel" />
                        <asp:PostBackTrigger ControlID = "btnGenerate" />
                    </Triggers>
            </asp:UpdatePanel>





0 comments

Post a Comment