博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MVC系列-4.布局页
阅读量:4619 次
发布时间:2019-06-09

本文共 1138 字,大约阅读时间需要 3 分钟。

分部视图和布局页的使用

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

运行效果如下

转载于:https://www.cnblogs.com/lingr/p/5563447.html

你可能感兴趣的文章
BeanDefinition的Resource定位——2
查看>>
学习记事
查看>>
java 子类重写父类的方法应注意的问题
查看>>
[LevelDB] LevelDB理论基础
查看>>
如果部署Excel 加载项?
查看>>
【codecombat】 试玩全攻略 第一关kithguard地牢
查看>>
【DP】 POJ 1191 棋盘分割 记忆化搜索
查看>>
自动化测试 Appium之Python运行环境搭建 Part2
查看>>
说说DBA职责和目标
查看>>
从头认识Spring-2.4 基于java的标准注解装配-@Inject-限定器@Named
查看>>
sql server 实现多表连接查询
查看>>
Python标准库:内置函数getattr(object, name[, default])
查看>>
转:android 自定义RadioButton样式
查看>>
HTTP请求过程
查看>>
织梦多域名解析到同一个空间导致打开链接不一致怎么办?
查看>>
Xcode10 library not found for -lstdc++ 找不到问题
查看>>
Mysql 8.0.13如何重置密码
查看>>
发布功能完成
查看>>
excel 合并单元格
查看>>
iOS设计模式简介
查看>>