码迷,mamicode.com
首页 > Web开发 > 详细

MVC系列-4.布局页

时间:2016-06-06 13:56:19      阅读:418      评论:0      收藏:0      [点我收藏+]

标签:

分部视图和布局页的使用

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

技术分享

运行效果如下

技术分享

MVC系列-4.布局页

标签:

原文地址:http://www.cnblogs.com/lingr/p/5563447.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!