Sunday, April 26, 2020

Layout View and Viewstart in Asp.Net MVC


Layout View in asp.net MVC tutorials

Layout View in asp.net MVC is the same as a master page in asp.net webforms. which means, it is the common UI throughout the application. and no need to write the code for every page. just we can use this layout view where ever we want to use as a common UI on that page.


by default, asp.net MVC creates _Layour.cshtml file inside the shared folder in Views.
it has  main rendering methods in view is RenderBody() and RenderSection().


 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - All Tech Geeks</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>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - All Tech Geeks</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>


In the above .cshtml file, we can find the system-defined methods and HTML helper methods.
The system-defined methods are
    1.   @RenderBody() 
    2.  @RenderSection("scripts", required: false)
    3. @Scripts.Render("~/bundles/jquery")  
The HTML Helper methods are:
    1.   @Html.Partial("_LoginPartial")   
    2.   @Html.ActionLink("Home""Index""Home")
RenderBody() :
  1.  it renders the associated view at the response in the browser. 
  2. it must present on the Layout page.
  3. multiple RenderBody() methods not allowed in the single layout page

RenderSection() 

  1. it is not mandatory on the layout page.
  2. RenderSection method renders the part of the child view 
  3. RenderSection method runs code blocks you define in your content pages.
  4. multiple RenderSection() methods allowed in a single layout page.
  5. RenderSection method expects one parameter and it is the name of the section. If we don’t give that, an exception will be thrown. 

The important area is _Viewstart.cshtml. after designing the out layout page immediately we need to add the code inside Viewstart.cshtml. as shown below snippet.


     @{
    Layout = "~/Views/Shared/_Layout.cshtml"
    }











No comments: