Learn C#.NET, ASP.NET MVC 5,ASP.NET Core that you can increase your knowledge and coding to develop the real-time project.

Wednesday, September 4, 2019

Layout View In ASP.NET MVC 5

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.
Layout View in ASP.NET MVC 5



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

What is Layout View in 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 .cshtmland It uses the Razor view engine.
  • Layout View can contain HTMLand 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”.

Layout View in ASP.NET MVC 5


Step 2:
Go to solution explorer => Views Folder => Right-click on “Shared” Folder >> go to “Add” >> Click on [New Item] as follow.

Layout View in ASP.NET MVC 5

Step 3:
Select “MVC 5 Layout Page(Razor)” template and provide the required name like “_LayoutProduct” click on “Add” button.

Layout View in ASP.NET MVC 5


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.

Layout View in ASP.NET MVC 5


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.
Layout View in ASP.NET MVC 5


Step 3:
select "_LayoutProduct.cshtml" from "Shared" folder in Project folders on the Layout page window and click on the "Ok" button as follow.
Layout View in ASP.NET MVC 5

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:
Layout View in ASP.NET MVC 5


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:
Layout View in ASP.NET MVC 5

References:

I hope you understand the concepts of layout view in ASP.NET MVC 5
Thanks for reading.


More detail watch follow video on Layout View In ASP.NET MVC 5:



Share:

0 comments:

Post a Comment

Upcoming Articles/Videos

Design Pattern
SOLID Design Principles
Copyright © Programming With Shri | Powered by Shrimant Telgave Home | Disclaimer | Privacy Policy | Terms and Conditions Design by Shrimant Telgave