ASP.NET MVC轻教程 Step By Step 13——页面布局
一般在一个网站中页面会使用相同的结构和元素,如果每个页面都要重复添加这些元素,不仅繁琐更会给我们后期维护带来大麻烦。所以我们采用网页模板之类的技术,将固定不变的元素放入模板,同时留下一些占位符供页面各自填充不同的内容。在ASP.NET WebForm中这种技术叫母版页,在ASP.NET MVC中它叫布局。
Step 1. 添加布局页面
在Views目录下添加一个新的视图,名叫“MyLayout”,当然你也可以起别的名字。
将MyLayout.cshtml的HTML代码修改一下。
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
@RenderSection("head")
</head>
<body>
<h1>ASP.NET MVC简易留言板</h1>
<div>
@RenderBody()
</div>
</body>
</html>
RenderBody和RenderSection都是布局中的占位符。RenderBody是主要的占位符,在布局页中只能有一个RenderBody。RenderSection可以存在多个,只要参数名不同就可以。
Step 2. 修改Index和Write视图
修改Index视图代码,以应用MyLayout布局页。
@model IEnumerable<MessageBoard.Models.Message> @{
Layout = "~/Views/MyLayout.cshtml";
} @section head
{
<title>ASP.NET MVC简易留言板</title>
} @Html.ActionLink("我要留言", "Write")
@foreach (var message in Model)
{
<p>@message.NickName</p>
<p>@message.Content</p>
<p>@message.ReleaseDate</p>
<br />
} @if (ViewBag.Page > 1)
{
@Html.ActionLink("上一页", "Index", new { page = ViewBag.Page - 1 })
}
@if (ViewBag.Page < ViewBag.TotalPages)
{
@Html.ActionLink("下一页", "Index", new { page = ViewBag.Page + 1 })
}
Layout = "~/Views/MyLayout.cshtml"指明了页面采用MyLayout作为布局。@section head节内的部分会放入@RenderSection("head") 占位符中,其余未指明的部分全部放入@RenderBody() 占位符中。同样我们修改一下Write视图。
@model MessageBoard.Models.Message @section head
{
<title>ASP.NET MVC简易留言板-我要留言</title>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
} @using (Html.BeginForm("Write", "Home"))
{
@Html.LabelFor(m => m.NickName, "昵称")
@Html.TextBoxFor(m => m.NickName)
@Html.ValidationMessageFor(m => m.NickName)
<br /><br />
@Html.LabelFor(m => m.Content, "内容")
@Html.TextAreaFor(m => m.Content, 5, 50, null)
@Html.ValidationMessageFor(m => m.Content)
<br /><br />
<input type="submit" value="提交" />
}
可以看出使用布局后每个页面都简洁明了不少,但要注意使用布局的页面必须指明每个section节的内容,即使是空的,也要在页面代码里写出这个节。
现在我们可以看到应用布局后的Index和Write了。
Step 3. 指定全局布局
如果你嫌给每个页面单独指定布局麻烦的话,我们还可以指定一个默认的全局布局。
在Views目录下添加一个名为“_ViewStart.cshtml"的视图,视图代码很简单。
@{
Layout = "~/Views/MyLayout.cshtml";
}
这样无须给每个视图设定布局页了,如果有少数视图想搞特殊化也不要紧,在其页面再单独指定即可。
Step 4. 新视图指定布局
在添加视图的对话框中选择使用布局页。如果在_ViewStart中已经指定了布局页,就无须其他设置。如果想单独指定某个布局页,那么填入布局页的地址,或者点击文本框后面三个点的按钮选择你要的布局页。
布局可以大大简化视图的复杂度,为Web站点的可维护性打下良好的基础。这么好的工具是一定要用在我们的项目里的。
最新文章
- JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)
- JVM调优-Jva中基本垃圾回收算法
- linux下安装uuid库
- wcscpy wcscpy_s strcpy strcpy_s的区别
- Oracle 数据乱码
- 【HDOJ】2851 Lode Runner
- Sqlserver中实现oralce 数据库的rownumber
- js~fancybox为我们提供的iframe功能
- DevExpress VCL 2014.1.2 for C++BUILDER XE6
- HTML4和HTML5之间10主要差异
- POJ - 2336 Wireless Network
- 研发团队如何写好API接口文档
- 关于ComboBox的控件事件CBN_SELCHANGE总是取到旧值的问题
- java的小数比较反例
- linux内核剖析(六)Linux系统调用详解(实现机制分析)
- hi3516a arm-hisiv300-linux-gcc jrtplib交叉编译
- window.open打开新窗口 参数
- 筛素数 poj 2739
- springboot添加fluent日志记录
- laravel队列,事件简单使用方法
热门文章
- 用bat文件将本地sql在远程oracle上执行
- Thoughtworks的技术雷达
- Java验证码和ajax判断
- DataTable导入到Excel文件
- 深入了解Angularjs指令中的ngModel
- 空格&;amp;nbsp在不同浏览器中显示距离不一致问题解决方法
- 深入理解Fsync----JBD内核调试 专业打杂程序员 @github yy哥
- allocator例子
- Linux shell的&;&;和||--转载
- Java基础知识强化之IO流笔记28:BufferedOutputStream / BufferedInputStream(字节缓冲区流) 之BufferedOutputStream写出数据