Kentico CMS 6.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!  

Now you will learn how to create a new ASPX page template. We will create a new page with two columns that will contain editable regions.

 

 

 

Adding Kentico CMS Controls to your Visual Studio Toolbox

 

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

 

You can find step-by-step instructions in the Adding Kentico CMS Controls to the Toolbox topic.

 

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

 

2. Now right-click the CMSTemplates -> CorporateSite folder in the Solution Explorer and select Add New Item:

 

devguide_clip0148

 

3. Choose to create a new Web form and call it TwoColumnTemplate.aspx and check the Select master page box. Click Add.

 

devguide_clip0149

 

4. The Select a Master Page dialog appears. Choose the folder CMSTemplates/CorporateSite, select the Root.master file and click OK.

 

devguide_clip0150

 

Writing the ASPX code

 

5. Switch to 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 specifies that this content will be loaded into the master page (as defined in the Root.master file). As you can see, you can use the standard ASP.NET concept of master pages.

 

The CMSEditableRegion control defines an editable region that will be displayed as an HTML editor on the Content -> Edit -> Page tab of CMS Desk. On the live site, it ensures that the entered content is displayed on the page.

 

Please note: this example uses a table layout. If you prefer a CSS layout, you can simply replace the surrounding HTML code with <DIV> elements. As you can see, you have full control over the HTML code.

 

6. Switch to the code behind. You need to add a reference to the CMS.UIControls namespace:

 
[C#]
 

using CMS.UIControls;

 

7. The last step is to modify the class from which our page is inherited. Change the following code:

 
[C#]
 

public partial class CMSTemplates_CorporateSite_TwoColumnTemplate : System.Web.UI.Page

 

to this:

 
[C#]
 

public partial class CMSTemplates_CorporateSite_TwoColumnTemplate : TemplatePage

 

so that the page can be used as a page template in Kentico CMS.

 

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

 

8. Sign in to Site Manager and go to Development -> Page templates. Select an appropriate folder, for example Corporate Site/Examples and click AddTemplate New template. Enter the following values:

 

Template display name: Two column template

Template code name: TwoColumnTemplate

 

Click OK. The template will be created and its General tab will be displayed. Since the template was defined in Visual Studio as a standard ASPX page,  the Template type must be set to ASPX (this is the case by default). Now enter the following value into the File name field:

 

~/CMSTemplates/CorporateSite/TwoColumnTemplate.aspx

 

It is the virtual path of our ASPX page. Alternatively, the Select button can be used to manually select the file. Click Save Save.

 

devguide_clip1256

 

9. Now switch to the Sites tab, assign the page template to the current website using the Add sites button and click OK.

 

devguide_clip0269

 

Creating an About Us page based on the new page template

 

10. Go to Kentico CMS Desk -> Content. Select Corporate Site (the root of the content tree) and click New in the main menu of the Content section. Choose to create a new Page (menu item). Enter About Us into the page name field and choose to create a page using the Corporate Site/Examples/Two column template page template.

 

devguide_clip0270

 

Click Save Save to create the new page.

 

11. Switch to the Page tab and you will see a page with editable regions like this:

 

devguide_clip0271

 

Congratulations, you have just created your first ASPX page template. Now you can enter some text and click Save to store the content.