We will learn Layout views in MVC 5 and create Layout View using the default template in MVC 5. Also, we will learn about using the same Layout View in different view pages in ASP.NET MVC 5 with examples.
In this article, you will learn the following points about Layout Views in MVC 5.
- What is Layout View in MVC 5?
- How to create Layout View using the default template in MVC 5?
- How to use same Layout View in different view pages in MVC 5
- How to use Partial View in Layout view?
Following are the previews two articles on ASP.NET MVC 5
- Layout view is used for providing common look for all the different view pages.
- Layout view is the same as a master page in asp.net web application.
- The layout view extension is “.cshtml” and It uses the Razor view engine.
- Layout View can contain “HTML” and “C#” code.
- While creating layout page prefix should be “_” and view name.
How to create Layout View using the default template in MVC 5?
Steps to create Layout View using the default template in MVC 5
Step 1:
First, create an ASP.NET MVC application using Visual Studio 2017 and provide the name “MVC5LayoutDemo”.
Step 2:
Go to solution explorer => Views Folder => Right-click on “Shared” Folder >> go to “Add” >> Click on [New Item] as follow.
Step 3:
Select “MVC 5 Layout Page(Razor)” template and provide the required name like “_LayoutProduct” click on “Add” button.
Default code generated for _Layout View in MVC 5 default template as follow.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Add code for custom header and footer in layout view page as per our requirement.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
</head>
<body>
<div class="row" style="background-color:azure;">
This is custom header.
</div>
<div>
@RenderBody()
</div>
<div class="row" style="background-color:goldenrod;">
This is custom footer.
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
How to use same Layout View in different view pages in MVC 5
Create two new views using layout view and view name as “Product.cshtml” and “Order.cshtml” view.
Steps to create a view using the layout view.
Step 1:
Go to solution explorer => Views Folder => Right-click on “Home” Folder >> go to “Add” >> Click on [New Item] as follow.
Step 2:
Select "MVC 5 View page with Layout(Razor)" template and provide the required name like "Product.cshtml" and click on "Add" button as follow.
Step 3:
select "_LayoutProduct.cshtml" from "Shared" folder in Project folders on the Layout page window and click on the "Ok" button as follow.
Html code for Product.cshtml view as follow.
@{
Layout = "~/Views/Shared/_LayoutProduct.cshtml";
}
<h3>Product Detail </h3>
<table class="table table-responsive table-bordered table-striped">
<thead>
<tr class="btn-primary">
<th>ProductId</th>
<th>Product Name</th>
<th>Quantity</th>
<th>OrderId</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>ASP.NET MVC 5 BOOK</td>
<td>2</td>
<td>001</td>
</tr>
<tr>
<td>101</td>
<td>ASP.NET Core BOOK</td>
<td>2</td>
<td>002</td>
</tr>
</tbody>
</table>
Create Product action method in Home controller as follow.
public ActionResult Product()
{
return View();
}
Output:
Create “Order.cshtml” view to follow the above steps and added the following code in order view.
@{
ViewBag.Title = "Order";
Layout = "~/Views/Shared/_LayoutProduct.cshtml";
}
<h2>Order Detail</h2>
<table class="table table-responsive table-bordered table-striped">
<thead>
<tr class="btn-primary">
<th>OrderId</th>
<th>Order Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>ASP.NET MVC 5 BOOK</td>
</tr>
<tr>
<td>002</td>
<td>ASP.NET Core BOOK</td>
</tr>
</tbody>
</table>
Create Order action method in Home controller as follow.
public ActionResult Order()
{
return View();
}
Output:
References:
I hope you understand the concepts of layout view in ASP.NET MVC 5
Thanks for reading.
0 comments:
Post a Comment