When developing or maintaining a website using ASPX page templates, one of the drawbacks is that the code of a page must be modified manually every time you wish to change its design. It is possible to add flexibility to ASPX templates by defining areas that may be edited directly through the browser in the Kentico CMS administration interface. The techniques used to manage these areas are the same as those used to design portal engine page templates. To learn more about portal engine features, please read the version of this tutorial dedicated to the portal engine.

 

Example

 

In this example, you will learn how to create a simple ASPX page template with areas that can be designed via the portal engine.

 

Writing the ASPX code

 

1. Open the web project in Visual Studio again (using either the WebProject.sln file or File -> Open -> Web site in the menu).

 

2. Right‑click the CMSTemplates -> CorporateSite folder in the Solution Explorer and select Add new item.

 

3. Create a new Web form named TwoZones.aspx, check the Select master page box and click Add. In the master page selection dialog, choose the Root.master page from the CMSTemplates/CorporateSite folder and click OK.

 

4. Open the Source view of the newly created ASPX page and place the following code inside the <asp:Content> control:

 

 

The CMSPagePlaceholder control creates an area on the page that behaves in a way similar to a portal engine page template.

 

The <LayoutTemplate> element defines the layout of the area. This example uses a basic two column table structure, but setting a CSS‑based layout applied through HTML elements (e.g. <div>, <span>, etc.) is also a valid option.

 

The table contains two CMSWebPartZone controls, which represent fully functional portal engine zones. Users can manage these zones when editing a page based on the page template on the Edit -> Design tab of CMS Desk. When some content is defined for a zone, the system stores the information in the database along with the respective page template object, not in the actual code of the ASPX page. Communication with the database is ensured by the CMSPortalManager control, which is located on the Root.master page.

 

5. Switch to the code behind file (TwoZones.aspx.cs) and add a reference to the following namespace:

 
[C#]
 

 

6. Modify the class definition to inherit from the TemplatePage class as shown below:

 
[C#]
 

 

7. Save the changes made to both the ASPX page and its code behind file.

 

Now you can use the page as a page template in Kentico CMS.

 

Registering the ASPX page as a page template

 

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

 

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

 

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

 

4. Select the ASPX + Portal page option for the Template type property. This is necessary in order for the Design tab of CMS Desk to be available when editing pages using the template.

 

 

5. Enter the following path into the File name field: ~/CMSTemplates/CorporateSite/TwoZones.aspx

 

6.  Save the changes.

 

7. Switch to the Sites tab and use the Add sites button to assign the page template to the site that you are using (Corporate Site).

 

Using ASPX + Portal engine templates

 

We will modify the About Us page created in the previous example to use the new page template.

 

1. Go to CMS Desk -> Content, select the About Us page and switch to its Properties -> Template tab.

 

2. Click the Select button and choose the Corporate Site/Examples/Two zone template page template from the catalog. Click  Save to confirm the page template change.

 

3. Refresh your browser window and switch to the Design tab, which is now available for the About Us page. You can see two empty zones on the page as defined in the ASPX code of the template. To define the content of standard zones, add components called web parts.

 

4. Add a web part to the zoneRight zone by clicking the Add web part () icon in the top right corner.

 

 

The Select web part dialog opens.

 

5. Choose the Text & Images -> Editable text web part and click OK.

 

 

The Web part properties dialog opens, which allows you to configure the web part.

 

6. Enter the following values:

 

•Design -> Editable region title: Right column

•Design -> Editable region height: 400

 

 

Click OK to save the web part and add it to the zone.

 

This web part provides a text area on the page that users can edit on the Page tab of CMS Desk, just like the editable regions in the previous example. As you can see, the template allows you to build the design of the page using a browser‑based interface. A web part zone may contain any number of web parts.

 

You may also configure zones to use various types of widgets, which are objects similar to web parts, but they allow page customization by different kinds of website users, not just the administrators or designers.

 

7. Expand the menu () of the zoneLeft zone and select  Properties to configure the zone.

 

 

8. Switch the Widget zone type property from None to Customization by page editor.

 

 

Click OK. This zone now serves as a widget zone for page editors.

 

9. Switch to the Page tab, enter some content into the editable text region displayed by the web part on the right and click  Save.

 

You can also manage the editor widget zone on the left.

 

10. Click the Add widget () button in the top left corner of the widget zone to place a widget onto the page. Select the Newsletters -> Newsletter subscription widget from the catalog and set the following values for its properties:

 

•Newsletter name: Corporate Newsletter

•Allow user subscribers: disabled (unchecked)

•Widget container: Corporate site - Light gradient box

•Widget container title: Newsletter subscription

 

Click OK to add the widget to the page. It provides a form which users may use to subscribe to the site's newsletter.

 

 

The example demonstrates how to use web parts or widgets to build the design of pages based on ASPX page templates. This approach combines the standard architecture and development process of ASPX templates with the flexibility and user‑friendliness of the portal engine.