MVC系列-4.布局页

分部视图和布局页的使用

1.创建分部视图

1)右击“~/Views/Shared”文件夹,选择添加->视图。

输入View 名称”Footer”,选择复选框“Create as a partial view”,点击添加按钮。

注意:View中的Shared 共享文件夹是为每个控制器都可用的文件夹,不是某个特定的控制器所属。

2)打开Footer.cshtml,输入以下HTML 代码。

<div >

<nav class="navbar navbar-default">

<ul class="nav navbar-nav navbar-right">

<li><a href="#">版权所有@cheng</a></li>

</ul>

</nav>

</div>

3)打开Login.cshtml 文件,在表单DIV 标签后显示Footer 分部View,如下:

4)运行

2.创建布局页面

右击views--shared文件夹,选择添加>>MVC5 Layout Page。输入名称”MyLayout“,点击确认。自动产生代码。

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>@ViewBag.Title</title>

</head>

<body>

<div>

@RenderBody()

</div>

</body>

</html>

3. 设计布局页面

在布局页面添加页眉,页脚和内容,内容,三部分,如下:

打开http://v3.bootcss.com/components/#nav ,拷贝并根据需要改造导航条

如上所示,布局页面包含三部分,TitleSection, HeaderSection 和 ContentBody,内容页面将使用这些部分来定义合适的内容。

4.改造设计Index 的View

在Body标签中复制保留的内容,并存放在某个地方。

复制Title标签中的内容

移除View中所有的HTML 内容,确保只移动了HTML,@model 且没有移动layout语句

在复制的内容中定义TitleSection和 Contentbody

5.运行index

6.用上述方法改造注册页面Register.cshtml

7.AccountController里新建一个action命名为Detail

8.利用我们新建的布局页为Detail添加view

自动生成代码:

9.仿照index改造detail

运行效果如下

时间: 2024-10-04 01:04:41

MVC系列-4.布局页的相关文章

MVC学习系列5--Layout布局页和RenderSection的使用

我们开发网站项目的时候,都会遇到这样的问题:就是页面怎么统一风格,有一致的外观,在之前ASP.NET的时代,我们有两种选择,一个是使用MasterPage页,一个是手动,自己在每个页面写CSS样式,但这样代码量太大了..不可取,那么到了ASP.NET MVC时代,有什么技术可以统一页面风格呢???有,那就是Layout布局视图.下面就开始学习吧. 1. 首先使用空模板,新建一个MVC Web项目: 新建完成之后,初始化状态是: 2.接着在根目录[LayoutMVC这里是]下,新建一个文件夹[Co

MVC之LayOut布局页

LayOut布局页,就是相当于WebForm中母版页,实现了一个代码的共用和公共布局的作用. 布局页的使用 (1)添加新项,选择MVC布局页 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head>

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

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

ASP.Net MVC 布局页 模板页 使用方法详细说明

一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过_Layout.cshtml布局页面的@RenderBody()方法呈现在标签之间. @RenderPage从名称可以猜出来这个方法是要呈现一个页面.比如网页中固定的头部可以单独放在一个共享的视图文件中,然后在布局页面中通过这个方法调用,用法如下:@RenderPage(“~/

ASP.NET MVC在布局页上使用模型(model)

看到这标题有点怪,一般情况之下,我们很容易在视图与部分视图中使用模型(model),但是如果想在布局页_Layout.cshtml页中使用模型(model),按照普通方式也许没有达到预期的效果,在实现时有些情况需要注意的. 下面先按原先我们的设计,在控控制器创建三个视图操作(Action): 创建一个布局页_May15.cshtml,然后上面的三个视图均引用此布局页. 现在我们根据控制器的Action分别创建三个视图,Index.cshtml: PageA.cshtml: PageB.cshtm

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

一,结构如下图 二,布局页和视图布局页 1>使用方法一 _ViewStart.cshtml @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>视图布局页_ViewStart.cshtml</h2> _Layout.cshtml <!DOCTYPE html> <html> <head> <meta name="viewport" content

MVC系列学习(七)-模板页

1.新建一个MVC项目,选择基本 2.查看文件 看到VS为我们生成了一些东西 布局页面,Layout 指定了模板页 3.开始实例 首先控制器中的代码如下: 视图中代码如下: 1.在/Views/_ViewStart.cshtml[如果/Views下有中有该 子视图,运行时都先加载它先则它的优先级高与其他视图] 2.在/Views/Shared/_Layout.cshtml[模板页或布局页,如果视图中没设置Layout=null的话,都默认调用布局页] 3.在/Views/Home/_ViewSt

MVC3/4/5/6 布局页及Razor语法

一.目录结构 二.Razor语法 代码块:@{},如:@{Html.Raw(“”);} @if(){} @switch(){} @for(){} @foreach(){} @while(){} @do{}while(){} 代码块内语句以分号结束 表达式或变量:以@开始,如:@User.Name或@(User.Name + “欢迎你”),@() 变量可以通过var来声明,且只能在代码块中,如:@{var abc=”aaa”;} 方法调用:以@开始,如:@Html.Encode(“”) 单行文本输

关于NopCommerce-Web层中的布局页

以下内容大部分都不是原创,因为各位写手都是抄来抄去,所以我也不知道原创是谁,写这些只是为了方便自己的学习. 首先,Nop.Web也是一个MVC Web应用程序项目,一个公有区域的展示层.它就是你实际能够运行的应用程序.它是应用程序的启动项目. 一 概况 nopcommerce其布局页文件分布在Nop.Web/Views/shared当中,主要涉及到五个布局文件:_Root.Head.cshtml._Root.cshtml._ColumnsOne.cshtml._ColumnsTwo.cshtml