Kentico CMS 7.0 Developer's Guide

Creating a new ASPX page template

Creating a new ASPX page template

Previous topic Next topic Mail us feedback on this topic!  

Creating a new ASPX page template

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

This topic describes how to create a new ASPX page template. We will create a new page with two columns that contain editable regions.

 

 

InfoBox_Note

 

Adding Kentico CMS Controls to your Visual Studio Toolbox

 

Before you start developing ASPX page templates, it is recommended to add the Kentico CMS Controls to your Visual Studio Toolbox so that you can drag‑and‑drop the controls onto the ASPX pages.

 

See the Adding Kentico CMS Controls to the Toolbox topic for step-by-step instructions.

 

 

1. Open the web project in Visual Studio. You can open it either through the WebProject.sln file or using the File -> Open Web Site option in the menu.

 

2. Right-click the CMSTemplates/CorporateSite folder in the Solution Explorer and select Add New Item.

 

devguide_clip0148

 

3. Create a new Web form named TwoColumnTemplate.aspx and check the Select master page box. Click Add.

 

devguide_clip0149

 

The Select a Master Page dialog opens.

 

4. Choose the CMSTemplates/CorporateSite folder, select the Root.master file and click OK.

 

devguide_clip0150

 

Writing the ASPX code

 

5. Open the Source view of the newly created ASPX page and add the following code inside the <asp:Content> element:

 

<table width="100%">
  <tr valign="top">
    <td width="50%">
        <cms:CMSEditableRegion ID="txtLeft" runat="server" DialogHeight="400" 
            RegionType="HtmlEditor" RegionTitle="Left column" />
    </td>
    <td width="50%">
        <cms:CMSEditableRegion ID="txtText" runat="server" DialogHeight="400"
            RegionType="HtmlEditor" RegionTitle="Right column" />
    </td>
  </tr>
</table>

 

The <asp:Content> control allows you to use standard ASP.NET master pages. When the system renders the page, it loads the content of the control into the assigned master page (as defined in the Root.master file).

 

The CMSEditableRegion control defines an editable region that the page displays as an HTML editor on the Content -> Edit -> Page tab of CMS Desk. On the live site, the control renders the content entered into the editor.

 

 

InfoBox_Note

 

Note

 

This example uses a table layout. If you prefer a CSS layout, replace the surrounding HTML code with <DIV> elements. You have full control over the content.

 

 

6. Switch to the code behind file (TwoColumnTemplate.aspx.cs) and add a reference to the CMS.UIControls namespace:

 
[C#]
 

using CMS.UIControls;

 

7. Modify the class definition so that it inherits from the TemplatePage class:

 
[C#]
 

public partial class CMSTemplates_CorporateSite_TwoColumnTemplate : TemplatePage

 

Inheriting from this class allows you to use the web form as a page template in Kentico CMS.

 

Keep in mind that the name of the class must be identical to the value of the Inherits attribute of the <%@ Page %> directive on the ASPX page. This is case sensitive.

 

Registering the ASPX page as a page template

 

Now that we have created a new ASPX page, we need to register it in Kentico CMS as a page template, so that it can be used by content editors.

 

1. Sign in to Site Manager and go to Development -> Page templates.

 

2. Select the Corporate Site/Examples folder, click AddTemplate New template and type Two column template into the Template display name field.

 

3. Click Save Save. The system creates the template and displays its General tab.

 

4. Set the following values on the General tab:

 

Template type: ASPX

File name: ~/CMSTemplates/CorporateSite/TwoColumnTemplate.aspx

 

This is the virtual path of the ASPX page. Alternatively, you can click the Select button and manually select the file.

 

devguide_clip1256

 

5. Click Save Save.

 

6. Switch to the Sites tab and click the Add sites button. Choose the sites where you wish to use the page template and click OK.

 

devguide_clip0269

 

Creating an About Us page based on the new page template

 

1. Go to CMS Desk -> Content.

 

2. Select Corporate Site (the root of the content tree) and click New in the main menu of the Content section.

 

3. Choose the Page (menu item) document type.

 

4. Type About Us into the Page name field and choose the Use existing page template option. Select the Corporate Site/Examples category and the Two column template page template.

 

devguide_clip0270

 

5. Click Save Save to create the new page.

 

On the Page tab, you can see the page and its editable regions.

 

devguide_clip0271

 

You have created your first page based on an ASPX page template. Now you can enter some text and click Save Save to store the content.