ASP.NET Controls in UpdatePanel not working after File Upload

Question

I'm new to working with the AJAX UpdatePanel and I've tried searching for an answer to this question and haven't found a solution yet.

I have multiple controls in an UpdatePanel since I am hiding and showing panels based on different button clicks. Also inside the UpdatePanel is a FileUpload control. Everything works fine until I upload a file. After that, none of the controls, like buttons or radio button lists, or JQuery scripts, like a datepicker, fire in the UpdatePanel after the upload.

Here is the aspx code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Admin.aspx.cs" Inherits="Site.Admin" %>
<%@ MasterType  virtualPath="~/Site1.master"%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.12.4.js"></script>
        <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript" src="scripts/jquery-ui-timepicker-addon.js"></script>
        <link rel="stylesheet" href="Content/jquery-ui-timepicker-addon.css">

    <script type="text/javascript"> 
        function pageLoad() { 
            $(function () { 
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

                function EndRequestHandler(sender, args) {
                    $('.picker').datetimepicker();
                }
            }); 
        } 
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>
            <asp:UpdatePanel ID="adminUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="True" runat="server">
                    <ContentTemplate>

                <div class="form-group">
                                    <div class='input-group date' id='datetimepicker3'>
                                        <asp:TextBox ID="tb_EndDate" class="form-control picker" runat="server"></asp:TextBox>
                                        <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                            </div>

                            <div class="form-group">
                                    <asp:RadioButtonList ID="rbl_Active" runat="server" OnSelectedIndexChanged="rbl_Active_SelectedIndexChanged" RepeatDirection="Horizontal" CellPadding="4" CellSpacing="4" AutoPostBack="True">
                                        <asp:ListItem>Yes</asp:ListItem>
                                        <asp:ListItem>No</asp:ListItem>
                                    </asp:RadioButtonList>
                            </div>

                <div class="form-group">
                                    <label>Upload Photo</label>
                                        <asp:FileUpload ID="imageFileUpload" runat="server" />                                    
                                        <asp:Button class="btn btn-primary" ID="btn_UploadImg" runat="server" Text="Upload Image" OnClick="btn_UploadImg_Click" CausesValidation="False" />
                                        <asp:Button ID="btn_CancelImg" OnClick="btn_CancelImg_Click" class="btn btn-primary" runat="server" Text="Change/Remove Image" CausesValidation="False" />
                            </div>
            </ContentTemplate>
            </asp:UpdatePanel>
</asp:Content>

And the code behind relating to the file upload:

protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager.GetCurrent(this).RegisterPostBackControl(this.btn_UploadImg);
        }

protected void btn_UploadImg_Click(object sender, EventArgs e)
        {
            bool isUploaded = uploadImage(imageFileUpload);
            if (isUploaded)
            {                
                btn_CancelImg.Visible = true;

            }
        }

I'm not sure what I'm doing wrong. It worked fine when run from Visual Studio, but when pushed to the server it all fails

Answer 1

Instead of setting Visible to true/false, can you please try:

 <asp:Panel ID="pnlToHide" runat="server" style="display:none">

When you have to show, you can use the following:

protected void btnShow_Click(object sender, EventArgs e)
{
    pnlToHide.Attributes["style"] = "display: '';";
}

Also, you can try fullpostback/render by using:

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