UI设计师们现在也讲究页面设计的语义化和结构化，把一个页面分成很多个模块，使用语义化的类名或id来标识这些模块。Razor推出了新的布局解决方案来迎合这一潮流。

　　这里涉及到Razor的一些语法，大家可以不深究"@"后面的内容，讲到页面布局，你只要专注与HTML代码就可以了。语法会在后面补充。

　　1.指定母版与加载机制

　　首先我们来看_ViewStart.chhtml页面，它的内容很简单:

@{

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

}

这句代码指定了默认的母版的位置: 当前应用程序根目录下<"~"的含义>的Views/Shared/_Layout.cshtml

除非特殊情况，比如视图是Partial视图，或显示的在视图中添加以下代码指示不使用母版:

@{

    Layout = null;

}

　其他情况下，该指定页就是视图的母版页。

　　然后我们来看看Razor母版页_Layout.cshtml的内容:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>@ViewBag.Title</title>

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

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

</head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<body>

    <div class="page">

        <div id="header">

            <div id="title">

                <h1>我的 MVC 应用程序</h1>

            </div>

            <div id="logindisplay">

                欢迎 <strong>@User.Identity.Name</strong>!

            </div>

            <div id="menucontainer">

                <ul id="menu">

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

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

                </ul>

            </div>

        </div>

        <div id="main">

            @RenderBody()<!--一般视图内容的占位符-->

        </div>

        <div id="footer">

        </div>

    </div>

</body>

</html>

　注意@RenderBody()这个方法相当于一个占位符，假如我们的首页视图Index.cshtml是这样，

@{

    ViewBag.Title = "主页";

}

<h2>@ViewBag.Message</h2>

<p>

    若要了解有关 ASP.NET MVC 的更多信息，请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc</a>。

</p>

　一般的视图处理，比如当服务器响应一个HomeController.Index()请求的时候,需要返回Index视图，

  • 首先会加载母版页_Layout.cshtml的内容，
  • 遇到@RenderBody()时，就用首页视图的内容置换到这里，最后处理完成返回静态页面。

2.使用Partial视图

MVC 2.0中，你需要使用<asp:Content></asp:Content>标签来进行页面分割，太多的话自己都忘记了哪个对应的是哪个部份。

　　在Razor中，可以将需要剥离出来的部份作为一个单独的Partial视图，比如网站的头部(Logo，导航等等..)，底部(友情链接，版权声明等等..)，或是某个功能模块(登陆框等等..)。

　　比如上面的母版页，我们可以把它的头部和底部剥离出来，在Share文件夹下右键添加/视图,选择创建为分部视图，如图3:

　　　　图3

　　依照上述步骤创建”_HeaderPartial.cshtml“和"_FooterPartial.cshtml"两个视图:

<!--_HeaderPartial.cshtml-->

<div id="header">

            <div id="title">

                <h1>我的 MVC 应用程序</h1>

            </div>

            <div id="logindisplay">

                欢迎 <strong>@User.Identity.Name</strong>!

            </div>

            <div id="menucontainer">

                <ul id="menu">

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

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

                </ul>

            </div>

        </div>
<!--_FooterPartial.cshtml-->

<div id="footer">

© 2008-2012 John Connor All rights reserved.

</div>

　可以看出，提取Partial视图很简单，就是把需要的内容提取出来，放在新建的Partial视图中。然后，我们还需要干一件事情，

　　类似于一般视图，Partial视图使用自己特有的占位符来替换原内容。我们这么干之后，原_Layout.cshtml页就变成了这样:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>@ViewBag.Title</title>

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

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

</head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<body>

    <div class="page">

        @Html.Partial("_HeaderPartial")<!--_HeaderPartial视图占位符-->

        <div id="main">

            @RenderBody()

        </div>

         @Html.Partial("_FooterPartial")<!--_FooterPartial视图占位符-->

    </div>

</body>

</html>

　这样，页面的布局是不是更清爽简洁了?如同一般视图，返回请求时会先加载母版页然后遇到占位符时加载相应的Partial视图，最后返回处理完成的静态页面。

使用Razor来进行页面布局的更多相关文章

  1. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  2. Asp.net MVC4高级编程学习笔记-视图学习第三课Razor页面布局20171010

    Razor页面布局 1)  在布局模板页中使用@RenderBody标记来渲染主要内容.比如很多web页面说头部和尾部相同,中间内容部分使用@RenderBody来显示不同的页面内容. 2)  在布局 ...

  3. 学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  4. C#中的函数式编程：递归与纯函数（二） 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面

    C#中的函数式编程:递归与纯函数(二)   在序言中,我们提到函数式编程的两大特征:无副作用.函数是第一公民.现在,我们先来深入第一个特征:无副作用. 无副作用是通过引用透明(Referential ...

  5. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  6. Xamarin+Prism开发详解五：页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  7. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  9. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. c++模板类被继承时他的成员不能被子类看到

    c++模板类被继承时他的成员不能被子类看到,必须用限定的符号 this->foo  或者 baseclass::foo,或者using bassclass::foo. msvc不提示错误,gcc ...

  2. CSS各种选择器

    一.选择器 1.元素选择器 li{}最常用.最基本 2.派生选择器 li strong { } 标签间用空格分隔.定义了li标签中的strong标签的样式,css1中上下文选择器.css2中派生选择器 ...

  3. linux定时任务crond那些事！

    1.定时任务crond介绍 1.1 crond是什么 crond是linux系统中用来定期执行命令或指定程序任务的一种服务或软件. 特殊需求:(秒级别)crond服务就无法搞定了,一般工作中写脚本守护 ...

  4. 转 常用JQuery插件整理

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  5. mysql 分区信息查看

    select partition_name part,partition_expression expr,partition_description descr,table_rows from INF ...

  6. runtime 运行时机制 完全解读

    runtime 运行时机制 完全解读   目录[-] import import 我们前面已经讲过一篇runtime 原理,现在这篇文章主要介绍的是runtime是什么以及怎么用!希望对读者有所帮助! ...

  7. 有了screen，妈妈再也不用担心我的学习啦

    创建一个srceen screen -S test1 从screen离开 crtl+a d (左手按住crtl和a 然后右手按d) 查看当前有多少screen screen -ls 回到screen ...

  8. unix网络编程之简介

    通常客户一次只与一个服务器通信, 上图为:一个服务器同时处理多个客户的请求. 上图为:客户与服务器使用TCP协议在同一个以太网中通信. 路由器是广域网的架构设备.今天,最大的广域网是因特网. 上图为: ...

  9. 【转】单双精度浮点数的IEEE标准格式

    原文网址:http://blog.chinaunix.net/uid-24118190-id-75212.html 单双精度浮点数的IEEE标准格式 关键字:浮点数 IEEE标准 大多数高级语言按照I ...

  10. HDU3726---Graph and Queries 离线处理+Treap

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3726 题意:n个点m条边的一张无向图,每个点有一个权值, 有3中操作. D X 删除第X条边 Q X ...