分部视图和布局页的使用
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
运行效果如下