Developing the News page (ASPX)

Create the News section of the website.

Preparing the ASPX source file

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 NewsPage.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 news page:

   • CMSBreadCrumbs
   • CMSRepeater

6. Set the properties of the CMSRepeater control according to the table below (you can find them in the Behavior section of the Visual Studio Properties window):

   Property	Value	Description
   ClassNames	cms.news	Configures the repeater to display only pages of the cms.news type.
   TransformationName	cms.news.preview	Assigns the transformation that the repeater uses to display the list of news items.
   SelectedItemTransformationName	cms.news.default	When a user selects a specific news item on the website, the repeater displays the details according to the specified transformation.
   ItemSeparator	<hr />	Defines the HTML code placed between individual news items in the list.

   Copy

   
   
   
    <cms:CMSRepeater ID="CMSRepeater1" runat="server" ClassNames="cms.news" TransformationName="cms.news.preview" SelectedItemTransformationName="cms.news.default" ItemSeparator="<hr />" />
   
   
    

7. Add the following HTML code between the two controls:

   Copy

   
   
   
    <h1>News</h1>
   
   
    

8. Switch to the code behind of the news page (NewsPage.aspx.cs) and add a reference to the CMS.UIControls namespace:

   Copy

   
   
   
    using CMS.UIControls;
   
   
    

9. Change the class definition so that it inherits from the TemplatePage class:

   Copy

   
   
   
    public partial class CMSTemplates_MySite_NewsPage : TemplatePage
   
   
    

10. Save the news page files.

Registering the page template

The source files of the news 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 My news 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/MySite/NewsPage.aspx
7. Click Save.
8. Switch to the Sites tab and assign the page template to My website.

Adding the news 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) page type.

5. Type in News as the Page name and choose the Use existing page template option. Select the My website category and the My news template page template.

   

6. Click Save to create the page.

7. Select the News page in the content tree

8. Click New () and choose the News page type.

9. Fill in the news page fields with the following values:

   • News Title: News 1
   • Release Date: click Today
   • News Summary: News 1 summary.
   • News Text: News 1 text.
   • Publish from/Publish to: leave the fields blank

10. Click Save and create another and enter the following values:

    • News Title: News 2
    • Release Date: click Today
    • News Summary: News 2 summary.
    • News Text: News 2 text.
    • Publish from/Publish to: leave the fields blank

11. Click Save.

If you select the /News page and switch to Preview mode, you can see a list of all news pages placed under the News section.

This is an example of how content is structured in Kentico. If you select a specific news item, the page displays the detail view.

The breadcrumbs at the top of the page show the current path on the website: News > News 1. The position is also reflected in the default page URLs:

• The URL of the News page is ~/news.aspx
• The URL of the News 1 page is ~/news/news-1.aspx

This makes the website accessible to both people and search engines.

How it works

1. A visitor arrives on the /News page.
2. The CMSRepeater control placed on the page template checks if a news page is currently selected (based on the value of the ClassNames property).
3. The control finds out that the current page is a page (menu item), so it looks for all underlying news pages and displays them as a list using the cms.news.preview transformation.
4. When the visitor selects a particular news item, such as /News/News 1, the repeater control uses the cms.news.default transformation instead to display the details.

Path expressions

Listing web parts and controls have the Path property that specifies which content the component loads and displays. The following expressions are examples that you can use to select pages: