Creating the Products page (ASPX)

This page describes how to create the product list page and publish computer specifications on the website.

Preparing the ASPX source file for the products template

  1. Edit your web project in Visual Studio.

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

  3. Create a Web Form named ******ProductList.aspx and check Select master page.

  4. Click Add and choose the MyMaster.master page from the CMSTemplates/MySite folder.

  5. Drag the following controls inside the <asp:Content> element of the product list page:

    • CMSBreadCrumbs
    • CMSDataList
  6. Set the properties of the CMSDataList control according to the table below:





    Configures the datalist to display only documents of the type.


    ComputerName ASC

    Sets the SQL ORDER BY clause that the control uses when loading data. As a result, the control displays items in ascending alphabetical order based on the ComputerName values.


    Assigns the transformation that the datalist uses to display the list of computer products.


    When a user selects a specific computer document on the website, the control displays the details according to the specified transformation.



    Configures the datalist to display 2 items per row in list mode.

  7. Switch to the code behind of the product list page (ProductList.aspx.cs) and add a reference to the CMS.UIControls namespace:

     using CMS.UIControls;
  8. Change the class definition so that it inherits from the TemplatePage class:

     public partial class CMSTemplates_MySite_ProductList : TemplatePage
  9. Save the files.

Registering the page template

The source files of the products page are ready. Now you need to register the page template in Kentico.

  1. Switch to the Kentico administration interface in your browser.
  2. Open the Page templates application.
  3. Select the My website category.
  4. Click New template and type Product list 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/MySite/ProductList.aspx
  7. Click Save.
  8. Switch to the Sites tab and assign the page template to My website.

Adding the products section

  1. Open the Pages application.

  2. Select the root of the content tree (My website).

  3. Click New ().

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

  5. Type in Products as the Page name and choose the Use existing page template option. Select the My website category and the Product list page template.

  6. Click Save to create the page.

  7. Select the Products page in the content tree.

  8. Click New () and choose the Computer document type.

  9.  Fill in the computer document fields with the following values:

    • Computer name: Home PC Dallas
    • Processor type: Athlon
    • RAM (MB): 2048
    • HDD (GB): 160
    • Image: upload an image (you can find images in the sample web template - SampleWebTemplate\Computer_Images)
    • Publish from/Publish to: leave the values blank
  10. Click Save and create another and enter the following values:

    • Computer name: Office PC Houston
    • Processor type: Pentium Core 2 Duo
    • RAM (MB): 4096
    • HDD (GB): 200
    • Image: upload an image (you can find images in the sample web template - SampleWebTemplate\Computer_Images)
    • Publish from/Publish to: leave the values blank
  11. Click Save.

If you view the /Products page in Preview mode, you can see a list of the two computer products (formatted according to the transformation).

Previewing the list of products

When you click the title of a specific computer, the page displays the detail view (using the transformation).

Previewing the details of a selected product