views:

513

answers:

4

I am building an ASP.NET application and would like to use a master page to display branding and navigation info and move through several content pages. However, every time I try to load new content the entire page flickers. Is there anyway to avoid this?

Master page:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Interface.Site" %>
    <%@ Register TagPrefix="customControl" TagName="NavigationBar" Src="NavigationControl/NavigationControl.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Registration</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="Stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="RegistrationMasterForm" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true">
        </asp:ScriptManager>

        <%-- Contents of this div span the top of the page for branding --%>
        <div id="BrandingBanner">
            <asp:Image ID="Banner" runat="server" 
                ImageUrl="Images/BrandingBanner.png"/>
        </div>

        <%-- Navigation Bar, the contents of this div should remain unchanged --%>
        <div id="NavigationBar">
            <customControl:NavigationBar ID="navBar" runat="server"/>
        </div>

        <%-- Contains any forms or controls that may be uniquie to the page --%>
        <div id="FormControls">
            <div id="FormContent">            
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
                </asp:ContentPlaceHolder>
            </div>            
        </div>

    </div>
    </form>
</body>
</html>

Content:

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="Interface.WebForm2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                Check me out!  I am content for the master page!
                <asp:Button ID="Button1" runat="server" Text="Next" onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
</asp:Content>

content code behind:

public partial class WebForm2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Redirect("WebForm3.aspx");
    }
}
A: 

Isnt this only possible if you're using frames? As far as I'm aware the master page and content pages bind together on the serverside and push down the the client as a whole.

Where what you want sounds like using an page for branding and navigation with an inline frame to serve up your convent. This would prevent the outer page from "flickering" on the client side.

Edit: Though it is not the new way to do things. You'd want to look at something using maybe an UpdatePannel or other AJAX style design.

Tim Meers
+1  A: 

The control event triggers a post back to your page, which typically creates the "blanking" effect that you see. To mitigate this, you may want to consider using some sort of Ajax solution to cause a partial postback or async postback to prevent the "blanking".

However in the particular case of your button click, if all you are trying to do is bring the use to another page, you really should just use an <a href="WebForm3.aspx"> tag and avoid using Response.Redirect.

jlech
Doesn't eliminate the flicker all together but it is now really only noticeable in Chrome.
ProgrammingPope
A: 

You are redirecting the page in your codebehind. This causes the browser to change pages, and redraw the whole thing, at least IIRC. I haven't used updatepanels in ages.

Chad Ruppert
A: 

You don't need to move the updatepanel, your redirect is causing the browser to load a new page.

Chuck