MVC3.0 中Razor 学习

时间 2019-11-22

标签 mvc3.0 mvc razor 学习繁體版

原文原文链接

随着MVC3.0RTM版本的发布，最近将公司的项目从MVC2.0升级到MVC3.0。同时打算在MVC3中全面使用Razor模板引擎。现将Razor学习拿出来和你们分享，若是存在不足的地方欢迎您指出。javascript

其实在使用<%= %>在html中调用C#代码时，心里总在埋怨。这个写法很是麻烦。麻烦在哪呢？其实就是闭合。好比：css

Asp.net: <script src="<%=Url.Content("~/Scripts/jquery-1.4.4.min.js")%>"html

Razor: <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" java

很是明显，Razor在内部帮咱们作了闭合“%>”。其实就是这个小小的闭合让咱们能够在html内更加“流畅”的调用服务端代码。故Razor给开发带来了必定的便捷！下面介绍Razor的基本用法。jquery

1、模板页asp.net

Razor出现后咱们就能够选择再也不使用asp.net master 模板页。取而代之的是cshtml razor的模板文件。用法我的认为仍是和master模板页相似。但在mater模板页的原有功能上有了进一步扩展，更方便开发。好比只要在View文件夹内加入_ViewStart.cshtml文件，咱们就无需在每个具体的View页面引入模板页。减小View页面内的重复代码。具体的能够创建一个MVC3 Application 选择razor模板，VS会自动创建上述机制。这里值得提出的是@RenderSection方法。可让咱们在模板页预设一个区域，将来给继承该模板页的View使用。具体请看如下操做：学习

在MVC3.0 shared文件夹下_Layout.cshtml这个模板文件内加入如下代码：网站

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    @RenderSection("Head", required: true)
</head>
<body>
    <div class="page">

以上代码第7行，预留出一个Head的section。熟悉模板页的人，应该明白该处是预留是给将来具体的View页面自定义特定js/css使用的。这个View咱们就用默认的Home底下的Index来举例。打开index.cshtml 写入如下代码 ui

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
@section Head{
    <script type="text/javascript">
        $(function () {
            alert("hello jquery");
        });
    </script>
}

该View已经集成了模板页，这里只是填充模板页内的Head section这时就能够加入咱们的针对每一个view页面的js或者CSS了。至此达到共性外的个性。spa

2、Razor语法：

文章开头就已经提到了，我的认为Razor语法的便捷在于razor自动帮助咱们闭合C#或VB.NET在html的语法。请看如下代码：

已经给出注释了，仔细阅读并不难理解。您应该也能体会到若是将razor换成asp.net的<%= %>或者<%: %>写法，实际上是很“痛苦”的。至于razor的其余用法官方网站已经写的很全面了，好比razor的已经为咱们 HTML Encod防止XSS攻击、html中字符串中出现×××@×××.com这样的文本，Razor是能够自动识别成Email格式而不是Razor的关键字。

3、 Razor 语法智能提示:

该智能提示与VS内的同样，只需Ctrol + J 便可调出。具体的请看下图：

您是否和我同样也打算在Web开发中全面使用Razor呢？本文的例子在这里下载

原文连接： http://www.cnblogs.com/ryanding/archive/2011/01/19/1938690.html