Creating ASPX page templates

✖
Copy to clipboard

Use the following steps to create ASPX page templates:

  1. Open your Kentico web project in Visual Studio.

  2. Create a new web form (.aspx file).

  3. (Optional) Select a master page.

  4. Develop the content of the page template.

    • Add any required HTML or controls into the template’s markup.
    • You can execute custom code in the web form’s code behind.

  5. Edit the web form’s code behind and make the class inherit from CMS.UIControls.TemplatePage.

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

  6. Sign in to the Kentico administration interface and open the Page templates application.

  7. Create a New template.

  8. Set the following values on the template’s General tab:

    • Template type - ASPX page
    • File name - enter the path of the aspx file that implements the template

  9. Switch to the Sites tab and add all websites where you wish to use the template.

Users can now create pages based on the template.

Example - Building an ASPX template

The following example demonstrates how to create a new ASPX page template. The sample template allows users to add pages with two editable regions.

Creating the web form

  1. Open your web project in Visual Studio (using the WebSite.sln or WebApp.sln file).
  2. Right-click the CMSTemplates/CorporateSite folder in the Solution Explorer and select Add -> Add New Item.
  3. Create a new Web Form and enable Select master page.
    • Or Web Form with Master Page if you are using a web application project.
  4. Name the file TwoColumnTemplate.aspx
  5. Click Add. The Select a Master Page dialog opens.
  6. Choose the CMSTemplates/CorporateSite folder and select the default Root.master file.
  7. Click OK.

Writing the ASPX code

Adding Kentico Controls to your Visual Studio Toolbox

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

  1. Open the Source view of the new web form.

  2. Add the following code inside the <asp:Content> element:

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

    


 <table>
   <tr>    
     <td style="width: 50%">
         <cms:CMSEditableRegion ID="txtLeft" runat="server" DialogHeight="400" RegionType="HtmlEditor" RegionTitle="Left column" />
     </td>
     <td style="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 in the Kentico administration interface on the Page tab of the Pages application. On the live site, the control renders the content entered into the editor.

  3. Edit the web form’s code behind file (TwoColumnTemplate.aspx.cs).

  4. Add a using statement for the CMS.UIControls namespace:

    


 using CMS.UIControls;

  5. Modify the class declaration so that the web form inherits from TemplatePage:

    


 public partial class CMSTemplates_CorporateSite_TwoColumnTemplate : TemplatePage

  6. Save the web form’s files.

Registering the web form as a page template

Now you need to register the web form as a page template in Kentico.

  1. Sign in to the administration interface and open the Page templates application.

  2. Select the Corporate Site/Examples category.

  3. Click New template.

  4. Type Two column template into the Template display name field.

  5. Click Save.

  6. Set the following values on the General tab:

    • Template type: ASPX page
    • File name: ~/CMSTemplates/CorporateSite/TwoColumnTemplate.aspxRegistering a web form as an ASPX template

  7. Click Save.

  8. Switch to the Sites tab.

  9. Click Add sites.

  10. Choose the sites where you wish to use the page template and click Select.

Creating a page based on the template

Content editors can now use the page template to create pages.

  1. Open the Pages application.
  2. Select Corporate Site (the root of the content tree).
  3. Click New () above the tree.
  4. Choose the Page (menu item) page type.
  5. Type About Us as the Page name and choose the Use existing page template option.
  6. Select the Corporate Site/Examples category and the Two column template page template.
    Creating a new page based on an ASPX template
  7. Click Save to create the new page.

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

Editing content of a page based on an ASPX template

You can now type in text into the regions and click Save to store the content of the page.