How to Update an UpdatePanel after AjaxFileUpload UploadCompleteAll (ASP.NET)

Refresh an UpdatePanel with GridView after AjaxFileUpload
by Updated August 16, 2014

The AjaxFileUpload control that's part of the AJAX Control Toolkit, works great for easily uploading multiple files at once.  However, it gets a little tricky if you want to update an UpdatePanel after all the files have finished uploading, especially if the UpdatePanel contains a GridView.  

Because the upload functionality of the AjaxFileUpload control happens in a hidden frame posted to the same url as the current page, and not by using the full postback of an UpdatePanel, it can never refresh the UpdatePanel using the code behind OnUploadCompleteAll.  Instead you need to refresh the UpdatePanel using OnClientUploadCompleteAll.  In order to do this we use the following: OnClientUploadCompleteAll="AjaxFileUpload1_ClientUploadCompleteAll" and refresh the UpdatePanel using __doPostBack javascript like this:

<script type="text/javascript">        function AjaxFileUpload1_ClientUploadCompleteAll(sender, args) {            __doPostBack('<%= PhotosGridUpdatePanel.ClientID %>', '');        }    </script>
<asp:Image id="MyThrobberImage" runat="server" ImageUrl="~/admin/css/images/uploading.gif" style="display:none" />        <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" Padding-Bottom="4"            Padding-Left="2" Padding-Right="1" Padding-Top="4" ThrobberID="MyThrobberImage"             OnUploadComplete="AjaxFileUpload1_OnUploadComplete" OnClientUploadCompleteAll="AjaxFileUpload1_ClientUploadCompleteAll"             MaximumNumberOfFiles="10"            AllowedFileTypes="gif,png,jpg,jpeg"  />

 Then we need to add OnPreRender="PhotosGridUpdatePanel_PreRender" to the UpdatePanel. (Note you could also use: OnLoad):

<asp:UpdatePanel id="PhotosGridUpdatePanel" runat="server"  OnPreRender="PhotosGridUpdatePanel_PreRender">                          <ContentTemplate>                                     <asp:GridView ID="PhotosGridView" runat="server" AllowPaging="True" AllowSorting="True"                                      DataKeyNames="PhotoId" DataSourceID="ObjectDataSource1"  PageSize="10">                                <Columns>                                 <asp:BoundField DataField="PhotoId" HeaderText="Id" SortExpression="PhotoId" Visible="False" /></Columns>                                <EmptyDataTemplate>                                    <p>No photos added yet.</p>                                </EmptyDataTemplate>                             </asp:GridView></ContentTemplate></asp:UpdatePanel>

Then in your code behind file add the protected void PhotosGridUpdatePanel_PreRender(object sender, EventArgs e)function:

    protected void PhotosGridUpdatePanel_PreRender(object sender, EventArgs e)    {            if (Request.Form["__EVENTTARGET"] != null && Request.Form["__EVENTTARGET"] != string.Empty)            {                // This code will only be executed if the partial postback                //  was raised by a __doPostBack('UpdatePanel1', '')                if (Request.Form["__EVENTTARGET"] == PhotosGridUpdatePanel.ClientID)                {                    // Use this to Update the GridView after AjaxFileUpload1                    PhotosGridView.DataBind();                }            }    }

By using if (Request.Form["__EVENTTARGET"] == PhotosGridUpdatePanel.ClientID), we will only refresh the PhotosGridView when the javascript __doPostBack is raised. 

So essentially, the GridView inside the UpdatePanel will work correctly when an item from the GridView is Edited/Updated or Deleted. 

Note, this should work with the September 2013 AjaxControlToolkit .NET 4.5 both on localhost and on a web server. 

However, the July 2013 AjaxControlToolkit .NET 4.5 worked fine on my localhost, but on my web server, I would get the following error when trying to Edit or Delete items from the GridView:

Could not load control AjaxControlToolkit.AjaxFileUpload. The script reference(s) of this control was not loaded correctly. If AjaxControlToolkit.config is used, probably this control is not registered properly.

 

To understand all this a little better, see Easily refresh an UpdatePanel, using JavaScript and Are you making these 3 common ASP.NET AJAX mistakes?

 


0
0

Add your comment

by Anonymous - Already have an account? Login now!
Your Name:  

Comment:  
Enter the text you see in the image below
What do you see?
Can't read the image? View a new one.
Your comment will appear after being approved.

Related Posts


So below I'm going to share with you a fairly easy to use and understand ASP.NET User Control that allows you to pick a Date (with the ajaxToolkit CalenderExtender) and also select the Time of day using a drop down list. I've named the control...  more »

Here's how you can UrlEncode the plus sign (+) in a URL querystring in ASP.NET and then retrieve the plus symbol after UrlDecoding the string. In this example, I will do a postback and redirect the Server.UrlEncoded string to another page. First we will...  more »

Here's one quick fix for the ASP.NET error System.FormatException: Input string was not in a correct format. when you are using a DataList with an asp:Button control and are trying to get the CommandArgument using the DataList_RowCommand. Keep in mind...  more »

After running a ASP.NET website on IIS 7.5 for the first time on a Windows 7 computer, I was faced with the following error message: Login failed for user 'IIS APPPOOL\ASP.NET v4.0'. Description: An unhandled exception occurred during the execution of the...  more »

The new Routing features in ASP.NET 4.0 are pretty awesome. However, one issue I ran into recently was trying to get the fully qualified urls from Page.GetRouteUrl as string urls to be used in emails messages. Unfortunately, I wanted something that worked...  more »

SQL Server Reporting Services can be a pain in the arse to set up correctly for the first time. Even after you've got things running correctly, you can sometimes run into issues, which is exactly what happened to me recently. I had setup my local...  more »

If you do any sort of ASP.NET programming there usually comes a time when you need to get a websites Base URL. The following shows two examples, the first example shows how to get the Base Site Url using C#, which can be used for getting both the...  more »