Defining layout.cshtml

Back to Contents

First of all, realise that you have a shared _Layout.cshtml file that is the parent page for all contained webpages. Layout.cshmtl is the only page that has a <head> section, so that’s where I added the CSS file and some Javascript files to include:
<head>
<meta charset=”utf-8″ />
<title>@ViewBag.Title</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script src=”~/Scripts/jquery-1.10.2.min.js”></script>
<script src=”~/Scripts/angular.js”></script>
<script src=”~/Scripts/Planning.js”></script>
</head>

In the body of layout.cshtml you will have Razor syntax to call RenderBody and RenderSection. These statements enable you to host different pages within your master page. In the example below I commented out the bootstrap navigation bar, because it didn’t work properly, but as you can see, you can reference different child pages, in this case Planning and Beletmelding. Planning and Beletmelding are different action methods within your client-side MVC controller named the HomeController.

<body>

@*<div class=”navbar navbar-inverse navbar-fixed-top col-md-12″>
<div class=”container”>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li>@Html.ActionLink(“Planning”, “Planning”, “Home”)</li>
<li>@Html.ActionLink(“BeletMelding”, “BeletMelding”, “Home”)</li>
</ul>
</div>
</div>
</div>*@

<div class=”container body-content col-md-12″>
@RenderBody()
</div>

@RenderSection(“scripts”, required: false)

</body>

Back to Contents

Leave a Reply

Your email address will not be published. Required fields are marked *