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


For a while I wasn't sure how to access GetRouteUrl from an .ashx IHttpHandler page. I wanted to access route url's setup in the Global.asax file to be used in files like rss.ashx, instead of having to hard codes the page URL's in my .ashx pages. Well,...  more »

I recently moved my sites over to a new web server that has "Windows Server 2008 R2" installed. The older server had just been running "Windows Server 2008". After moving my sites over I discovered that my AJAX Toolkit AutoComplete functionality had...  more »

There's a good chance that if you're database driven application is running into the following sql error message that says "String or binary data would be truncated", that the error is being caused by an issue in a SQL statement or in the SQL code of a...  more »

You may need to have an image refreshed automatically on a web page in ASP.NET to get the latest image. One instance where you might want the fresh image is if you upload an image that has the same file name as an already existing image file on the...  more »

This is one of those simple web page design things that can drive a web developer absolutely crazy.  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 »

After setting up a new Windows 7 computer with IIS 7.5 and Visual Studio 2010, I tried to start my ASP.NET 4.0 website using the Local IIS web server. However, right off the bat I was hit with the following IIS error message: HTTP Error 500.21 - Internal...  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 »