Master Page:
Master page is nothing but its showing look and feel among all the pages.
Steps to create master page :
1. Right Click on Share (Views/Share) folder. Share -> Add ->View
2. Then give the Master page name like (_MyLayout) and don't select any check boxes then click Add button.
Now master page created with name like _MyLayout.cshtml, following code get generated.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_MyLayout</title>
</head>
<body>
<div>
</div>
</body>
</html>
Use following code to change look and feel in _MyLayout.cshtml master page.
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
</style>
</head>
<body>
@RenderBody()
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>
</body>
</html>
Copy below code in Index.cshtml view page.
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_MyLayout.cshtml";
}
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin">Who Am I?</h3>
<img src="~/Images/bird.jpg" class="img-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350">
<h3>I'm an adventurer</h3>
</div>
<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin">What Am I?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
<!-- Third Container (Grid) -->
<div class="container-fluid bg-3 text-center">
<h3 class="margin">Where To Find Me?</h3><br>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="~/Images/birds1.jpg" class="img-responsive margin" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="~/Images/birds2.jpg" class="img-responsive margin" style="width:100%" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="~/Images/birds3.jpg" class="img-responsive margin" style="width:100%" alt="Image">
</div>
</div>
</div>
We can define master page 3 ways
1. if You globally define master page path in _ViewStart.cshtml page like this
Layout = "~/Views/Shared/_MyLayout.cshtml";
2. in case you want master page in Specific view pages you define like below in particular view pages.
Layout = "~/Views/Shared/_MyLayout.cshtml";
3. in case you don't want any master page for particular page you define like below.
Layout = null;
Sections:
Sections are used to render a part of potion of contain place.
Sections are normally define in view pages.
Copy the below code and paste in Index.cshtml page
@section Mysection
{
<ul>
<li>Supriya</li>
<li>Govind</li>
<li>Sahil</li>
</ul>
}
Now we define section in Master page (_MyLayout.cshtml)
After the body before rendering the view you just define a section like this
<body>
@RenderSection("Mysection");
@RenderBody()
</body>
if you go another view page u got an error like section not define : "Mysection"
so, we can define like this
<body>
@RenderSection("Mysection",false);
@RenderBody()
</body>
in case you want to see the section, change from false to true(@RenderSection("Mysection”) ;) then place MySection code in particular view pages.
How to check Section is define or not in Layout page is like below:
if(@IsSectionDefined("Mysection"))
{
@RenderSection("Mysection");
}
else
{
@RenderSection("Mysection",false);
}
Very good content
ReplyDeleteVery good and well explained.
Delete