zoukankan      html  css  js  c++  java
  • Layout布局

    Layout

    layout方式布局就是相当于一个模板一样的,相当于定义好了框架,作为一个母版页的,使用布局或母版页的好处是,我们不需要在每个视图中都设置一份相同的内容,在它下面的页面需要修改不同代码的地方使用@RenderBody()方法。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8"/>
            <title>我的网站 - @Page.Title</title>
        </head>
        <body>
            @RenderBody()
        </body>
    </html>

    子页面中:

    @{
        Layout = "/LayoutPage.cshtml";
        Page.Title = "测试页面哦";
    }
    
    <p>This is a layout test</p>

    前面我们在创建View的时候,我们勾选了使用布局或母版页,但是我们没有告诉vs使用哪一个,默认即是空的。在项目的Views文件中,我们可以看到一个_ViewStart.cshtml文件,里面的内容是:

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

    MVC呈现视图的时候,默认情况下会自动查找_ViewStart.cshtml文件,以它作为母版来呈现用户请求的视图。母版的呈现是MVC内部处理的,这种以下划线(_)开头的视图文件,一般是不能直接返回给用户。

    如果创建一个视图不想使用Layout,则可以在创建视图的对话框取消“使用布局和母版页”选项,创建后会生成如下代码:

    @{ Layout = null; } 
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>About</title>
    </head>
    <body>
        <div>
            
        </div>
    </body>
    </html>

    由于没有使用Layout,视图中必须包含用于呈现HTML页面每个基本元素,而且必须指定Layout=null。

    Page

     page是当需要在一个页面中,输出另外一个razor文件的内容时候用到,比如头部或者尾部这些公共的内容时候需要用到。输出就使用 @RenderPage()方法

    如:A页面中也要把B页面的内容输出

    A页面:

    <p>
        @RenderPage("/b.cshtml")
    </p>

    B页面:

    <font color="red">这是一个子页面</font>

    Section区域

     RenderSection是定义在Layout的中使用的,可以理解成是为了定义该母版页公共部分,但是其子页面有例外,这时可以使用RenderSection来定义;

    使用方法是在在要Layout的父页面中使用@RenderSection("Section名称 ",required: false),第一个参数是section的名称,第二个参数是来定义是否所有的子页面都需要定义这个section,定义显示,没有定义则不显示;

    定义:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8"/>
            <title>我的网站 - @Page.Title</title>
        </head>
        <body>
            @RenderSection("sideMenu",required: false)
            @RenderBody()
        </body>
    </html>

    在它的子页面中:

    @section sideMenu{
        Hello This is a section implement in About View.
     }

    css/js文件引用

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    上面几行加载 css 和 js 文件,这些文件在 App_Start  > BundleConfig.cs 中指定:

    public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.validate*"));
    
                // 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
                // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js",
                          "~/Scripts/respond.js"));
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css"));
    
                // 将 EnableOptimizations 设为 false 以进行调试。有关详细信息,
                // 请访问 http://go.microsoft.com/fwlink/?LinkId=301862
                BundleTable.EnableOptimizations = true;
            }

    @HTML

    @Href("~/")

    表示网站的根目录

    @Html.Raw(Module.Content)

    @Html.Raw(Module.Content)  输出HTML;如:@Html.Raw('<font color='red'>红字</font>'),就会显示出红色的”红字“;

    @Html.Action(action, controller)

    加载局部页面。例如在模板页中使用:@Html.Action("Contact", "Company")

    在CompanyController中有如下方法:

    public PartialViewResult Contact(){

       return PartialView();
    }

    @Html.Partial("PartialViewName")

    @Html.Partial("PartialViewName"):输出一个Partial视图

    我的理解是把内容分块进行分割;

    @Html.ActionLink()

    1. @Html.ActionLink("linkText", "actionName")
      该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法
      默认控制器为当前页面的控制器,如果当前页面的控制器为Products,则 Html.ActionLink("detail","Detail")
      则会生成 <a href="/Products/Detail">all</a>
       

    2.  @Html.ActionLink("linkText", "actionName", "controlName")

      该重载比第一个重载多了一个参数,他指定了控制器的名称,

      如Html.ActionLink("detail","Detail","Products")则会生成

      <a href="Products/Detail">all</a>
       

    3. @Html.ActionLik("linkText", "actionName", routeValues)

      routeValue可以向action传递参数,如Html.ActionLink("detail","Detail", new { id=1})

      会生成 <a href="Products/Detail/1">detail</a>,

      此处假设当前的控制器是Products.
       

    4.  @Html.ActionLink("linkText", "actionName", routeValues, htmlAttributes)

      htmlAttribute可以设置<a>标签的属性,

      如 Html.ActionLink("detail","Detail", new{id=1}, new{ target="_blank"})

      会生成 <a href="Products/Detail/1" target="_blank">detail</a>,

      需要主要的是如果写成 new{ target="_blank", class="className"}则会报错,

      因为class是关键字,此处应该写成 @class="className"。
       

    5. @Html.ActionLink("linkText", "actionName", "controlName", routeValues, htmlAttributes)

      该重载包含了上面提到的所有参数类型。

  • 相关阅读:
    mysql 实战 or、in与union all 的查询效率
    转:手机流畅的决定性因素
    合批只是对CPU的优化,与GPU没有任何关系
    UNITY 打包时提示sdk tools 或 sdk build tools版本低时可以直接点update 按钮进行更新
    RGB ECT 4BIT 压缩后质量远高于RGB ETC2 4BIT
    Adreno GPU Profiler
    UNITY2018.3 在editor下运行时new memoryprofiler显示 shader占用内存很大的问题在安卓上并没有看到
    VS2017断点调试UNITY2018.3 经常卡住的问题
    一次UNITY闪退问题的定位心得
    UNITY2018 真机开启deepprofiling的操作
  • 原文地址:https://www.cnblogs.com/maoyazhi/p/5946455.html
Copyright © 2011-2022 走看看