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

Start by giving the button that starts the file upload an PostBack Trigger in the UpdatePanel. Or place the FileUpload Control outside the UpdatePanel and see if that helps. — VDWWD
– VDWWD, Commented Jul 25, 2018 at 19:29
I tried using a trigger, but that didn't work. I'm working on rewriting my aspx page to move the FileUpload outside of the UpdatePanel. I was hoping there was a way I wouldn't have to. — Michelle
– Michelle, Commented Jul 25, 2018 at 20:08

Gauravsa · Accepted Answer · 2018-07-26 01:16:30Z

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>

answered Jul 26, 2018 at 1:16

Gauravsa

6,6382 gold badges25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.NET Controls in UpdatePanel not working after File Upload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related