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


I recently ran into the following error while trying to get Elmah to work / complie with my Web Application Project in Visual Studio 2010: Could not load file or assembly 'file:///C:\Users\DOUGDELL2\Documents\Visual Studio...  more »

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 »

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 »

Here's how you can find the text of a particular TextBox witnin an ASP.NET GridView row and then Select and Copy the text to Clipboard with Javascript. First put the following javascript in the HTML of your page (either in HEAD of your html page or...  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 »

A regular expression for validating a image url.  more »