Creating a layout view and using it from the index view

gorohoroh · Jul 6, 2018 · 622e61c · 622e61c
1 parent 287e652
commit 622e61c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 34 deletions.
diff --git a/OdeToFoodRider/OdeToFoodRider/Views/Home/Index.cshtml b/OdeToFoodRider/OdeToFoodRider/Views/Home/Index.cshtml
@@ -1,14 +1,12 @@
 @using OdeToFoodRider.Models
 @model OdeToFoodRider.ViewModels.HomeIndexViewModel
 
-<!DOCTYPE html>
+@{
+    ViewBag.Title = "Home page";
+    Layout = "~/Views/Shared/_Layout.cshtml";
+}
 
-<html>
-<head>
-    <title>My title</title>
-</head>
-<body>
-<h1>@Model.CurrentMessage</h1>
+<h1>All Restaurants</h1>
 @* VSRD: No table snippet in Rider. *@
 <table>
     @* VSRD: No foreach live template here, just keyword completion like in Visual Studio *@
@@ -29,5 +27,7 @@
 
 <a asp-action="Create">Add Restaurant</a>
 
-</body>
-</html>
+@section footer
+{
+    @Model.CurrentMessage
+}
diff --git a/OdeToFoodRider/OdeToFoodRider/Views/Shared/_Layout.cshtml b/OdeToFoodRider/OdeToFoodRider/Views/Shared/_Layout.cshtml
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>@ViewBag.Title</title>
+</head>
+<body>
+<div>
+    @RenderBody()
+</div>
+<footer>@RenderSection("footer", required: true)</footer>
+</body>
+</html>
diff --git a/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Home/Index.cshtml b/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Home/Index.cshtml
@@ -1,29 +1,29 @@
 @* VSRD: Visual Studio doesn't suggest importing the Restaurant model when typing @model Restaurant, so you have to type in the FQN. Let's see what Rider can do here :) *@
 @model OdeToFoodVisualStudio.ViewModels.HomeIndexViewModel
 
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <title></title>
-</head>
-<body>
+@{ ViewBag.Title = "Home page";
+    Layout = "~/Views/Shared/_Layout.cshtml";
+}
 
-    <h1>@Model.CurrentMessage</h1>
-    @* VSRD: Table generated in VS with a "table" code snippet *@
-    <table>
-        @* VSRD: No 'foreach' code snippet in VS, just keyword completion *@
-        @foreach (var restaurant in Model.Restaurants)
-        {
-            <tr>
-                <td>@restaurant.Id</td>
-                <td>@restaurant.Name</td>
-                <td>
-                    <a href="/home/details/@restaurant.Id">Details</a>
-                    @Html.ActionLink("Go", "Details", new { id = restaurant.Id })
-                    <a asp-action="Details" asp-route-id="@restaurant.Id">More</a>
-                </td>
-            </tr>
-        }
-    </table>
-    <a asp-action="Create">Add Restaurant</a>
-</body>
-</html>
+<h1>All Restaurants</h1>
+@* VSRD: Table generated in VS with a "table" code snippet *@
+<table>
+    @* VSRD: No 'foreach' code snippet in VS, just keyword completion *@
+    @foreach (var restaurant in Model.Restaurants)
+    {
+        <tr>
+            <td>@restaurant.Id</td>
+            <td>@restaurant.Name</td>
+            <td>
+                <a href="/home/details/@restaurant.Id">Details</a>
+                @Html.ActionLink("Go", "Details", new { id = restaurant.Id })
+                <a asp-action="Details" asp-route-id="@restaurant.Id">More</a>
+            </td>
+        </tr>
+    }
+</table>
+<a asp-action="Create">Add Restaurant</a>
+
+@section footer {
+    @Model.CurrentMessage
+}
diff --git a/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Shared/_Layout.cshtml b/OdeToFoodVisualStudio/OdeToFoodVisualStudio/Views/Shared/_Layout.cshtml
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <meta name="viewport" content="width=device-width" />
+    <title>@ViewBag.Title</title>
+</head>
+<body>
+    <div>
+        @RenderBody()
+    </div>
+    <footer>@RenderSection("footer", required: true)</footer>
+</body>
+</html>