Ajax and Masterpages

May 18th, 2010Posted by Steve

 

Master pages are a great concept but can become a liffle unweildy and are often used incorrectly.

Getting a clean page when using master pages with Ajax so that you can see the design without the offset text and images. All you need do is to hide the ToolkitScriptManager or ScriptManager depending upon what version of Ajax you are using.

<div style="display: none;">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
</div>

Only update the bits you need to when navigating through your site. Don't mess with putting the update panels on the pages themselves put them in the masterpage.

<asp:UpdatePanel ID="contentUpdate" runat="server">
    <ContentTemplate>
        <asp:ContentPlaceHolder ID="contentpanel" runat="server">
        </asp:ContentPlaceHolder>
    </ContentTemplate>
</asp:UpdatePanel>

Put the stylesheet on the masterpage so that every page looks the way it should in Visual Studio.

<link href="default.css" rel="stylesheet" type="text/css" />

The upload control doesn't work as you expected. The reason is the postback is partial and you need to trigger a full postback. The problem is you don't want to hard code the button in the master page. The solution is simple put a method in the masterpage code behind and call it from the child page. You will see many posts on blogs about this subject of which the majority of solutions and comments are wrong, this is the issue and this is how to fix it.

/// In the Master page code behind

public void RegisterPostbackTrigger(Control triggerButton)
{
    this.ToolkitScriptManager1.RegisterPostBackControl(triggerButton);
}

/// In the Child Page OnLoad event

((ASP.masterpage_master)Page.Master).RegisterPostbackTrigger(this.UploadButton);