MVC的布局页,视图布局页和分布页的使用

一,结构如下图

二,布局页和视图布局页

1》使用方法一

_ViewStart.cshtml

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

<h2>视图布局页_ViewStart.cshtml</h2>

_Layout.cshtml

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
    <h2>布局页_Layout.cshtml</h2>
        @RenderBody()
    </div>
</body>
</html>

综上:

1》当使用这种写法时:若视图布局页_ViewStart.cshtml不存在或者Layout = "~/Views/Shared/_Layout.cshtml";指向的页面错误,都会造成视图的布局页(_Layout.cshtml)使用失败

2》但是视图布局页_ViewStart.cshtml本身的样式等一样应用全局,并没有失效

2》使用方法二(不使用视图布局页_ViewStart.cshtml)

_LayoutNew.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @RenderSection("Head", false)
</head>
<body>
    <div>
        <h2>
            布局页_LayoutNew.cshtml</h2>
        @RenderSection("Main", false)
    </div>
</body>
</html>

hz.cshtml使用模板

@{
    Layout = "~/Views/Shared/_LayoutNew.cshtml";
}
@section Head{}
@section Main{
    <h2>
        hz页面使用_LayoutNew.cshtml模板</h2>
}

即:这样应用模板一样可以成功,在这里需要注意的是@section Head{}@section Main{}名字需要和布局页定义的一样

三,分部页的使用(不需要创建action,使用简单 )

Index.cshtml

<h2>Index页面</h2>

@Html.Partial("_PartialView")

不需要使用控制器(Controllers)和方法(action),直接可以使用这个页面的元素

时间: 2024-11-08 22:27:09

MVC的布局页,视图布局页和分布页的使用的相关文章

MVC教程八:母版页(布局页)视图

一.母版页介绍和使用 母版页的扩展名为".cshtml",也叫做视图布局页,它相当于网页的模板.在其他网页中,只要引用了母版页,母版页的页面内容就可以自动显示出来,设计者可以修改引用的母版页中预留的部分,其他部分保持不变,这样就可以使多个页面的风格保持一致,给网页设计带来了很大的方便. 1.创建母版页视图的要点 (1).在Views的子文件夹Shared文件夹里面添加. (2).以"_"前缀作为开头. (3).以"Layout.cshtml"作为

Asp.net MVC]Asp.net MVC5系列——布局视图

目录 系列文章 概述 布局视图 系列文章 [Asp.net MVC]Asp.net MVC5系列--第一个项目 [Asp.net MVC]Asp.net MVC5系列--添加视图 [Asp.net MVC]Asp.net MVC5系列--添加模型 [Asp.net MVC]Asp.net MVC5系列--从控制器访问模型中的数据 [Asp.net MVC]Asp.net MVC5系列--添加数据 [Asp.net MVC]Asp.net MVC5系列--在模型中添加验证规则 [Asp.net M

等高列布局、水平垂直居中与置顶页脚(转载)

等高列布局 在<八种创建等高列布局>一文中详细介绍了八种创建等高列布局的不同方法.可以说这些方法足以满足你的业务需求,当然其中有一些方法略为繁琐,也有时转得人头晕.在今天这种技术环境之下,如果的业务对IE低版本依赖性不是非常强的情况之下,可以考虑一些新的方法来实现.接下来我与大家一起探讨几种新方法实现等高列布局. Flexbox方式 Flexbox是一个强大而又神奇的CSS3模块,而且到现在,也得到众开浏览器的支持.有了这个模块,可以帮助我们做很多事情,而且较之以前的方案要更简单,唯一蛋疼的是

关于唯典冰淇淋新闻页的布局

关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局关于唯典冰淇淋新闻页的布局 //绝对定位,脱离文档流,以窗口文档左上角 0,0 为起点 header { position: absolute; top: 100px; left: 100px;} 所谓脱离文档流的意思,就是本身这个元素在文

ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图

在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器和PC设备浏览器进行自适应.针对布局页面,默认的文件名为_Layout.cshtml,这个默认会被所有的浏览器使用.但如果我们希望在移动设备上面,呈现一个不同的布局,只需要添加一个名称为_Layout.Mobile.cshtml的布局页面就可以了.同样的规则,也适用于普通的视图页面.例如Index.cshtm

使用Reveal分析其他App的视图布局

使用Reveal分析其他App的视图布局 我们有时候可能不知道怎么怎么布局视图,这个时候我们就会想要去参考相似的其他App的界面布局,那么我们就可以使用Reveal来进行布局分析. (一)越狱安装OpenSSH和Cydia substrate 查看他人App时需要将手机越狱,越狱的方法这里就不仔细讲了,大家搜索一下就行.越狱成功后就能看见这个安装好的软件Cydia软件,启动Cydia软件,第一次启动需要更新一下软件源.在Cydia软件里下载安装OpenSSH和Cydia substrate (二

视图布局约束 VFL

约束规则如下: 使用规则 |: 表示父视图 -:表示距离 V:  :表示垂直 H:  :表示水平 >= :表示视图间距.宽度和高度必须大于或等于某个值 <= :表示视图间距.宽度和高度必须小宇或等于某个值 == :表示视图间距.宽度或者高度必须等于某个值 @  :>=.<=.==  限制   最大为  1000     优先级 1000最大 1.|-[view]-|:  视图处在父视图的左右边缘内 2.|-[view]  :   视图处在父视图的左边缘 3.|[view]   : 

学习笔记(二)——MVC扩展(渲染视图)

如何渲染视图? 我以近乎的视图引擎为例总结了一下,近乎中的ThemedViewEngine类,就是重写后的的视图引擎.ThemedViewEngine类主要对FindPartialView和FindView这两个方法进行了重写.并且将View,PartialView和layout的定位也进行了重写.(http://c.jinhusns.com/cms/c-3256/?type=xcj) 这是FindPartialView方法,它的作用就是查找分布页并将其渲染并显示出来. presentAreaK

约束布局ConstraintLayout加快布局速度

Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout. 简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件之间的关系. 它能让你的布局更加扁平化,一般来说一个界面一层就够了:同时借助于AS我们能极其简单的完成界面布局. ConstraintLayout简介? ConstraintLayout的优点非常突出. ConstraintLayout不需要使用嵌套布局就可以让我们去构建一个大而复杂的布局, 他与Re