ASP:Panel, UpdatePanel WTF, blank panels

    protected void Page_Load(object sender, EventArgs e)
    {    
    }

    protected void uxContinue_Click(object s, EventArgs e)
    {
        pnl_intro.Visible = false;
        pnl_main.Visible = true;
    }
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>

<asp:Panel ID="pnl_intro" runat="server">
  Lorem ipsum is sur de amuset...
  <asp:Button ID="uxContinue" runat="server" Text="Continue" onClick="uxContinue_Click" />
</asp:Panel>

</ContentTemplate>
</asp:UpdatePanel>

<asp:Panel ID="pnl_main" runat="server">
  Lorem ipsum is sur de amuset... Welcome to the main portion ...
</asp:Panel>

This is a common thing to do; you click the button and the panels switch out.

On our development server, all is well. On our production server, when you click the button, the panels swap out, but the pnl_main content is completely blank.

Solution: Move the second panel into the UpdatePanel.

I don’t know why this is quirky like it is.

Advertisements

ASP.NET FileUpload, Update Panel, Update Progress

Here is an example of a file upload inside an update panel with a upload progress control. I used this with a timer and several other panels as well. The updatepanel and fileupload controls are very finicky to be able to work together.

<asp:Panel ID="Panel_FileUploaded" runat="server" Visible="false">
    You have uploaded your filesuccesfully.
</asp:Panel>

<asp:Panel ID="Panel_FileUpload" runat="server" Visible="true">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
        <Triggers>
            <asp:PostBackTrigger ControlID="Button1" /> 
        </Triggers>
        <ContentTemplate>
            Please upload file from your computer. <br /><br />
            File: <asp:FileUpload ID="FileUpload1" runat="server"  />
            <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" OnClientClick="javascript:if(document.getElementById('ctl00_Content_FileUpload1').value.length > 0 ){$get('ctl00_Content_UpdateProgress1').style.display='block';$get('ctl00_Content_Button1').style.display='none';}"  />
            <span style="color:Red;"><asp:Label id="Label_Error" runat="server" Visible="false" Text="* Required" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <img src="work_in_progress.gif" />
            <span style="color:Green;">Working...</span>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Panel>
    protected void Button1_Click(object sender, EventArgs e)
    {
     
        if (!FileUpload1.HasFile)
        {
            Label_Error.Visible = true;
        }
        else
        {
            // check file extension, upload, etc ...
            Panel_FileUploaded.Visible = true;
            Panel_FileUpload.Visible = false;
        }  
    }