Developing the master page (ASPX)

✖
Copy to clipboard

Create a master page for the website containing a header, navigation menu and footer. This master page will be shared by all ASPX templates used to build the site’s pages.

Open your web project in Visual Studio. Right-click the CMSTemplates folder in the Solution Explorer and select New Folder. Name the folder MySite.

We recommend using a folder name that matches the code name of your site. This ensures that the system exports/imports the folder’s content along with the website when you deploy it to another instance of Kentico.

Adding the master page

  1. Right-click the MySite folder, select Add -> Add New item.

  2. Create a Master page named MyMaster.master.

  3. Delete all default ASPX code of the master page (in the Source view) except for the first line with the <%@ Master %> directive

  4. Add the following code instead:

    


 <%=DocType%>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head id="Head1" runat="server">
     <title id="Title1" runat="server">My website</title>
     <asp:literal runat="server" id="ltlTags" enableviewstate="false" />
 </head>

 <body class="<%=BodyClass%>" <%=BodyParameters%>>
     <form id="form1" runat="server">
     <asp:PlaceHolder runat="server" ID="plcManagers">
         <ajaxToolkit:ToolkitScriptManager ID="manScript" runat="server" EnableViewState="false" ScriptMode="Release" />
         <cms:CMSPortalManager ID="CMSPortalManager1" runat="server" />
     </asp:PlaceHolder>
     </form>
 </body>

 </html>
    • The ToolkitScriptManager control allows AJAX components to work on the pages of your site (required).
    • The CMSPortalManager control ensures the loading and saving of content between the database and editable regions. It also provides the management necessary for web part or widget zones defined on child ASPX pages.

  5. Open the home.htm file (from the sample web template) and copy the HTML code from inside the <body>…</body> tags. Paste this code into the body of the master page after the <asp:PlaceHolder> control.

  6. Delete all code in the <!-- main content --> … <!-- /main content --> section and replace it with the following control:

    


 <asp:ContentPlaceHolder ID="plcMain" runat="server"></asp:ContentPlaceHolder>

    Because you are creating a master page, you do not need the actual content of the Home page, only the logo, main menu and footer. The replacement code adds a standard ASP.NET control that ensures the loading of pages inside the master page.

The code of the master page’s <body> element should now look like this:




<body class="<%=BodyClass%>" <%=BodyParameters%>>
    <form id="form1" runat="server">
    <asp:PlaceHolder runat="server" ID="plcManagers">
        <ajaxToolkit:ToolkitScriptManager ID="manScript" runat="server" EnableViewState="false" ScriptMode="Release" />
        <cms:CMSPortalManager ID="CMSPortalManager1" runat="server" />
    </asp:PlaceHolder>

    <div class="MainDiv">
        <!-- logo -->
        <br />
        <div class="Logo">
        &nbsp;      
        </div>
        <!-- main menu -->
        <div class="MainMenu">
            <table cellspacing="2" cellpadding="2" border="0">
            <tr>
                <td class="MainCMSMenuHighlightedMenuItem">Home</td>
                <td class="MainCMSMenuItem">Page 1</td>
            </tr>
         </table>
        </div>

        <!-- main content -->
        <asp:ContentPlaceHolder ID="plcMain" runat="server"></asp:ContentPlaceHolder>
        <!-- /main content -->

        <!-- footer -->     
        <div class="Footer">
            This is a sample Kentico website
        </div> 
    </div>
    </form>
</body>

Adjusting the master page code behind

  1. Edit the code behind of the master page (MyMaster.master.cs).

  2. Add a reference to the CMS.UIControls namespace:

    


 using CMS.UIControls;

  3. Change the class definition so that the master page inherits from the TemplateMasterPage class:

    


 public partial class CMSTemplates_MySite_MyMaster : TemplateMasterPage

  4. Override the CreateChildControls method in the class according to the following code:

    


 protected override void CreateChildControls()
 {
     base.CreateChildControls();
     PageManager = CMSPortalManager1;
 }

  5. Add an override for the OnPreRender method:

    


 protected override void OnPreRender(EventArgs e)
 {
     base.OnPreRender(e);
     this.ltlTags.Text = this.HeaderTags;
 }

  6. Save the master page files.

Continue editing the master page according to the instructions in Creating the main menu (ASPX).