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


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

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 »

Adding a CSS border to an ASP.NET Image control was a mystery to me for the longest time. While you could easily use an html image and add the runat="server" to it and then add CSS, I really wanted to use an asp:Image control along with a CSS border....  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 »

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 »

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 »