MVC系列-4.布局页

分部视图和布局页的使用

1.创建分部视图

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

wpsF8D3.tmp

输入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,如下:

wpsF8E4.tmp

4)运行

wpsF8E5.tmp

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 ,拷贝并根据需要改造导航条

wpsF8F6.tmp

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

4.改造设计Index 的View

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

复制Title标签中的内容

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

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

wpsF906.tmp

5.运行index

wpsF907.tmp

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

wpsF918.tmp

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

wpsF919.tmp

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

wpsF92A.tmp

自动生成代码:

wpsF92B.tmp

9.仿照index改造detail

wpsF92C.tmp

运行效果如下

wpsF93D.tmp

posted @ 2016-06-06 13:03  chenglingr  阅读(343)  评论(0编辑  收藏  举报
生活在继续,我们需要活着