zoukankan      html  css  js  c++  java
  • 012. MVC5中Razor引擎使用模板页

    1.文件→新建项目→框架选择.NET Framework 4.5

    2.确定后选择ASP.NET 4.5 模板→MVC→为以下项添加文件夹和核心引用→MVC, 在vs 2015中默认就使用的Razor引擎

    3. 创建好项目的主要目录(文件)解释:

    4. _Layout.cshtml主要注释:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - 我的 ASP.NET 应用程序</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("应用程序名称", "Index", "Home", new
               {
                   area = ""
               }, new
               {
                   @class = "navbar-brand"
               })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("主页", "Index", "Home")</li>
                        <li>@Html.ActionLink("关于", "About", "Home")</li>
                        <li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
                    </ul>
                    @Html.Partial("_LoginPartial")
                </div>
            </div>
        </div>
        <div class="container body-content">
            <!--使用@RenderBody()这种方式, 作为子页面填充区域; 这个可以作为母版页的第一个需要填充的区域;
                也就是说模板页的挖的第一个坑
                -->
            @RenderBody()
            <hr />
            <!--第一个参数字符串,在母版页中这个字符串可以随便定义, 但是在子页面中必须和此字符串保持一致; 其实在子页面中是可以点出来的
                , 第二个参数为true表示此部分必须在子页面中被填充; 也就是说如果为true, 则子页面必须将这个坑填上-->
            @RenderSection("leftTreeView", true);
            <footer>
                <p>© @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
            </footer>
        </div>
        <!--使用@Scripts.Render("~/bundles/jquery")这种方式, 作为子页面填充区域-->
        @Scripts.Render("~/bundles/jquery")
    
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>
    

     5. 添加一个自己的布局文件, 邮件Shared目录→添加→新建项→MVC→MVC5布局页(Razor):

    6. 自定义母版页中的填充项和子页面如何填充母版页

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
    </head>
    <body>
        <div>
            <!--必须填充的项-->
            @RenderBody()
        </div>
    
        <div>
            <!--第二个填充项, 这里设置为true, 也为必填项-->
            @RenderSection("floot", true)
        </div>
    </body>
    </html>
    
    子页面如何填充模板页

    @{

        ViewBag.Title = "Home Page";

        <!--由于MVC5所有页面都默认使用_Layout.cshtml页面作为默认的母版页, 所以

            可以在这个地方对其进行更改, 更改后此页面就会使用_MyLayout.cshtml这个页面作为母版页-->

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

    }

    <div class="row">

        <div class="col-md-4">

            <h2>Getting started</h2>

            <p>

                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that

                enables a clean separation of concerns and gives you full control over markup

                for enjoyable, agile development.

            </p>

            <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>

        </div>

    </div>

    <!--注意由于母版页发生了改变, 所以必须对母版页上所有定义了的, 并且为true的坑, 都要填充, 要不然就会报错

         节未定义:“floot”。

    说明: 执行当前 Web 请求期间,出现未经处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。

    异常详细信息: System.Web.HttpException: 节未定义:“floot”<div>@@RenderSection("floot", true)</div></body>

        -->

    @section floot{

        <p>我来填充自定义的floot</p>

  • 相关阅读:
    [bzoj1797] [Ahoi2009]Mincut 最小割
    [bzoj3343] 教主的魔法
    [bzoj3702] 二叉树
    [bzoj3809] Gty的二逼妹子序列
    JavaScript的面向对象原理之原型链
    javaScript操作DOM深入理解
    BOM浏览器对象模型
    JavaScript
    DAO模式
    使用ADO.NET访问数据库
  • 原文地址:https://www.cnblogs.com/wxylog/p/6414364.html
Copyright © 2011-2022 走看看