--引子

　　看下面一段MVC 2.0的代码。

<%if (Model != null)

{%>

 <p><%＝Model%></p>

<%}%>

<%else

{%>

 //Do something

<%}%>

　　

　　我们站在一个读者的立场上来看，”<% %>“这种标记C#代码的方法是十分蛋疼的。

　　如果写这段代码的人没有良好的缩进和对齐习惯的话，一段逻辑较为复杂的代码就会堆砌着杂乱无章的"<%“和"%>"--匹配它们就是一件头疼的事情，会让读者望而生畏。

　　即使是写代码的本人，闭合也是一件麻烦的事情，并且VS对”<% %>“的自动缩进和对齐支持不很友好，看惯了整齐的代码，面对自己写出的凌乱的东西会很不爽。

　　随着MVC 3.0的发布，新的Razor视图引擎解决了这个问题。

　　Razor的意思的就是 剃刀，可见它灰常犀利。引言中的代码，我们用Razor的语法来写的话:

@if (Model != null)　　

{

  <p>@Model</p>

}

else

{

    //Do something

}

　　

　　Razor使用了"@"来标记一段C#代码，并帮我们进行了内部的闭合，是不是感觉清爽多了?

　　Razor在减少代码冗余、增强代码可读性和vs 智能感知方面，都有着很大的优势。下面我们来具体的介绍如何在ASP.NET MVC 3.0中使用Razor。

　　---------------------------------------------引言End----------------------------------------------

一，创建基于Razor的Web程序

　　首先你的开发环境必须安装.NET Framework4.0，然后在VS中新建项目时选择ASP.NET MVC 3 应用程序，在选项页面中选择视图引擎为Razor，如图1:

　　图1

　　然后创建项目，就会得到一个基于Razor的Web项目了，如图2。　　

　　　图2

　　相信熟悉MVC的看官们对此结构并不陌生。注意红框部份，Razor的页面是以cshtml为后缀的，下面我们来讲下如何使用Razor来进行页面布局。

二，使用Razor来进行页面布局

　　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.语法简介

　　如果我们希望在HTML代码中绑定数据，比如说我们有一个产品的对象Product，需要绑定产品的名称Product.Name，只需要在变量前面加"@"即可，

　　也可以使用"@(expression)"绑定一个表达式:

<p>@Product.Name</p>
<p>@(Product.Price*0.8)</p>

　　

　　Razor中使用”@{code}“来标识一段C#代码,代码段可以出现在任何位置，并且支持与HTML混写:

@｛

    var product=new product();

    product.Name="pen";

    product.Price=1.00;
    <p>@product.Name</p>
    <p>@product.Price</p>

｝

　　使用循环或条件语句时直接加"@"前缀，可以控制页面逻辑:

@foreach(var product in products)

｛

    <p>@item.Name</p>

｝

　　

　　Razor中注释是"@**@",即可以注释Html代码，也可以注释C#代码,在代码块中仍可使用C#的注释方式:

@{

    var product=new product();

    product.Name="pen";

    //product.Price=1.00;

    <p>@product.Name</p>

    @*<p>@product.Price</p>*@

 }

　　

　　2.ASP.NET MVC3.0 Web中的应用

　　假设我们有一个Product类位于JohnConnor.Data命名空间下,有Name和Price两个属性，HomeController.Index()方法返回一个List<Product>对象给Index视图，

　　打印所有产品名称，并且点击产品名称时，弹出产品价格。

　　HomeController.Index()方法如下:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using JohnConnor.Data;

namespace JohnConnor.Web.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            var products = new List<Product>()

            {

                new Product{ Name="钢笔", Price=11.55M},

                new Product{ Name="铅笔", Price=2.17M},

                new Product{ Name="圆珠笔", Price=5.98M},

            };

            return View(products);

        }

    }

}

　　

　　我们来改一下Index视图演示一下Razor的简单应用。

@using JohnConnor.Data;

@model List<Product>

@{

    ViewBag.Title = "主页";//母版中ViewBag.Title用于绑定Title标签，这里进行赋值。

}

<h2>Razor</h2>

@foreach (var product in Model)

{

    //遍历所有的产品

    <input type="button" name="@product.Name"   value="@product.Name" onclick="alert(@product.Price)" />

}

　　

　　在一般视图中，首先声明视图模型，即Action返回的ViewResult对象的类型<也可以不声明，如果有返回对象建议声明>。

　　这里的视图模型是一个List<Product>集合，因为Product位于using JohnConnor.Data命名空间，所以先添加了引用。

　　在母版中ViewBag.Title用于绑定Title标签，在一般视图中就可以进行赋值来绑定页面的Title 。

　　如果你不想使用母版，就在代码块中添加"Layout = null;"。

　　最后是就是一些数据绑定，或者是逻辑的处理。

　　

　　Razor的基本内容大概就讲这些了，当然它还有很丰富的底蕴，需要在实际的运用过程中去学习，一篇短文是无法涵盖所有信息的。

　　最后提一点，Razor暂时没有设计视图，这是比较悲摧的一点。相信之后会有的。如果对Razor的使用有任何问题，可以在此提出，能力范围内的问题我都可以提供帮助。

　　希望大家多多支持。

　　

MVC--布局--razor的更多相关文章

  1. IOS 整体架构 和 MVC布局

    IOS的生态系统 IOS生态系统不仅仅是指产品,更重要的是指 iPhone/iPad/iPod/Mac +iCloud+App整个系统,包括Siri (部分设备不支持).FaceTime.Safari ...

  2. MVC 中 Razor 无限分类的展示

    在MVC的Razor视图展示无级分类的办法,在网上看了很多资料,大多搞得很高大上.可能本人水平有限,实在是不会用. 那我就用最简单爆力的办法来做. Model: public class NewsCa ...

  3. ASP.NET MVC （Razor）开发

    ASP.NET MVC (Razor)开发 过去我们使用过一些周报工具来完成项目组或部门的周报填写与考核工作,但多少有些不理想,要么功能太过简单,要么功能特别繁杂,不接地气,使用不便. 后来我们就考虑 ...

  4. ASP.NET MVC 3: Razor中的@:和语法

    原文 ASP.NET MVC 3: Razor中的@:和语法 [原文发表地址] ASP.NET MVC 3: Razor’s @: and <text> syntax[原文发表时间] De ...

  5. ASP.NET MVC：Razor 引入命名空间

    原文:ASP.NET MVC:Razor 引入命名空间 页面中引用 c# @using MvcApplication83.Models @using MvcApplication83.Common 行 ...

  6. ASP.NET MVC 自定义Razor视图WorkContext

    概述 1.在ASP.NET MVC项目开发的过程中,我们经常需要在cshtml的视图层输出一些公用信息 比如:页面Title.服务器日期时间.页面关键字.关键字描述.系统版本号.资源版本号等 2.普通 ...

  7. ASP.NET Core MVC里面Razor如何获取URL参数

    原文:ASP.NET Core MVC里面Razor如何获取URL参数 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:// ...

  8. MVC – 8.Razor 布局

    8.1.@RenderBody() 8.2.多个"占位符":@RenderSection() 8.3.js合并 @Scripts.Render("~/bundles/js ...

  9. MVC – 8.Razor 布局

    8.1.@RenderBody() 8.2.多个"占位符":@RenderSection() 8.3.js合并 @Scripts.Render("~/bundles/js ...

  10. mvc 4 razor语法讲解和使用

    1.这里的  @{Layout="文件路径";}  代码块指定了整个项目默认所使用的布局文件(如图:) @RenderBody()对于所有的页面默认的情况下都会使用这个布局(Web ...

随机推荐

  1. C++面向对象程序设计的一些知识点（3）

    摘要:多态性提供一组统一的调用接口函数,依据这些条用接口函数具体对象的不同,同一名字的函数会有不同的行为. 1.重载与隐藏 (1).对同一作用域中的同名函数,如果它们的函数特征标不同,那么它们就形成一 ...

  2. Java Callable并发编程模板

    submit方法会产生Future对象,它用Callable返回结果的特定类型进行了参数化,可以用isDone()的方法来查询Future是否已经完成.当任务完成是,它具有一个结果,可以调用get() ...

  3. css3实现的鼠标经过按钮特效

    今天要为各网友再带来一款css实现的鼠标经过按钮的特效.按钮初始时,边框为断开的按钮,当鼠标经过按钮时动画变为封闭的边框.效果图如下: 在线预览   源码下载 我们一起看下实现的代码: html代码: ...

  4. 在WMware新建一个虚拟机

  5. Java中的 多线程编程

    Java 中的多线程编程 一.多线程的优缺点 多线程的优点: 1)资源利用率更好2)程序设计在某些情况下更简单3)程序响应更快 多线程的代价: 1)设计更复杂虽然有一些多线程应用程序比单线程的应用程序 ...

  6. [转]pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX—— ...

  7. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  8. Keypress - 捕获键盘输入的JavaScript库

    Keypress 是一个强大的 JavaScript 库,用于捕获键盘输入.这是一个有非常特殊的功能的输入捕获库,它是很容易掌握和使用,并且不依赖第三方库.在网站开发中,经常会碰到需要处理键盘输入的场 ...

  9. hive执行流程分析

    转自:http://blog.csdn.net/gexiaobaohelloworld/article/details/7719163 入口:bin/hive脚本中,环境检查后执行ext中的cli.s ...

  10. Android.mk文件c++头文件包含问题

    Eclipse 中 Android.mk文件c++头文件包含问题 jni中的目录结构如下: 编译找不到头文件 LOCAL_PATH := $(call my-dir)LOCAL_C_INCLUDES ...