Create a layout view
This page is part of a series you should follow sequentially from beginning to end. Go to the first step.
Your project now has a Home page. One last missing piece to set it up correctly is adding Page Builder scripts and styles.
Using layout views in MVC is a standard practice. They wrap the content of specialized views and often include shared features, like navigation and frequently used styles and scripts.
Our layout will render the missing Page Builder scripts and styles from the sections included in the template. We will also add Bootstrap styles to our project to give it a nicer look.
Add the Layout view
Create a new ~/Views/Shared directory in the root of your Kickstart.Web project. Inside the directory, add a new view called _Layout.cshtml.
Include a title, heading, and some simple text to make the layout view visually apparent while testing.
Call @RenderBody() inside the body tag to indicate where the Razor Engine should render the content of the views.
<!DOCTYPE html>
<html>
<head id="head">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<meta data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes">
<meta data-hid="author" name="author" content="Kentico software s.r.o.">
<title>Xperience Kickstart</title>
</head>
<body>
<div>
<h2>Xperience Kickstart</h2>
</div>
<div>
@RenderBody()
</div>
<div>
<p>Find more information in the <a href="https://docs.kentico.com/guides/development" target="_blank">Xperience by Kentico guides</a>.</p>
</div>
</body>
</html>
Insert Page Builder styles and scripts
Add the page-builder-styles tag helper in the head tag to insert the styles required for Page Builder.
...
<!-- add Page Builder styles -->
<page-builder-styles />
<title>Xperience Kickstart</title>
</head>
...
Use the page-builder-scripts tag helper to render scripts required for Page Builder below the page content.
...
<body>
...
<div>
@RenderBody()
</div>
<div>
<p>Find more information in the <a href="https://docs.kentico.com/guides/development" target="_blank">Xperience by Kentico guides</a>.</p>
</div>
<!-- add Page Builder scripts -->
<page-builder-scripts />
</body>
...
It is important to place the scripts after the page content. Otherwise, the content may not display until after the scripts finish loading.
Set up templates to use the layout
If you run your website now, you’ll see it still only shows your slogan message.
Since the new layout view lives in a directory different from the Landing page template, the system will not use it automatically. Let’s rectify this with a ViewStart file.
ViewStart files specify code that runs at the start of every razor view’s execution.
Like the ViewImports file, ViewStart files apply only to the folder where they are located and its subfolders. We recommend putting it in the root of the site, and overriding it for specific subdirectories where necessary.
You can use the override mechanism to specify a different layout view for specific subfolders.
In the root of the Kickstart.Web project, add an empty Razor view called _ViewStart.cshtml.
Tell the system to use the _Layout view as a layout for all your project’s views.
@{
Layout = "_Layout";
}
Layout file path
Because the layout is in the Views/Shared folder, where MVC automatically looks, you don’t need to provide a full path.
If you store your layout elsewhere, you have to specify its path, using ~ to represent the root of the project. For example, ~/CustomDirectory/CustomViewsFolder/Shared/_Layout.cshtml.
Check your progress
Run the site locally and visit the /Home path to see your new layout view and the message from the reusable item rendered to the page.
To verify that your Page Builder scripts and styles work, navigate to your Home page in the Kickstart pages channel in the administration UI.
Switch to the Page Builder tab and click Edit page. You should see your Page Builder area from the Landing page template. The Publish button in the top-right corner should now be active and working.
Go ahead and add some more content to the page. Click the plus button in the middle to add a Rich text widget. You can insert some Lorem ipsum text and and a simple table, like in our example.
As opposed to the Welcome slogan reusable content item stored in the Content hub, this content is unstructured, lives only within the Home page, and cannot be referenced from elsewhere.
Add styles to your website
Let’s make your website look nicer with some styles.
This step is optional. We will use Bootstrap, but feel free to use any styles you like.
You can host Bootstrap files locally or point to an online resource by adding a link tag to your _Layout.cshtml file:
...
<page-builder-styles />
<!-- add bootstrap as an online resource -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Xperience Kickstart</title>
</head>
...
Now you can use Bootstrap classes to give your layout some shape and color, for example:
...
<body>
<div class="navbar navbar-primary navbar-expand-sm navbar-dark bg-primary p-3">
<div class="navbar-brand">
<h2>Xperience Kickstart</h2>
</div>
</div>
<div class="p-3">
@RenderBody()
</div>
<div class="border-top p-3">
<p>Find more information in the <a href="https://docs.kentico.com/guides/development" target="_blank">Xperience
by Kentico
guides</a>.</p>
</div>
<page-builder-scripts />
</body>
See our _Layout.cshtml in the Kickstart repository for your reference. Note that the file includes a navigation menu, which we will implement in the later steps of this series.
Your website will typically need more than one page. In the next step, we’ll add another one, reusing existing content types and adding a simple “Contact us” form.
Previous step: Apply a page template — Next step: Add a Contact us page
Completed steps: 9 of 13