如何防止母版页闪烁？答案

【问题标题】：How do I keep the master page from flickering?如何防止母版页闪烁？
【发布时间】：2009-10-15 03:33:33
【问题描述】：

我正在构建一个 ASP.NET 应用程序，并希望使用母版页来显示品牌和导航信息并在多个内容页面中移动。但是，每次我尝试加载新内容时，整个页面都会闪烁。有没有办法避免这种情况？

母版页：

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

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

内容：

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

后面的内容代码：

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");
    }
}

【问题讨论】：

它在闪烁，因为您正在执行 Response.Redirect。我认为有办法将控件动态加载到同一页面中，但我没有尝试过。
我现在确信我的重定向很糟糕，但谁能建议如何更改内容同时避免闪烁？

标签： c# asp.net master-pages

【解决方案1】：

控制事件触发返回到您的页面的帖子，这通常会产生您看到的“空白”效果。为了缓解这种情况，您可能需要考虑使用某种 Ajax 解决方案来导致部分回发或异步回发以防止“空白”。

但是，在您单击按钮的特定情况下，如果您只想将使用带到另一个页面，那么您真的应该只使用 <a href="WebForm3.aspx"> 标记并避免使用 Response.Redirect。

【讨论】：

并不能完全消除闪烁，但现在确实只有在 Chrome 中才能注意到。

【解决方案2】：

您在代码隐藏中重定向页面。这会导致浏览器更改页面，并重新绘制整个内容，至少是 IIRC。我已经很久没有使用更新面板了。

【讨论】：

【解决方案3】：

这是否只有在您使用框架时才有可能？据我所知，母版页和内容页在服务器端绑定在一起，并将客户端作为一个整体下推。

您想要的听起来像是使用带有内嵌框架的品牌和导航页面来为您的修道院提供服务。这将防止外部页面在客户端“闪烁”。

编辑：虽然这不是新的做事方式。您可能希望使用 UpdatePannel 或其他 AJAX 样式设计来查看某些内容。

【讨论】：

【解决方案4】：

您无需移动更新面板，您的重定向会导致浏览器加载新页面。

【讨论】：