ASP.NET MVC-Master Page and Custom Potholes

1. Introduction to the effect of Razor master page The
Rezor motherboard page framework (hereinafter referred to as "master page") function is very easy to use, we can only write the content of the current page , and then the main content can be loaded into the Layout property. The designated Razor motherboard page realizes the shared layout.
Insert picture description here


1. Usage syntax of Razor master page

Layout="~/path/_Layout.cshtml"

2. "Prevent potholes, named potholes"
in the template page is similar to the general Razor grammar, with two more special grammars-@RenderBody() and RenderSection(), which is the so-called "pothole declaration".

  • @RenderBody() on the Razor motherboard page can also be regarded as a " preset pothole ", which means that the main (quoting party) page will be filled in without a statement (Section Say {*** }) The RenderBody() position is the so-called preset pothole.
  • @RenderSection(): We declare a hole named "left" in the motherboard page, and the second required named parameter is to declare that the hole must be filled (true false) , and all the View pages loaded on the motherboard page must enter the corresponding input Content, otherwise an exception will occur.
  • On the View page, use the syntax of @Section left {} so that the code block will be loaded into the specified content area on the motherboard page.

Razor page execution order:

The Razor page has a fixed execution order, which is mainly to execute the View first, and then execute the Layout main page.


View-DEMO


@{
    
    
    ViewBag.Title = "Index";
    //Layout = "~/Views/Shared/_Layout.cshtml";

}
<div>
    <!--这里写的都会渲染到母版页的body内容处-->
    <h2>Index</h2>
    <h1>子页面</h1>
</div>


@section SayHi{
    
    
    <h1>自定义窟窿填补</h1>
}

@section SayHellow{
    
    
    
    <h3>不强制填补的窟窿</h3>    
    
}

Layout master page (master page)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</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>
                    <span class="icon-bar"></span>
                    <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">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <h1>母版页编写</h1>
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

     @*手动创建一个窟窿--子页面必须渲染的*@
    @RenderSection("SayHi", true) 
    @RenderSection("SayHellow", false)




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

Guess you like

Origin blog.csdn.net/MrLsss/article/details/106650096