Layout布局

最新推荐文章于 2020-10-22 21:03:09 发布

dengkecou4635

最新推荐文章于 2020-10-22 21:03:09 发布

阅读量183

点赞数 1

文章标签： javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/maoyazhi/p/5946455.html

版权

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()

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

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

<a href="Products/Detail">all</a>
@Html.ActionLik("linkText", "actionName", routeValues)

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

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

此处假设当前的控制器是Products.
@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"。
@Html.ActionLink("linkText", "actionName", "controlName", routeValues, htmlAttributes)

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

转载于:https://www.cnblogs.com/maoyazhi/p/5946455.html

dengkecou4635

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layout布局

Layoutlayout方式布局就是相当于一个模板一样的，相当于定义好了框架，作为一个母版页的，使用布局或母版页的好处是，我们不需要在每个视图中都设置一份相同的内容，在它下面的页面需要修改不同代码的地方使用@RenderBody()方法。<!DOCTYPE html><html lang="en"> <head>...
复制链接

扫一扫