Button event doesn't fire inside Update panel

Question

I have a asp.net web form Page which uses master page also.

This is a simple page which displays some text and has a form, this page also allows user to upload resume in .doc, .docx & pdf format.

Problem with this code is that i am not able to trigger for some reason <asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click"/>

<%@ Page Title="" Language="C#" MasterPageFile="~/en/SiteMasterPage.master" AutoEventWireup="true" CodeFile="career.aspx.cs" Inherits="career" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
        <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
        <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
            <!-- Content Page-->
            <!-- page content wrapper -->
            <div id="page-content-area" class="page-content-area">
                <div id="pg-left-bar" class="pg-left-bar">
                    <div class="page-title">
                         <h5><asp:Label ID="lblPageTitle" CssClass="page-title-lbl" runat="server" Text="Introduction"></asp:Label></h5>

                    </div>
                    <div class="page-text">
                        <asp:Label ID="lblPageContents" runat="server" Text=""></asp:Label>
                    </div>
                    <div class="career-form-wrapper">
                        <!-- UpdatePanel -->
                        <asp:UpdatePanel ID="updPnlArticles" runat="server" UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:Panel ID="pnlCareerForm" runat="server">
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper"> <span class="row-req">*</span>

                                            <asp:Label ID="lblFirstName" runat="server" CssClass="row-label" Text="First Name:"></asp:Label>
                                        </div>
                                        <asp:TextBox ID="txtFirstName" runat="server" CssClass="row-input"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfFN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>
                                    </div>
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper"> <span class="row-req">*</span>

                                            <asp:Label ID="lblFamilyName" runat="server" CssClass="row-label" Text="Family Name:"></asp:Label>
                                        </div>
                                        <asp:TextBox ID="txtFamilyName" runat="server" CssClass="row-input"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfLN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFamilyName"></asp:RequiredFieldValidator>
                                    </div>
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper"> <span class="row-req">*</span>

                                            <asp:Label ID="lblEmail" runat="server" CssClass="row-label" Text="Email:"></asp:Label>
                                        </div>
                                        <asp:TextBox ID="txtEmail" runat="server" CssClass="row-input"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvEmail" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
                                        <asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="Careers"></asp:RegularExpressionValidator>
                                    </div>
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper">
                                            <asp:Label ID="lblPhone" runat="server" CssClass="row-label" Text="Phone Number:"></asp:Label>
                                        </div>
                                        <asp:TextBox ID="txtPhone" runat="server" CssClass="row-phone" Text=""></asp:TextBox>
                                        <asp:RegularExpressionValidator ID="revPhone" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtPhone" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})([\s.-]?[0-9]{1,4}?)$"></asp:RegularExpressionValidator>
                                        <div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567, 050 1234567 or 04-1234567, 050-1234657)<br />and international format (eg. [phone], [phone] ).<br />Also accepts an optional extention of up to four digits (eg. 04 1234567 289 or [phone])">
                                            <asp:Image ID="imgtooltip" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
                                        </div>
                                    </div>
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper">
                                            <asp:Label ID="lblFax" runat="server" CssClass="row-label" Text="Fax Number:"></asp:Label>
                                        </div>
                                        <asp:TextBox ID="txtFax" runat="server" CssClass="row-input"></asp:TextBox>
                                        <asp:RegularExpressionValidator ID="revFax" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtFax" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})$"></asp:RegularExpressionValidator>
                                        <div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567 or 040-1234567)<br />and international format (eg. [phone] or [phone])">
                                            <asp:Image ID="Image1" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
                                        </div>
                                    </div>
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper">
                                            <asp:Label ID="lblAddress" runat="server" CssClass="row-label" Text="Address:"></asp:Label>
                                        </div>
                                        <asp:TextBox ID="txtAddress" runat="server" CssClass="row-input-multiline" TextMode="MultiLine"></asp:TextBox>
                                    </div>
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper"> <span class="row-req">*</span>

                                            <asp:Label ID="lblCountry" runat="server" CssClass="row-label" Text="Country:"></asp:Label>
                                        </div>
                                        <asp:DropDownList ID="ddCountry" runat="server" CssClass="row-dd"></asp:DropDownList>
                                        <asp:CascadingDropDown ID="csdCountry" runat="server" Category="Country" TargetControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Countries...]" ServiceMethod="FetchCountries" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
                                        <asp:RequiredFieldValidator ID="rfCountry" ValidationGroup="Careers" ControlToValidate="ddCountry" CssClass="row-validate" InitialValue="0" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
                                    </div>
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper">
                                            <asp:Label ID="lblCity" runat="server" CssClass="row-label" Text="City:"></asp:Label>
                                        </div>
                                        <asp:DropDownList ID="ddCity" runat="server" CssClass="row-dd"></asp:DropDownList>
                                        <asp:CascadingDropDown ID="csdCity" runat="server" Category="City" TargetControlID="ddCity" ParentControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Cities...]" ServiceMethod="FetchCities" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
                                    </div>
                                    <div class="row-form">
                                        <div class="row-lbl-wrapper"> <span class="row-req">*</span>

                                            <asp:Label ID="Label1" runat="server" CssClass="row-label" Text="CV:"></asp:Label>
                                        </div>
                                        <asp:FileUpload ID="FileUpload1" runat="server" CssClass="fileUpload" />
                                        <div id="dFileUpload1" class="btnUploadHack">Browse</div>
                                        <asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" />
                                        <asp:RequiredFieldValidator ID="rfvF1" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
                                        <asp:Label ID="lblImageMSG" runat="server" Text=""></asp:Label>
                                    </div>
                                    <div class="contactus-row">
                                        <asp:Button ID="btnSave" runat="server" CssClass="btnContactUsSave" Text="Send Message" onclick="btnSave_Click" ValidationGroup="Careers" />
                                    </div>
                                </asp:Panel>
                                <asp:Panel ID="pnlCareerMSG" runat="server"></asp:Panel>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                        <!-- UpdatePanel -->
                    </div>
                </div>
                <div class="pg-right-bar">
                    <asp:Image ID="imgSideBanner" runat="server" />
                </div>
            </div>
            <!-- page content wrapper -->
            <!-- Content Page-->
        </asp:Content>

Code Behind

    protected void btnUploadCV_Click(object sender, EventArgs e)
    {

// code is here
    }

So far i am not able to figure out what i s blocking the any button inside from firing. Yes i did even put a simple button to test even that didn't fire.

I am not sure if it is Validation or Update Panel which is creating problem.

I tried using Trigger that didnt work

I tried setting

    <asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" CausesValidation="false" />

protected void btnUploadCV_Click(object sender, EventArgs e)
{
  Page.Validate();
if (Page.IsValid == true)
 {

 //  your code  here

   }
}

My problem is it deosn't even enter code block of button for some reason.

Just to add further i am using cascading dropdown for country and cities i am not sure if that is causing any problem I am also using two panels one has the form control and after successful submission i hide this panel & show the other panel with success message all this code with UpdatePanel.

Only way out of this i see is to upload all files main form button Send Message rather than having individual button for all file upload control

UPDATE: I also tried this approach even this doesn't work

Answer 1

FileUpload control doesn't work with asynchronous postbacks.To make this work in your application, follow below steps

1.) Place a <asp:ScriptManager /> on the page.

if you are using master page in your application and your web page uses the master page, place script manager in master page. If you don't want master page to have script manager,you can also place script manager on specific web pages anyways.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

2.) After this, Add <Triggers> for the button btnUploadCV in your Update panel.

<Triggers>
<asp:PostBackTrigger ControlID="btnUploadCV"  />
</Triggers>

And rest of your upload button OnClick handler looks like:

protected void btnUploadCV_Click(object sender, EventArgs e)
    {
            if (FileUpload1.HasFile)
            {                
               fileName = FileUpload1.FileName;
               FileUpload1.SaveAs("~/UploadedData/" + fileName);
               ... 
            }
    }

Answer 2

Please understand the concept

Update Panel is used for partial post back which is today we call AJAX However AJAX cannot be used to upload file to the server AJAX uses xmlHttpRequest which do not support file upload.

So, don't think that its a bug from Microsoft. Even today also, we don't have any javascript library which will support FileUpload using AJAX. All AJAX fileuploaders that you find on internet are using Flash :)

This is the limitation of protocol. Use any other jquery plugin to upload file. Update panel will not work for this.