Introduction:

Here we will explain to what is a Layout View in mvc asp.net .how to use layout view in mvc asp.net when we need to use layout view in mvc asp.net. Create header, footer ,

Left panel by using layout view in mvc asp.net with Example.

Description:

Layout is the same as ASP.NET web form application Master page. When we need to more than one page contain common UI parts in our application such as the logo, heder, footer,Left navigation bar, right bar section in that case we should use to layout page in mvc application.

Layouts as shown in the fig.

What is Layout in mvc

Layout Code

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>@ViewBag.Title - My ASP.NET MVC Layout tutorials</title>

    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />


    <meta name="viewport" content="width=device-width" />

    @Styles.Render("~/Content/css")


    @Scripts.Render("~/bundles/modernizr")

</head>

<body>

    <header>

        <div class="content-wrapper">

            <div class="float-left">

               <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>

            </div>

            <div class="float-right">                

                <nav>

                    <ul id="menu">

                        <li>@Html.ActionLink("Home", "Index", "Home")</li>

                        <li>@Html.ActionLink("About", "About", "Home")</li>

                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

                    </ul>

                </nav>

            </div>

        </div>

    </header>

    <div id="body">

        @RenderSection("featured", required: false)

        <section class="content-wrapper main-content clear-fix">

            @RenderBody()

        </section>

    </div>

    <footer>

        <div class="content-wrapper">

            <div class="float-left">

                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Layout tutorials</p>

            </div>

        </div>

    </footer>

    @Scripts.Render("~/bundles/jquery")

    @RenderSection("scripts", required: false)

</body>

</html>

In this layout code, we are using an HTML helper method and system defined methods so let's see these methods one by one.

Url.Content(): method is a method of UrlHelper class  its specifies the path of any file that we are using in our View code. It takes the virtual path as input and returns application absolute path.

Html.ActionLink(): it is an extension method of the HtmlHelper class.it is Used to render HTML links that links to a controller action . The first parameter takes display name, the second parameter takes the Action name and the third parameter takes the Controller name.

RenderSection(): this is a method of the WebPageBase class. "RenderSection()" helper method Specifies the name of section that we want to display at that location in the template.

RenderBody(): RenderBody() Renders the actual body of the each associated View. 

ViewStart.cshtml

_ViewStart.cshtml set default layout page of a view.

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

Now we create home controller.

namespace MvcApplication1.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        } 

    }

}


After creating home controller we add a view index.cshtml

@{

    ViewBag.Title = "index";

}

<h2>index</h2>

Finally run application and show output.


What is Layout in mvc


0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like