Postback within UpdatePanel causes MasterPage to disappear

user_2806421 0
Viewed 306

I am creating a web page for a fileupload requirement. Every page has a MasterType Template. Which I include in my aspx files like the following:

<%@ MasterType VirtualPath="~/MasterPage/Main.master" %>

I followed what I found online for implementing the fileupload function using Update Panel:

<asp:Panel ID="panel_Actions" runat="server">
        <asp:UpdatePanel ID="upanel_Actions" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
            <ContentTemplate>
                <asp:Button ID="btn_downloadEmpTemplate" runat="server" OnClick="btn_downloadEmpTemplate_Click" Text="Download Template"/>
                <asp:FileUpload runat="server" ID="fu_excelUpload"  />
                <asp:Button ID="btn_uploadSubmit" runat="server" OnClick="btn_UploadSubmit_Click" Text="Upload"/>
            </ContentTemplate>
            <Triggers>
            <asp:PostBackTrigger ControlID="btn_uploadSubmit" />
        </Triggers>
        </asp:UpdatePanel>
    </asp:Panel>

Whenever I press the submit (btn_uploadSubmit) the Master Page Template completely disappears. And I'm left only with the page content. What is happening?

My pageLoad and my onclick function for the upload submit:

protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {
            }
            System.Web.UI.ScriptManager.GetCurrent(this).RegisterPostBackControl(this.btn_downloadEmpTemplate);
        }

protected void btn_UploadSubmit_Click(object sender, EventArgs e)
        {
                string s = this.fu_excelUpload.FileName;
         }

EDIT: I think the issue may be related to the way the script manager was implemented in this project. It exists within the master template instead of the page. Including some of the master code:

<head>...</head>
    <body>
        <form id="form" runat="server" >
            <asp:ToolkitScriptManager ID="tsm" runat="server" AjaxFrameworkMode="Enabled" AsyncPostBackTimeout="1800" EnablePartialRendering="true" LoadScriptsBeforeUI="true" ScriptMode="Auto"></asp:ToolkitScriptManager>
          <div>...</div>
          <div>...</div>
          <div>...</div>
          <div>...</div> // main content content template here
          <script>...</script>
        </form>
    </body>
</html>
updatepanel file-upload asp.net c#
1 Answers

Warning: this is a "works on my machine" post, not a copy and paste solution by any means.

I assume you have seen official documentation on interoparability of FileUpload and UpdatePanel:

When you use a FileUpload control inside an UpdatePanel control, the file must be uploaded by using a control that is a PostBackTrigger object for the panel.

Looking at your code it seems you've already got that part right. In your context the MasterType directive also seems to make no difference - it adds correctly typed Master property to your page (otherwise you get ancestor MasterPage and have to cast it manually), which you don't seem to use here.

I created fresh WebForms project (.net 4.7.2) and applied your bits of code:

CustomMaster.master

<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="HeaderContent" runat="server">
        </asp:ContentPlaceHolder>
</head>
<body>
<h1>Custom Master</h1>
<form id="form1" runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>
    <asp:ContentPlaceHolder id="MainContent" runat="server"></asp:ContentPlaceHolder>
</form>
</body>
</html>

Test.aspx

<%@MasterType VirtualPath="CustomMaster.master" %>
<%@ Page Language="C#" MasterPageFile="CustomMaster.master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="WebApplication4.Test" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Panel ID="panel_Actions" runat="server">
        <asp:UpdatePanel ID="upanel_Actions" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
            <ContentTemplate>
                <asp:Button ID="btn_downloadEmpTemplate" runat="server" OnClick="btn_downloadEmpTemplate_Click" Text="Download Template"/>
                <asp:FileUpload runat="server" ID="fu_excelUpload"  />
                <asp:Button ID="btn_uploadSubmit" runat="server" OnClick="btn_UploadSubmit_Click" Text="Upload"/>
                <asp:Label ID="lbl_filename" runat="server"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="btn_uploadSubmit" />
            </Triggers>
        </asp:UpdatePanel>
    </asp:Panel>
</asp:Content>

Test.aspx.cs

using System;
using System.Web.UI;

namespace WebApplication4
{
    public partial class Test : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager.GetCurrent(this).RegisterPostBackControl(this.btn_uploadSubmit);
        }

        protected void btn_UploadSubmit_Click(object sender, EventArgs e)
        {
            lbl_filename.Text = this.fu_excelUpload.FileName;
        }

        protected void btn_downloadEmpTemplate_Click(object sender, EventArgs e)
        {
            throw new NotImplementedException();
        }
    }
}

As far as I can tell - the combo works as expected, so I'd suggest you to have a look through your actual code and see if anything is apparently different (files in Scripts/WebForms might be), or add more code to your question.

user_123398040
Related