UpdatePanel 中的 ASP.NET 控件在文件上传后不起作用答案

【问题标题】：ASP.NET Controls in UpdatePanel not working after File UploadUpdatePanel 中的 ASP.NET 控件在文件上传后不起作用
【发布时间】：2019-01-02 16:18:42
【问题描述】：

我是使用 AJAX UpdatePanel 的新手，我已尝试搜索此问题的答案，但尚未找到解决方案。

我在 UpdatePanel 中有多个控件，因为我根据不同的按钮单击来隐藏和显示面板。 UpdatePanel 内部还有一个 FileUpload 控件。在我上传文件之前一切正常。之后，按钮或单选按钮列表之类的控件或日期选择器之类的 JQuery 脚本都不会在上传后在 UpdatePanel 中触发。

这是aspx代码：

<%@ 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>

以及文件上传相关的代码：

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;

            }
        }

我不确定我做错了什么。从 Visual Studio 运行时它运行良好，但是当推送到服务器时它全部失败

【问题讨论】：

首先在 UpdatePanel 中为启动文件上传的按钮提供一个 PostBack 触发器。或者将 FileUpload 控件放在 UpdatePanel 之外，看看是否有帮助。
我尝试使用触发器，但没有奏效。我正在重写我的 aspx 页面以将 FileUpload 移到 UpdatePanel 之外。我希望有一种方法我不必这样做。

标签： asp.net file-upload asp.net-ajax updatepanel

【解决方案1】：

您可以尝试将可见设置为true/false，而不是设置：

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

当你必须显示时，你可以使用以下：

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

此外，您可以使用以下方法尝试 fullpostback/render：

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

【讨论】：