我们开发网站项目的时候，都会遇到这样的问题：就是页面怎么统一风格，有一致的外观，在之前ASP.NET的时代，我们有两种选择，一个是使用MasterPage页，一个是手动，自己在每个页面写CSS样式，但这样代码量太大了。。不可取，那么到了ASP.NET MVC时代，有什么技术可以统一页面风格呢？？？有，那就是Layout布局视图。下面就开始学习吧。

1. 首先使用空模板，新建一个MVC Web项目：

新建完成之后，初始化状态是：

2.接着在根目录【LayoutMVC这里是】下，新建一个文件夹【Content】,在里面添加一个css文件，取名【Site.css】

3.在【Views】文件夹下，新建一个【Shared】文件夹，在Shared文件夹下，新建一个Layout布局页

布局页：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

    @*Url.Content将虚拟路径转化为应用程序的绝对路径 *@

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" />

</head>

<body>

    <header>

        <div class="content-wrapper">

            <div class="float-left">

                <p class="site-title">

                    @Html.ActionLink("Code Express", "Index", "Home")

                </p>

            </div>

            <div class="float-right">

                <nav>

                    <ul id="menu">

                        <li>@Html.ActionLink("Home", "Index", "Home")</li>

                        <li>@Html.ActionLink("About", "About", "Home")</li>

                    </ul>

                </nav>

            </div>

        </div>

    </header>

    <div id="body">

        @RenderSection("featured", required: false)

        <section class="content-wrapper main-content clear-fix">

            @RenderBody()

        </section>

    </div>

    <footer>

        <div class="content-wrapper">

            <div class="float-left">

                <p>&copy; @DateTime.Now.Year – Code Express</p>

            </div>

        </div>

    </footer>

</body>

</html>In this layout we are using a HTML helper method and some other system defined methods so let's see these methods one by one. 在布局页里面，我们使用了HTML帮助类的方法，和其他一些系统定义的方法，我们来分别看看这些方法。


Url.Content(): Content() method is a method of UrlHelper class. It converts a virtual (relative) path to an application absolute path. 
It has one parameter of string type that is a virtual path of the content. 
It returns an application's absolute path. 
If the specified content path (parameter of the method) does not start with the tilde (~) character then this method returns contentPath unchanged. 
Url.Content() ensures that all links work no matter if the site is in a virtual directory or in the web site root.

URL。Content方法，是UrlHelper类中的方法，它可以把虚拟【相对】路径转化为应用程序的绝对路径，它有一个string类型的参数，也就是文件的虚拟路径。如果这个路径没有以~波浪线开头，然后这个方法就会返回一个固定路径，
它确保所有的链接都能正常工作，不管站点是在虚拟路径中或者是在网站的根目录下。

Html.ActionLink(): The easiest way to render an HTML link in is to use the HTML.ActionLink() helper. 
With MVC, the Html.ActionLink() does not link to a view. 
It creates a link to a controller action. ActionLink() is an extension method of the HtmlHelper class. 
It returns an anchor element (an element) that contains the virtual path of the specified action. 
When you use an ActionLink() method then you need to pass three string parameter. 
The parameters are linkText (the inner text of the anchor element), actionName (the name of the action) and controllerName (the name of the controller).

HTML.ActionLink方法，这是最简单的方法，来做一个HTML链接。在MVC中HTML.ActionLink不是链接到视图，而是链接到控制器的方法，ActionLink是HTMLHelper类的扩展方法。
它返回了一个包含指定Action的虚拟路径的链接。使用ActionLink需要传递3个参数，第一个是链接显示的文本，第二个是要链接的控制器方法，第三个是控制器的名字。

RenderSection(): RenderSection() is a method of the WebPageBase class. 
Scott wrote at one point, The first parameter to the "RenderSection()" helper method specifies the name of the section we want to render at that location in the layout template.
 The second parameter is optional, and allows us to define whether the section we are rendering is required or not. 
If a section is "required", then Razor will throw an error at runtime
if that section is not implemented within a view template that is based on the layout file (that can make it easier to track down content errors). It returns the HTML content to render.

RenderSection是WebPageBase类中的方法，我们可以在布局页中使用它来，作为一个占位符，就和ASP.NET中类似，有两个参数，一个是名字，一个是Required，Required设置为True的时候，我们在视图中就一定要添加这个块，否则运行的时候，报错。

RenderBody(): In layout pages, renders the portion of a content page that is not within a named section. It returns the HTML content to render. RenderBody is required, since it's what renders each view.

RenderBody是加载显示，不在RendSection代码快中的内容，RenderBody是必须要的。

The _ViewStart File

_ViewStart文件，指定了使用的布局页，如果没有的话，你就需要在每个视图中手动，添加
@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}
The "_ViewStart" file in the Views folder contains the following content: @{ Layout = "~/Views/Shared/_Layout.cshtml"; } 
This code is automatically added to all views displayed by the application. If you remove this file then you must add this line to all views.

4.接着，我们新建一个控制器Home，创建对应的Index视图，指定我们刚才创建的布局页

 public class HomeController : Controller

    {

        // GET: Home

        public ActionResult Index()

        {

            return View();

        }

    }
@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Index</h2>

5.运行程序：

MVC学习系列5--Layout布局页和RenderSection的使用的更多相关文章

  1. MVC之LayOut布局页

    LayOut布局页,就是相当于WebForm中母版页,实现了一个代码的共用和公共布局的作用. 布局页的使用 (1)添加新项,选择MVC布局页 <!DOCTYPE html> <htm ...

  2. MVC学习系列4--@helper辅助方法和用户自定义HTML方法

    在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件.HTML帮助类是在视图中,用来呈现HTML内容的.HTML帮助类是一个方法,它返回的是string类型的值. HTML帮助类, ...

  3. ASP.NET MVC学习系列(二)-WebAPI请求

    继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...

  4. ASP.NET MVC学习系列(二)-WebAPI请求(转)

    转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...

  5. MVC学习系列——ModelBinder扩展

    在MVC系统中,我们接受数据,运用的是ModelBinder 的技术. MVC学习系列——ActionResult扩展在这个系列中,我们自定义了XmlResult的返回结果. 那么是不是意味着能POS ...

  6. MVC学习系列——记一次失败面试后，感想。

    在此写博客之际,热烈庆祝母校苏州科技学院,正式改名为苏州科技大学. 一晃眼,从自己投身IT行业已经两年有余,期间经历了结婚.买房等人生大事,非常感谢我的老婆,谢谢她这么爱我,嫁给我这个码农,呵呵... ...

  7. [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参

    [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参 本文转自:http://www.cnblogs.com/babycool/p/3922738.html ASP.NET MVC学习系 ...

  8. ASP.NET MVC学习系列(二)-WebAPI请求 转载https://www.cnblogs.com/babycool/p/3922738.html

    继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...

  9. MVC学习系列8--分页和排序

    分页和排序,应该是软件开发中,需要必知必会的技能了,对于分页,网上很多教程,当然,别人终究是别人的,只有自己理解,会了,并且吸收之后,再用自己的语言,传授出来,这才是硬道理.好了,废话说多了.现在我们 ...

随机推荐

  1. 我的iOS开发系列博文

    之前目录性的总结了发表过的关于OC方面的文章,今天在目录性的总结一下有关iOS开发的文章.走过路过不要错过哦,今天的博文也全都是干货.写技术博客与大家交流一下思想也是不错的. 下面是我的技术博客中有关 ...

  2. Example of ConcurrentHashMap in Java--转

    原文地址:http://www.concretepage.com/java/example_concurrenthashmap_java On this page we will provide ex ...

  3. AVFoundation播放视频时显示字幕，切换音轨

    主要用到两个类:AVMediaSelectionGroup 和 AVMediaSelectionOption 调用 AVAsset对象的availableMediaCharacteristicsWit ...

  4. 制作动画或小游戏——CreateJS基础类（一）

    前面曾经记录过Canvas的基础知识<让自己也能使用Canvas>,在实际使用中,用封装好的库效率会高点. 使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的 ...

  5. H5基于iScroll实现下拉刷新，上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  6. jQuery-1.9.1源码分析系列（十四） 一些jQuery工具

    为了给下一章分析动画处理做准备,先来看一下一些工具.其中队列工具在动画处理中被经常使用. jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ qu ...

  7. WPF老矣，尚能饭否——且说说WPF今生未来（下）：安心

    在前面的上.中篇中,我们已经可以看到园子里朋友的点评“后山见! WPF就比winform好! 激情对决”.看到大家热情洋溢的点评,做技术的我也很受感动.老实说,如何在本文收笔--WPF系列文章,我很紧 ...

  8. Linux中设定umask的作用

    在linux中,常常都要提示设置:      umask 022 其作用如下: 功能说明:指定在建立文件时预设的权限掩码.语 法:umask [-S][权限掩码]补充说明:umask可用来设定[权限掩 ...

  9. 第 1 章 jQuery EasyUI 入门

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...

  10. Java基础学习总结——Java对象的序列化和反序列化

    一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...