Postback within UpdatePanel causes MasterPage to disappear

Question

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>

if I don't use UpdatePanel then my server side code doesn't execute. How do you solve that? — Josh Sharkey, Mar 18 '20 at 09:01

score 0 · Answer 1 · answered Mar 23 '20 at 14:29

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.

The only difference I see is that instead of deriving from `Page` my C# class derives from `WebTemplate.BasicPage`, is there a difference in behavior? — Josh Sharkey, Mar 24 '20 at 01:07
is it possible that the scriptmanager in the master page would affect this — Josh Sharkey, Mar 24 '20 at 02:08
It is very possible as that essentially controls all Ajax behaviours (and UpdatingPanel is leveraging that a lot). I'll have to have a look at `BasicPage` behaviour update you a bit later — timur, Mar 24 '20 at 02:17
I don't think BasicPage is a standard class - your results will likely depend on what's in it. Try inheriting your page from `System.Web.UI.Page` and see if that makes a difference? — timur, Mar 24 '20 at 02:58
Looking at this [SO answer](https://stackoverflow.com/questions/6348589/difference-between-script-manager-and-toolkit-script-manager) I suspect you run a dated version of .net framework. Can you confirm what is your targeted version? — timur, Mar 24 '20 at 03:07

Postback within UpdatePanel causes MasterPage to disappear

1 Answers1

CustomMaster.master

Test.aspx

Test.aspx.cs