MVC 9 Site Layout

Creating a MVC Layout page
The final step for using Bootstrap 4 in your ASP.NET MVC project is to create a Layout
page that will contain all the necessary CSS and JavaScript files in order to include
Bootstrap components in your pages. To create a Layout page, follow these steps:
1. Add a new sub folder called Shared to the Views folder.
2. Add a new MVC View Layout Page to the Shared folder. The item can be
found in the .NET Core | Server-side category of the Add New Item dialog.
3. Name the file _Layout.cshtml and click on the Add button:
4. With the current project layout, add the following HTML to
the _Layout.cshtml file:

Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="~/css/bootstrap.css" />
</head>
<body>
@RenderBody()
<script src="~/lib/jquery/dist/jquery.js"></script>
...
Another example
You need to create a new empty ASP.NET MVC 5 project, and added a new
folder Shared in View and new file _Layout.cshtml and put this code to that (for
example )
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>@ViewBag.Title</title>
<script src="@Url.Content("~/Content/style.css")"></script>
</head>
<body>
@RenderBody()
</body>
</html>
and now when I add new view for a controller it doesn't detect it as master page
automatically as well as Basic Template
@{
ViewBag.Title = "AboutUs";
}
<h2>AboutUs</h2>
it doesnt get _Layout.cshtml file as master page until I set that manually with Layout
= "~/Views/Shared/_Layout.cshtml";
you need a _ViewStart.cshtml in your Views folder which should have the following
in it:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
The layout view is same as the master page of the ASP.NET
webform application.
For example, an application UI may contain Header, Left menu bar,
right bar and footer section that remains same in every page and
only the centre section changes dynamically as shown below.
Sample Application UI Parts
The layout view allows you to define a common site template, which
can be inherited in multiple views to provide a consistent look and
feel in multiple pages of an application. The layout view eliminates
duplicate coding and enhances development speed and easy
maintenance. The layout view for the above sample UI would
contain a Header, Left Menu, Right bar and Footer sections. It
contains a placeholder for the center section that changes
dynamically as shown below.
Layout View
The razor layout view has same extension as other views, .cshtml
or .vbhtml. Layout views are shared with multiple views, so it must
be stored in the Shared folder. For example, when we created
our first MVC application in the previous section, it also created
_Layout.cshtml in the Shared folder as shown below.
Layout Views in Shared Folder
The following is an auto-generated _Layout.cshtml.
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new {
area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
As you can see, the layout view contains html Doctype, head and
body as normal html, the only difference is call to RenderBody() and
RenderSection() methods. RenderBody acts like a placeholder for
other views. For example, Index.cshtml in the home folder will be
injected and rendered in the layout view, where the RenderBody()
method is being called. You will learn about these rendering
methods later in this section.
Use Layout View

You must be wondering that how would the View know which layout
view to use?
You can set the layout view in multiple ways, by using
_ViewStart.cshtml or setting up path of the layout page using
Layout property in the individual view or specifying layout view
name in the action method.
_ViewStart.cshtml
_ViewStart.cshtml is included in the Views folder by default. It sets

up the default layout page for all the views in the folder and its
subfolders using the Layout property. You can assign a valid path of
any Layout page to the Layout property.
For example, the following _ViewStart.cshtml in the Views folder,

sets the Layout property to "~/Views/Shared/_Layout.cshtml". So
now, _layout.cshtml would be layout view of all the views included
in Views and its subfolders. So by default, all the views derived
default layout page from _ViewStart.cshtml of Views folder.
_ViewStart.cshtml
_ViewStart.cshtml can also be included in sub folder of View folder

to set the default layout page for all the views included in that
particular subfolder only.
For example, the following _ViewStart.cshtml in Home folder, sets

Layout property to _myLayoutPage.cshtml. So this
_ViewStart.cshtml will influence all the views included in the Home
folder only. So now, Index, About and Contact views will be
rendered in _myLayoutPage.cshtml instead of default
_Layout.cshml.
Layout View
Setting Layout property in individual view
You can also override default layout page set by _ViewStart.cshtml

by setting Layout property in each individual .cshtml view. For
example, the following Index view use _myLayoutPage.cshtml even
if _ViewStart.cshtml set _Layout.cshtml.
Index View:
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web
sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more
»</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build
dynamic websites that
enables a clean separation of concerns and gives you full
control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default"
href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more
»</a></p>
</div>
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to
add, remove, and update libraries and tools in Visual Studio projects.</p>
»</a></p>
</div>
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right
mix of features and price for your applications.</p>
»</a></p>
</div>
</div>
Basically IF we have master layout in Views>> Shared >> _Layout.cshtml and this
thing is defined in _ViewStart.cshtml that which one is our default master layout.
When we create a view with master layout by default its master layout
is _Layout.cshtml, but we can change it from _ViewStart.cshtml
When we write:
@{
Layout = null;
}
in our view we say that this view does not have any master layout, this is used
when we create partial view mostly or a standalone view without master layout.
If you open _ViewStart.cshtml by default it has this written in it:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
and we can change it if we want to.
You can also change of some specific view Master Layout by writing on top of it
the url of master layout view:
@{
Layout = "~/Views/Shared/_CustomMasterLayout.cshtml";
}

MVC 9 Site Layout

Uploaded by

Copyright:

Available Formats

MVC 9 Site Layout

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MVC 9 Site Layout

Uploaded by

Copyright:

Available Formats

Creating a MVC Layout page

1. Add a new sub folder called Shared to the Views folder.

3. Name the file _Layout.cshtml and click on the Add button:

4. With the current project layout, add the following HTML to

the _Layout.cshtml file:

Sample Application UI Parts

Layout Views in Shared Folder

The following is an auto-generated _Layout.cshtml.

Use Layout View

_ViewStart.cshtml is included in the Views folder by default. It sets

For example, the following _ViewStart.cshtml in the Views folder,

_ViewStart.cshtml can also be included in sub folder of View folder

For example, the following _ViewStart.cshtml in Home folder, sets

Setting Layout property in individual view

You can also override default layout page set by _ViewStart.cshtml

If you open _ViewStart.cshtml by default it has this written in it:

You might also like