From 5eafe8b14c0fa43469e7207d94009bdf78e5d107 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Thu, 14 Mar 2019 12:59:56 -0500
Subject: [PATCH] Razor Components libraries and layouts topics (#10971)

---
 .../razor-components/class-libraries.md       | 12 ++--
 aspnetcore/razor-components/layouts.md        | 71 ++++++-------------
 .../sample_snapshot/3.x/MasterLayout.cshtml   | 23 ++++++
 3 files changed, 53 insertions(+), 53 deletions(-)
 create mode 100644 aspnetcore/razor-components/layouts/sample_snapshot/3.x/MasterLayout.cshtml

diff --git a/aspnetcore/razor-components/class-libraries.md b/aspnetcore/razor-components/class-libraries.md
index 6eebab34a1..1f2e27c6e5 100644
--- a/aspnetcore/razor-components/class-libraries.md
+++ b/aspnetcore/razor-components/class-libraries.md
@@ -53,7 +53,9 @@ dotnet add WebApplication1 reference MyComponentLib1
 
 ## Consume a library component
 
-In order to consume components defined in a library in another project, the [@addTagHelper](/aspnet/core/mvc/views/tag-helpers/intro#add-helper-label) directive must be used. Individual components may be added by name. For example, the following directive adds `Component1` of `MyComponentLib1`:
+In order to consume components defined in a library in another project, the [@addTagHelper](xref:mvc/views/tag-helpers/intro#add-helper-label) directive must be used. Individual components may be added by name.
+
+The general format of the directive is:
 
 ```cshtml
 @addTagHelper MyComponentLib1.Component1, MyComponentLib1
@@ -65,19 +67,19 @@ Welcome to your new app.
 <Component1 />
 ```
 
-The general format of the directive is:
+For example, the following directive adds `Component1` of `MyComponentLib1`:
 
 ```cshtml
-@addTagHelper <namespaced component name>, <assembly name>
+@addTagHelper MyComponentLib1.Component1, MyComponentLib1
 ```
 
-However, it's common to include all of the components from an assembly using a wildcard:
+However, it's common to include all of the components from an assembly using a wildcard (`*`):
 
 ```cshtml
 @addTagHelper *, MyComponentLib1
 ```
 
-The `@addTagHelper` directive can be included in *_ViewImport.cshtml* to make the components available for an entire project or applied to a single page or set of pages within a folder. With the `@addTagHelper` directive in place, the components of the component library can be consumed as if they were in the same assembly as the app. 
+The `@addTagHelper` directive can be included in *_ViewImport.cshtml* to make the components available for an entire project or applied to a single page or set of pages within a folder. With the `@addTagHelper` directive in place, the components of the component library can be consumed as if they were in the same assembly as the app.
 
 ## Build, pack, and ship to NuGet
 
diff --git a/aspnetcore/razor-components/layouts.md b/aspnetcore/razor-components/layouts.md
index c044e3d78d..f1c3e7b286 100644
--- a/aspnetcore/razor-components/layouts.md
+++ b/aspnetcore/razor-components/layouts.md
@@ -1,7 +1,7 @@
 ---
 title: Razor Components layouts
 author: guardrex
-description: Learn how to create reusable layout components for Blazor and Razor Components apps.
+description: Learn how to create reusable layout components for Razor Components apps.
 monikerRange: '>= aspnetcore-3.0'
 ms.author: riande
 ms.custom: mvc
@@ -12,39 +12,18 @@ uid: razor-components/layouts
 
 By [Rainer Stropek](https://www.timecockpit.com)
 
-Apps typically contain more than one page. Layout elements, such as menus, copyright messages, and logos, must be present on all pages. Copying the code of these layout elements into all of the pages of an app isn't an efficient solution. Such duplication is hard to maintain and probably leads to inconsistent content over time. *Layouts* solve this problem.
+Apps typically contain more than one component. Layout elements, such as menus, copyright messages, and logos, must be present on all components. Copying the code of these layout elements into all of the components of an app isn't an efficient approach. Such duplication is hard to maintain and probably leads to inconsistent content over time. *Layouts* solve this problem.
 
-Technically, a layout is just another component. A layout is defined in a Razor template or in C# code and can contain data binding, dependency injection, and other ordinary features of components. Two additional aspects turn a *component* into a *layout*:
+Technically, a layout is just another component. A layout is defined in a Razor template or in C# code and can contain [data binding](xref:razor-components/components#data-binding), [dependency injection](xref:razor-components/dependency-injection), and other ordinary features of components.
+
+Two additional aspects turn a *component* into a *layout*
 
 * The layout component must inherit from `LayoutComponentBase`. `LayoutComponentBase` defines a `Body` property that contains the content to be rendered inside the layout.
 * The layout component uses the `Body` property to specify where the body content should be rendered using the Razor syntax `@Body`. During rendering, `@Body` is replaced by the content of the layout.
 
 The following code sample shows the Razor template of a layout component. Note the use of `LayoutComponentBase` and `@Body`:
 
-```csharp
-@inherits LayoutComponentBase
-
-<header>
-    <h1>ERP Master 3000</h1>
-</header>
-
-<nav>
-    <a href="master-data">Master Data Management</a>
-    <a href="invoicing">Invoicing</a>
-    <a href="accounting">Accounting</a>
-</nav>
-
-@Body
-
-<footer>
-    &copy; by @CopyrightMessage
-</footer>
-
-@functions {
-    public string CopyrightMessage { get; set; }
-    ...
-}
-```
+[!code-cshtml[](layouts/sample_snapshot/3.x/MasterLayout.cshtml?highlight=1,13)]
 
 ## Use a layout in a component
 
@@ -52,13 +31,11 @@ Use the Razor directive `@layout` to apply a layout to a component. The compiler
 
 The following code sample demonstrates the concept. The content of this component is inserted into the *MasterLayout* at the position of `@Body`:
 
-```csharp
+```cshtml
 @layout MasterLayout
+@page "/master-list"
 
-@page "/master-data"
-
-<h2>Master Data Management</h2>
-...
+<h2>Master Episode List</h2>
 ```
 
 ## Centralized layout selection
@@ -71,40 +48,38 @@ Note that the default template uses the *_ViewImports.cshtml* mechanism for layo
 
 Apps can consist of nested layouts. A component can reference a layout which in turn references another layout. For example, nesting layouts can be used to reflect a multi-level menu structure.
 
-The following code samples show how to use nested layouts. The *CustomersComponent.cshtml* file is the component to display. Note that the component references the layout `MasterDataLayout`.
+The following code samples show how to use nested layouts. The *EpisodesComponent.cshtml* file is the component to display. Note that the component references the layout `MasterListLayout`.
 
-*CustomersComponent.cshtml*:
+*EpisodesComponent.cshtml*:
 
-```csharp
-@layout MasterDataLayout
+```cshtml
+@layout MasterListLayout
+@page "/master-list/episodes"
 
-@page "/master-data/customers"
-
-<h1>Customer Maintenance</h1>
-...
+<h1>Episodes</h1>
 ```
 
-The *MasterDataLayout.cshtml* file provides the `MasterDataLayout`. The layout references another layout, `MainLayout`, where it's going to be embedded.
+The *MasterListLayout.cshtml* file provides the `MasterListLayout`. The layout references another layout, `MasterLayout`, where it's going to be embedded.
 
-*MasterDataLayout.cshtml*:
+*MasterListLayout.cshtml*:
 
-```csharp
-@layout MainLayout
+```cshtml
+@layout MasterLayout
 @inherits LayoutComponentBase
 
 <nav>
-    <!-- Menu structure of master data module -->
+    <!-- Menu structure of master list -->
     ...
 </nav>
 
 @Body
 ```
 
-Finally, `MainLayout` contains the top-level layout elements, such as the header, footer, and main menu.
+Finally, `MasterLayout` contains the top-level layout elements, such as the header, footer, and main menu.
 
-*MainLayout.cshtml*:
+*MasterLayout.cshtml*:
 
-```csharp
+```cshtml
 @inherits LayoutComponentBase
 
 <header>...</header>
diff --git a/aspnetcore/razor-components/layouts/sample_snapshot/3.x/MasterLayout.cshtml b/aspnetcore/razor-components/layouts/sample_snapshot/3.x/MasterLayout.cshtml
new file mode 100644
index 0000000000..6f991ece63
--- /dev/null
+++ b/aspnetcore/razor-components/layouts/sample_snapshot/3.x/MasterLayout.cshtml
@@ -0,0 +1,23 @@
+@inherits LayoutComponentBase
+
+<header>
+    <h1>Doctor Who&trade; Episode Database</h1>
+</header>
+
+<nav>
+    <a href="master-list">Master Episode List</a>
+    <a href="search">Search</a>
+    <a href="new">Add Episode</a>
+</nav>
+
+@Body
+
+<footer>
+    @TrademarkMessage
+</footer>
+
+@functions {
+    public string TrademarkMessage { get; set; } = 
+        "Doctor Who is a registered trademark of the BBC. " +
+        "https://www.doctorwho.tv/";
+}