×

Error message

Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in menu_set_active_trail() (line 2405 of /customers/1/8/c/mywebhostel.com/httpd.www/helpdesk/includes/menu.inc).

Customize the view of StartPage Page Type

Create: 07/16/2015

Prerequisites: Create a MVC Template for the StartPage Page Type

 

In the last exercise we used "@Html.PropertyFor" methods to create connections between view model properties and content data properties in edit mode, and directly call "DisplayFor" in view mode.

We will use other methods to customize the View.

  1. Run your EPiServerTraining project in Visual Studio 2013.
  2. Double click on Index.cshtml.
  3. To display the page name as the Heading:
    1. Modify the output of Heading to look like that:
      <h1 @Html.EditAttributes(x => x.Heading)>
          @(Model.PageName)
      </h1>
    2. Run your solution and open the Edit View path.
    3. Click Add -> New page, and click OK.
    4. Enter a Name to the page
    5. You will see that the Page name is displayed as the Heading.


       

  4. To display the page name when the Heading is emply:
    1. Modify the output of Heading to look like that:
      <h1 @Html.EditAttributes(x => x.Heading)>
          @(Model.Heading ?? Model.PageName)
      </h1>
    2. Delete New page and add a new page in your website. You will see that the Page Name is displayed as The Heading.
    3. Select the New Page and click on All Properties.
    4. Type a Heading and Publish changes.


       

    5. You will see that time that the Heading is dislayed.

 

Read more about Editing hints in MVC.

up
177 users have voted.