MVC: Using Layout View Options

Sample Site Repo

This document references a Repo found on GitHub at:

• Supporting Repo (https://github.com/mustbebuilt/mvc-techniques-demo)

Fork or Clone the Repo to experiment locally with the Project in Visual Studio.

The Default Shared _Layout

Web pages should have a consistent look and feel. One of the key ways this is achieved with ASP.net MVC is through the _layout.cshtml page.

By default the Views/Shared/_layout.cshtml provides a template that all Views will use. The HTML content of any given View is inserted into the template via the @RenderBody() command.

This provides a great starting point allowing for a _layout.cshtml page to be developed with a common skeleton HTML layout including references to CSS and Javascript files. This is exactly what the starter project provides via the popular Bootstrap CSS Framework.

Partials

The default provides a great starting point, however only been able to change the content of a page in one large chunk allocated to @RenderBody() has its limitations.

One way to increase flexibility is to use Partials. A Partial is a View created and stored in Views/ that can hold a chunk of content to be optionally used in a given View.

In the sample files locate Views/Shared/_Footer.cshtml

The above Partial can be added to View. Open the file Views/Home/LayoutDemo.cshtml and you'll see the the Tag Helper used to insert the Partial into the View.

Note: Tag Helpers are non-standard tags that are understood and rendered by the View.

RenderSection

An option that can be used instead of (or indeed in combination with partials) is @RenderSection().

Any given layout can optionally reference one or more sections via @RenderSection().

Note: Content from @RenderSection does not break the into the @RenderBody() called content. A @RenderSection is used to optionally add content before or after that called by @RenderBody().

A common use-case is to use @RenderSection to add flexibility to the Javascript files referenced by a View.

In the sample files locate Views/Shared/_Layout.cshtml which includes a @RenderSection.

The above places an optional @RenderSection named 'MyScripts' into the Layout template.

In any View that makes use of the _layout.cshtml this @RenderSection can be referenced. In the sample file Views/Home/LayoutDemo.cshtml the @Section Razor command is used to load the optional section and place a Javascript link into it (in this case a little JS Clock Script).

As hinted above the @RenderSection maybe used to reference a Partial. There is an example of this technique in the Visual Studio Bootstrap based starter proejct.

Alternative Layouts

There is no need to stick to one layout. Alternatively layouts can be created and then applied to a View when needed.

In the sample files there is an alternative layout file Views/Shared/_AlternativeLayout.cshtml that references a different CSS file and has a simpler layout.

This can then be used in a View. Open the sample file Views/Home/SecondLayoutDemo.cshtml

This references the alternative layout in the Razor View though the Layout property. (The default value would be _Layout.)

Challenge: Try creating your own alternative layout file and attach it to a View.

Components

Components offer a more sophisticated versions of Partials. They allow for business logic related to the content to be isolated from the other logic of a view.

A Component requires:

• A ViewComponent class to be created in the /ViewComponents/ folder with the convention of {View Component Name}ViewComponent.cshtml.
• A View to be created to match the ViewComponent at Views/Shared/Components/{View Component Name}/{View Name} location.
• The View using the Component invokes it.

In the sample files ViewComponents/WishListViewComponent.cs represents a basic ViewComponent.

In this basic example the ViewComponent merely stores one variable.

In the sample files a View was created following the convention of Views/Shared/Components/{View Component Name}/{View Name} at Views/Shared/Components/WishList/Default.cshtml.

Finally, in the sample file View Views/Home/index.cshtml the Component is invoked as follows: