In this article I will explain with an example, how to use FileUpload control inside ASP.Net
AJAX UpdatePanel control.
HTML Markup
The following HTML Markup consists of:
ScriptManager – For calling Server Side ASP.Net methods from client side without any PostBack using PageMethods.
UpdatePanel – For partially refreshing the page.
The ASP.Net AJAX UpdatePanel consists of ContentTemplate and Triggers.
ContentTemplate
The ContentTemplate is used for adding alternate items. In this case it is consisting of a FileUpload and two Button controls.
The Buttons have been assigned with OnClick event handlers.
Triggers
Triggers consist of two Triggers one is AsyncPostBackTrigger and another one is PostBackTrigger.
The AsyncPostBackTrigger has been assigned with the EventName as Click.
The ControlID of the Triggers are set with the different Button ID. Hence, each Trigger is triggered by different events.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnAsyncUpload" runat="server" Text="Async_Upload" OnClick="Async_Upload_File" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload_File" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAsyncUpload" EventName="Click" />
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
Uploading Files using Triggers
Using AsyncPostBackTrigger
When the Async_Upload Button is clicked, the FileUpload is done asynchronously using AsyncPostBackTrigger and the HasFile property of the FileUpload control returns False.
C#
protected void Async_Upload_File(object sender, EventArgs e)
{
bool HasFile = FileUpload1.HasFile;
}
VB.Net
Protected Sub Async_Upload_File(ByVal sender As Object, ByVal e As EventArgs)
Dim HasFile As Boolean = FileUpload1.HasFile
End Sub
Using PostBackTrigger
When the Upload Button is clicked, the FileUpload is done using PostBackTrigger and the HasFile property of the FileUpload control returns True.
C#
protected void Upload_File(object sender, EventArgs e)
{
bool HasFile = FileUpload1.HasFile;
}
VB.Net
Protected Sub Upload_File(ByVal sender As Object, ByVal e As EventArgs)
Dim HasFile As Boolean = FileUpload1.HasFile
End Sub
Screenshots
Using AsyncPostbackTrigger
![Using FileUpload Control inside ASP.Net AJAX UpdatePanel Control]()
Using PostbackTrigger
![Using FileUpload Control inside ASP.Net AJAX UpdatePanel Control]()
Downloads
