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


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 »

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 »

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 »

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 »

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 »

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 »

Here's how you can add "nofollow" tags to links generated by a Sitemap file that is bound to an ASP.NET Repeater control using a SiteMapDataSource. I'm currently using this technique for the footer links of GotKnowHow.com, so if you View Source of the...  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 »