When you use a MasterPage with a menu and navigate between you’re content pages in normal ASP .NET, you will see a brief flickering, caused by the ASP .NET postback. You can prevent this flickering by ajaxifying the postback.
This can be done by using the Telerik RadAjaxPanel. In my case I used LinkButtons in the masterpage for navigating the content pages and surrounded the Linbuttons by a Telerik RadAjaxPanel. The click events of the LinkButtons use Reponse.Redirect to navigate between the content pages.
Site.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %> <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> <!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>Test Page</title> <link href="Styles/Master.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form runat="server" class="form"> <telerik:RadScriptManager ID="generalRadScriptManager" runat="server" /> <!-- One RadAjaxManager for all content pages --> <telerik:RadAjaxManager ID="generalRadAjaxManager" runat="server" /> <!-- One RadAjaxLoadingPanel for all content pages --> <telerik:RadAjaxLoadingPanel ID="generalRadAjaxLoadingPanel" runat="server" BackgroundPosition="Center" Skin="Default" /> <div class="page"> <div class="inside"> <div class="header"> <!-- All postback's in the RadAjaxPanel1 will be converted to AJAX postback's and the page will not flicker on navigation --> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="generalRadAjaxLoadingPanel"> <div class="navigation"> <div class="navigationPrimary"> <ul> <li><asp:LinkButton ID="administrationLinkButton" runat="server" onclick="AdministrationLinkButton_Click">Menu1</asp:LinkButton></li> <li><asp:LinkButton ID="zakelijkLinkButton" runat="server" onclick="AdministrationLinkButton_Click">Menu2</asp:LinkButton></li> </ul> </div> <div class="navigationSeparator"></div> <div class="navigationSecondairy"> <ul> <li><asp:LinkButton ID="customerLinkButton" runat="server" onclick="CustomerLinkButton_Click">SubMenu1</asp:LinkButton></li> <li><asp:LinkButton ID="PakkettenLinkButton" runat="server" onclick="AdministrationLinkButton_Click">SubMenu2</asp:LinkButton></li> <li></li> </ul> </div> </div> </telerik:RadAjaxPanel> </div> <div class="content"> <asp:ContentPlaceHolder ID="MainContent" runat="server" /> </div> <div class="footerPlaceholder"></div> </div> <div class="footer"> <ul class="footerLeftNav"> <li>Test</li> <li>Test</li> </ul> </div> </div> </form> </body> </html>
Site.Master.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class SiteMaster : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void AdministrationLinkButton_Click(object sender, EventArgs e)
{
Response.Redirect("Default.aspx");
}
protected void CustomerLinkButton_Click(object sender, EventArgs e)
{
Response.Redirect("CustomerOverview.aspx");
}
}
}
Master.css
* { margin: 0px; /* All elements start with 0px margin */ padding: 0px; /* All elements start with 0px padding */ } html { height: 100%; /* Must be 100% for footer at the bottom of the page */ font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: normal; color: #222; } body { height: 100%; /* Must be 100% for footer at the bottom of the page */ } form { height: 100%; /* Must be 100% for footer at the bottom of the page */ } a { color: #222; text-decoration: none; } div.page { margin-right: auto; /* Center the page */ margin-left:auto; /* Center the page */ height: 100%; /* Must be 100% for footer at the bottom of the page */ text-align: left; width: 1000px; /* Fixed width for screen resolution 1024px optimalisation */ } div.inside { border-left: 1px solid rgb(224,225,226); border-right: 1px solid rgb(224,225,226); min-height: 100%; /* Must be 100% for footer at the bottom of the page, using min-height instead of height allows content to be larger then intial page size */ margin-bottom: -33px; /* Negative bottom margin is used for correct the 100% height with the height of the footer, else vertical scrollbars will be shown */ } div.header { padding: 10px 0px 8px 0px; } div.header img { height: 60px; margin-left: 20px; width: 194px; } div.content { color: #666; font-size: 70%; padding: 10px 15px 15px 15px; } div.navigation { border-bottom: 2px solid rgb(255,102,0); position: absolute; top: 0px; width: 998px; } div.navigationSeparator { border-top: 1px solid rgb(222,222,222); margin-left: 279px; } div.navigationPrimary ul { height: 26px; margin-top: 13px; padding-left: 299px; } div.navigationPrimary ul li { background: url(../Images/TabLeft.gif) no-repeat scroll left top; float: left; /* Makes the unoderdered list flow horizontal instead of vertical */ font-weight: bold; font-size: 75%; height: 26px; line-height: 26px; list-style-type: none; /* Don't display bullets */ margin: 0px 4px 0px 0px; text-decoration: none; text-transform: uppercase; white-space: nowrap; } div.navigationPrimary ul li a { background: url(../Images/TabRight.gif) no-repeat scroll right top; float: left; height: 26px; line-height: 26px; padding: 0px 15px 0px 15px; } div.navigationPrimary ul li a:hover { color: rgb(255,102,0); } div.navigationSecondairy ul { padding-left: 310px; } div.navigationSecondairy ul li { background: url(../Images/MenuSeparator.gif) no-repeat scroll left 18px; float: left; /* Makes the unoderdered list flow horizontal instead of vertical */ font-size: 80%; height: 30px; list-style-type: none; /* Don't display bullets */ margin-right: 12px; padding-top: 12px; padding-left: 10px; white-space: nowrap; } div.navigationSecondairy ul li a { float: left; } div.navigationSecondairy ul li a:hover { color: rgb(255,102,0); } div.footerPlaceholder { height: 33px; /* The height should be equal to the full height of the footer (including any padding or borders you may add). Without the "footerPlaceholder" div, the content will flow beneath the footer */ } div.footer { background: url(../Images/Footer.gif) #f60 repeat-x; color: rgb(255,255,255); font-size: 60%; padding: 10px 46px 10px 46px; width: 906px; } ul.footerLeftNav { margin: 0px; padding: 0px; page-break-inside: avoid; list-style-position: outside; list-style-type: none; } ul.footerLeftNav li { display: inline; padding-right: 18px; }