[翻译]Razor语法(C#)

最新推荐文章于 2024-10-29 06:07:39 发布

赤石俊哉

最新推荐文章于 2024-10-29 06:07:39 发布

阅读量2.4k

点赞数 2

分类专栏： ASP.NET 文章标签： asp-net c# razor

ASP.NET 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

声明

本文原文引用自：Intro to ASP.NET Web Programming Razor Syntax
本文由赤石俊哉进行翻译，转载请注明出处，若您是原文作者，且认为本文影响到了您，您可以联系我，我会将文章撤销掉。
本人大学僧一名，英语能力有限，如果有翻译错误的地方，还请大家指正。

前瞻

这篇文章将会给你一个在ASP.NET Web页面中使用Razor语法的概观。ASP.NET是微软的一项在Web服务器上运行动态网页的技术。这篇文章主要是使用C#语言。
你将会学到的东西：
● 使用Razor语法编写ASP.NET网页入门最重要的八点建议
● 你所需要的一些基础的编程观念
● ASP.NET服务器代码和Razor语法都是啥

八点建议

这一个部分是一些当你开始使用Razor语法写ASP.NET服务器代码时，你肯定需要知道的。

Note　Razor语法是基于C#编程语言的，而C#是在ASP.NET网页中最经常使用到的语言。但是，Razor语法也同样支持Visual Basic，你在本文中所见到的都是可以在VB中使用的。更多详情请见：Visual Basic语言和语法(英文)

你可以在这篇文章的后面找到更多关于这些编程技术的细节。

1. 你需要在网页中使用@来添加代码

以@字符开始的内联表达式、简单语句块、多语句块：

<!-- 简单语句块  -->
@{ var total = 7; }
@{ var myMessage = "Hello World"; }

<!-- 内联表达式 -->
<p>The value of your account is: @total </p>
<p>The value of myMessage is: @myMessage</p>

<!-- 多语句块 -->
@{
    var greeting = "Welcome to our site!";
    var weekDay = DateTime.Now.DayOfWeek;
    var greetingMessage = greeting + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>

这些语句在浏览器中看起来就会像下面的图片那样：
这里写图片描述

HTML编码(Encoding)

当你在页面中使用@来显示内容的时候，比如说上面的例子中，对ASP.NET HTML进行编码并输出，用网页中表示字符的代码替换保留的HTML字符（比如<和>，还有&），以防止这些字符被编译器认为是HTML标签或实体。如果没有进行编码，从你服务器代码中输出的内容可能会显示出错，并可能显露出页面的安全隐患。
如果你的目标是在输出的HTML标记中国使用这些标签，（比如作为一个段落，作为斜体样式），你可以参考一下本文后部的在代码块中合并文字、标签和代码。
你可以阅读更多关于HTML编码的内容在Working with Forms（英文）。

2. 使用大括号将代码块包围起来

一行或多行代码组成的代码块需要使用大括号包括起来。

<!-- 简单语句块 -->
@{ var theMonth = DateTime.Now.Month; }
<p>The numeric value of the current month: @theMonth</p>

<!-- 多语句块 -->
@{
    var outsideTemp = 79;
    var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
}
<p>Today's weather: @weatherMessage</p>

在浏览器中显示的结果，将会是这样的：

3.在代码块中，每行语句以`;`结束

在代码块中，每个完成的语句后面都要以;结尾。而内联表达式则不需要;。

<!-- 简单语句块 -->
@{ var theMonth = DateTime.Now.Month; }

<!-- 多语句块 -->
@{
    var outsideTemp = 79;
    var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
}

<!-- 这是一个内联表达式，所以不需要分号 -->
<p>Today's weather: @weatherMessage</p>

4.使用变量存储值

你可以使用一个变量来存储值，包括字符串，数字，日期等等。你可以使用var关键字来定义一个新变量。然后在页面中使用@来直接插入变量值。

<!-- 存储字符串 -->
@{ var welcomeMessage = "Welcome, new members!"; }
<p>@welcomeMessage</p>

<!-- 存储日期 -->
@{ var year = DateTime.Now.Year; }

<!-- 显示变量值 -->
<p>Welcome to our new members who joined in @year!</p>

在浏览器中显示的结果：

5.字符串字面量需要使用一组双引号包括

一个字符串是可以被处理成文本信息的，一串顺序的连续字符序列。你需要使用一对双引号来指定一个字符串。

@{ var myString = "This is a string literal"; }

如果你希望显示的字符串中，需要包含反斜杠字符(\)或者是双引号字符(")，你可以使用逐字字符串字面量(verbatim string literal)。C#中，你不使用逐字字符串字面量的话，\字符是有特殊含义的。逐字字符串字面量使用一个@前导符号。

<!-- 字符串中包含反斜杠字符 -->
@{ var myFilePath = @"C:\MyFolder\"; }
<p>The path is: @myFilePath</p>

在逐字字符串字面量中，如果需要嵌入双引号字符，可以重复输入两个双引号来代表双引号字符。
译者注：　如果只有一个"会被认为是字符串结束了，所以如果要让程序认为我们需要显示一个双引号，就得是""，两个"。

<!-- 在字符串中包含双引号 -->
@{ var myQuote = @"The person said: ""Hello, today is Monday."""; }
<p>@myQuote</p>

上面两个例子在浏览器中显示的结果就是这样的：

Note　要注意的是，@既用于标记逐字字符串字面量，也用于ASP.NET页面中的代码定义。

6.代码大小写敏感

在C#中，关键字（比如var,true,和if）还有变量名称都是大小写敏感的。下面的代码就定义了两个完全不同的变量lastName和LastName。

@{
    var lastName = "Smith";
    var LastName = "Jones";
}

假设你只定义了一个变量var lastName = "Smith";，而你又尝试在页面中使用@LastName，那么会发生错误，而LastName不会被识别。

Note　在Visual Basic中，关键字和变量名是不区分大小写的。

7.大部分的代码应涉及对象

对象可以象征你可以编码的一个物体——一个页面，一个文本框，一个文件，一个图片，一个WEB请求，一个电子邮件，一个顾客信息（数据库行）等都能是一个对象。对象都有描述自己特征的一些属性，你可以读取他们，或修改他们——一个文本框有Text属性（也包含其他属性），一个请求对象有一个Url属性，一个电子邮件有From属性，一个顾客对象有一个FirstName属性等等。对象同样有方法，那就是象征着它们所能做的事情。比如说，文件对象的Save方法，一张图片的Rotate方法，一个电子邮件的Send方法。
你将会经常使用Request对象，它将会为你提供一些信息，比如页面中文本框的值(从域中，From feilds)，何种类型的浏览器发起的请求，页面的URL，用户的身份等等。下面的例子就描述了如何访问Request对象的属性和如何调用Request对象的MapPath方法，该方法会返回服务器上页面的相对路径：

<table border="1">
<tr>
    <td>Requested URL</td>
    <td>Relative Path</td>
    <td>Full Path</td>
    <td>HTTP Request Type</td>
</tr>
<tr>
    <td>@Request.Url</td>
    <td>@Request.FilePath</td>
    <td>@Request.MapPath(Request.FilePath)</td>
    <td>@Request.RequestType</td>
</tr>
</table>

在浏览器中显示的结果：

8.你可以使用代码来作判断

动态网页的一个关键优势在于，你可以决定在不同的情况下去做什么。最常用的方法就是使用if语句（如果需要的话还有else语句）。

@{
   var result = "";
   if(IsPost)
   {
      result = "This page was posted using the Submit button.";
   }
   else
   {
      result = "This was the first request for this page.";
   }
}

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
<body>
<form method="POST" action="" >
  <input type="Submit" name="Submit" value="Submit"/>
  <p>@result</p>
</form>
</body>
</html>

HTTP Get和Post方法和IsPost属性

Web页面使用的协议HTTP仅支持有限的几个方法（动作）用来向服务器发起请求。最常用的是GET方式，用于读取一个页面，还有就是POST方式，用于提交页面。总的来说，当用户第一次请求页面，页面请求通常是GET，而当用户填写了一个表单并且按下了提交按钮，浏览器就会向服务器发起一个POST请求。
在网页编程中，一个页面到底是用的GET还是POST，你需要去知道，这样你才能采用适合的方式去处理页面。在ASP.NET Web Pages中，你可以使用IsPost属性来看请求是GET还是POST。如果请求是POST的，那么IsPost属性将会返回true，你就可以执行像读取文本框里面的值这样的操作。你将会看到很多依赖IsPost属性值来处理页面的示例。

一个简单的示例

这个程序将举例说明如何创建一个页面来处理简单的编程。比如，建立一个页面让用户输入两个数字，然后显示它们加起来的值。
1.在编辑器中，新建一个名为 AddNumber.cshtml 的文件。
2.复制下面的代码到cshtml文件中，替换掉原本文件的所有内容。

@{
    var total = 0;
    var totalMessage = "";
    if(IsPost) {

        // Retrieve the numbers that the user entered.
        var num1 = Request["text1"];
        var num2 = Request["text2"];

        // Convert the entered strings into integers numbers and add.
        total = num1.AsInt() + num2.AsInt();
        totalMessage = "Total = " + total;
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Add Numbers</title>
    <meta charset="utf-8" />
    <style type="text/css">
      body {background-color: beige; font-family: Verdana, Arial;
            margin: 50px; }
      form {padding: 10px; border-style: solid; width: 250px;}
    </style>
  </head>
<body>
  <p>Enter two whole numbers and then click <strong>Add</strong>.</p>
  <form action="" method="post">
    <p><label for="text1">First Number:</label>
      <input type="text" name="text1" />
    </p>
    <p><label for="text2">Second Number:</label>
      <input type="text" name="text2" />
    </p>
    <p><input type="submit" value="Add" /></p>
  </form>

  <p>@totalMessage</p>

</body>
</html>

这里是一些你需要注意的东西：
- @字符在页面最开始的代码块前，而且在页面的下方附近嵌入totalMessage的变量值。
- 页面顶端代码使用大括号包括起来。
- 在页面顶端的代码中，每一行都以分号;结尾。
- 变量total,num1,num2和totalMessage变量都存储了各种各样的数字和一个字符串。
- 使用双引号标记的字符串字面量的值指定了totalMessage变量的值。
- 因为代码是大小写敏感的，当totalMessage变量在页面的底端被使用的时候，它的名字必须和上面声明的时候使用的名字完全一样。
- 表达式num1.AsInt() + num2.AsInt()描述了如何使用对象和它的方法。每个变量的AsInt方法会将输入的字符串转换成一个数字(一个整形变量)，所以你可以用他来进行算术运算。译者注：这里的num1和num2都是字符串变量，所以如果直接使用num1 + num2等于是将字符串相连，在这种情况下，如果num1=12,num2=34，那么num1 + num2的结果将会是1234。
- <form>标签中包含一个method="post"属性，它指定了当用户点击Add按钮时，页面将会使用HTTP POST方式想服务器发送请求。当也买你被提交的时候，if(IsPost)将会命中，返回true，然后执行它的条件语句，显示数字加起来的结果。

3.保存页面，然后在浏览器中运行它。（请确信页面在你运行之前是选择的Files工作空间），输入两个数字，然后按下Add按钮查看结果。

基本的编程观念

这篇文章给你一个ASP.NET网络编程的一个概观。他不是完整的考量，而只是你会经常需要的一个快速入门的编程观念。虽说如此，当时它也基本涵盖你入门ASP.NET Web Pages所需要的内容。
但是首先，来看看一些技术背景。

Razor语法，服务器代码和ASP.NET

Razor语法是一个在网页中内嵌基于服务器的代码的简单的语法。在使用Razor语法的网页中，有两种类型的内容：客户端内容和服务器代码。客户端内容是你在网页中用到的一些东西：HTML标签(元素)，样式星系，比如CSS，也可能包含一些客户端脚本，比如JavaScript，还有一些纯文本。
Razor语法可以让你在客户端内容里面加入服务器代码。如果页面中存在服务器代码，则服务器会优先处理这些服务器代码，然后再将结果发送给浏览器。比起单独使用客户端内容来说，使用服务器代码可以完成更多复杂的事情——它可以在运行中生成HTML标签或其他内容然后将它们和页面可能包含的静态HTML内容一起发送到浏览器去。以浏览器的视角来看，服务器代码生成出来的客户端内容和其他任何客户端内容是没有区别的。如你所见，服务器代码的需求就是那么简单。
含有Razor语法的ASP.NET网页有一个特殊的文件后缀名( .cshtml 或 .vbhtml )。服务器可以识别这些后缀名文件，会运行里面的Razor语法标记的代码，然后将结果发送给浏览器。

ASP.NET适合于哪里？

Razor语法是基于微软的一个叫做ASP.NET的技术的，ASP.NET又是基于微软.NET框架的。.NET框架很大，微软的整个编程框架可以开发任何类型的电脑程序。ASP.NET是.NET框架的一部分，它是专门设计于创建Web应用的。在全球范围内，ASP.NET的开发者们已经创建了很多大型而且高流量的网站。(每当你看到URL中出现 .aspx ，你就可以认为他是用ASP.NET开发的。)
Razor语法给了你ASP.NET的所有能力，如果你是新手，它能让你觉得更容易学；如果你是能手，它能提高你的产能。虽说这个语法是很简单易用的，它与ASP.NET和.NET框架的家族关系则意味着，你的网站是更高水平的，它拥有更大框架的能力。

类和实例

ASP.NET服务器代码使用对象，它是使用类的一种想法。类是一个对象的定义或者模板。比如说，一个程序可能包含一个客户(Customer)的类，它定义了一个客户类所需要的一些属性和方法。
当程序需要以实际用户信息来工作的时候，它会创建一个（或多个）客户类的实例。每一个个体客户都是一个单独的Customer类的对象。每一个实例都支持相同的属性和方法，但是每个实例的值却通常可能是不一样的。因为每个用户对象是唯一的。在一个客户对象中，LastName属性可能是Smith，而在另一个客户对象中，LastName可能就是Jones了。
相似的，你的站点中任何一个网页都是一个Page对象，它是Page类的一个实例。页面中的一个按钮则是Button对象，属于Button类的一个实例，等等。每个实例都有它自己的特征，但是他们都基于他们对象类的申明定义。

基本语法

在上面，你已经看到了一个基础的穿件ASP.NET网页页面的示例和如何添加服务器代码到HTML标记里面去。在接下来的部分里面，你将会学到如何一些使用Razor语法书写ASP.NET服务器代码的一些基础——这就是编程语言的语法。
如果你有一些编程基础(特别是如果你用过C、C++、C#、Visual Basic或JavaScript)，那你可能会觉得这些东西你都很熟悉。你可能就只需要知道如何在 .cshtml 中添加服务器代码了。

在代码块中组织文本，标记和代码

在服务器代码块中，你经常会想要输出文本或者标签(又或是两者都)到页面中。如果一个服务器代码块包含非代码的文本，那它将会被渲染成原来的样子，ASP.NET需要从代码里面区分出文本内容，可以用这些方法来做。
- 将文本内容包括在一个HTML元素中，比如或：

@if(IsPost) {
    // 这一行将所有内容包括在<p>标签中。
    <p>Hello, the time is @DateTime.Now and this page is a postback!</p>
} else {
    // 在成对标签中包含所有内容，后面跟服务器代码。
    <p>Hello <em>stranger</em>, today is: <br /> </p>  @DateTime.Now
}

HTML元素可以包含文本，附加的HTML元素，和服务器代码表达式。当ASP.NET看到一个HTML标签的打开，比如标签，它会将元素里面的所有东西和它的内容渲染出来给浏览器，并解析服务器代码表达式。

使用@：运算符或者是<text>元素。@:将会输出一行包括纯文本或者未配对的HTML标签的内容；<text>元素包含多行内容输出。如果你不希望渲染一个HTML元素作为输出的一部分，这些选项都是很有用的。

@if(IsPost) {
    // 纯文本跟一个未配对的HTML标签和服务器代码
    @: The time is: <br /> @DateTime.Now
    <br/>
    // 服务器代码和纯文本再加配对的标签和更多文本
    @DateTime.Now @:is the <em>current</em> time.
}

如果你希望输出多行文本或者是未配对的HTML标签，你可以在每一行的前面使用@:，或者你可以使用一个<text>元素包括起来。像@:运算符，<text>标记都用于ASP.NET对文本内容的标示，永远不会被渲染成页面输出。

@if(IsPost) {
    // 使用<text>标签来完成上面的例子
    <text>
    The time is: <br /> @DateTime.Now
    <br/>
    @DateTime.Now is the <em>current</em> time.
    </text>
}

@{
    var minTemp = 75;
    <text>It is the month of @DateTime.Now.ToString("MMMM"), and
    it's a <em>great</em> day! <br /><p>You can go swimming if it's at
    least @minTemp degrees. </p></text>
}

第一个例子重复了上面的例子，但是使用的是一对<text>标记来将文本扩起来用以渲染。<text>和</text>标记包含了三行，这三行都包含一些非内含型的文本和不配对的HTML标签( )，还有服务器代码和配对HTML标签。当然，你也可以单独地在每一行的前面加上@:运算符，这种方法也是可行的。

Note　当你输出文本作为一个部分的显示的时候——使用一个HTML元素，@:运算符，或者是<text>元素——ASP.NET并不会将它们用HTML编码输出。(就如我们之前的NOTE所提到的，ASP.NET在服务器代码表达式中或者是以@为前导的服务器代码块中会将内容编码输出，这里的NOTE则是说明一种特殊情况。)

空白字符

在表达式中或者是字符串字面量外部使用多余的空白字符并不会影响表达式。译者注：空白字符包括半角空格，制表符(TAB)等，不包含全角空格。

@{ var lastName =    "Smith"; }

在表达式中出现换行也不会影响到表达式，所以你可以适当地换行让你的表达式更易读。就像下面的表达式完全是等价的。

@{ var theName =
"Smith"; }

@{
    var
    personName
    =
    "Smith"
    ;
}

但是你不能在字符串字面量中换行。下面的例子就是错误的：

@{ var test = "This is a long
    string"; }  // Does not work!

如果希望实现像上面的例子那样在一个长字符串中间换行，有两种方法。你可以使用串联符号(+)，这种方法我们将会在文章的后面介绍。也可以使用@来建立一个逐字字符串字面量，就想文章的前面提到的那样。然后你就可以在逐字字符串字面量中间换行了。译者注：这样换行的话，换行会被识别成换行符在字符串里面。换行符：Windows(\r\n),Linux(\n),Mac(\r)。

@{ var longString = @"This is a
    long
    string";
}

代码（以及标记）注释

注释的作用是为你自己或者别人留下注解笔记用。当然也可以用做禁用（又称为注释掉，comment out）一段不想执行但又想留下来的代码或者标记。
Razor语法和HTML标记有多种不同的注释语法。对于所有的Razor代码来说，Razor注释是在服务器将页面发送至浏览器之前被处理(然后被删除)的。因此，Razor注释语法让你可以在你的代码(甚至是标记中)中加入注释，而你可以在编辑文件的时候看到它们，用户浏览页面时看不到，浏览器中的源文件也看不到。
对于ASP.NET Razor注释来说，你需要以@*开始，*@结束。注释可以是一行也可以是多行：

@*  这是单行注释 *@

@*
    这是多行注释
    想要几行都可以
*@

下面是在代码块中的注释：

@{
    @* 这是一行注释 *@
    var theVar = 17;
}

下面是一些代码块，但由于被注释掉了，他们不会被运行。

@{
    @* 这是一行注释 *@
    @* var theVar = 17;  *@
}

在一个代码块中，你可以用你所使用的语言的注释语法来替代Razor注释语法。比如C#中：

@{
    // 这是一行注释
    var myVar = 17;
    /* 这是使用C#注释语法
    的多行注释 */
}

在C#中，单行注释用//作为前导，多行注释使用/*开始，*/结束。（和Razor注释语法一样，不会被渲染到浏览器中）
在标记中，你可能知道这样的一个HTML元素来作注释：

<!-- 这是一行注释  -->

以的HTML元素就是HTML注释，你不光可以在文本的周围使用它，也可以在你想要留在页面上却又不想渲染出来的HTML标记的周围使用它。这个HTML元素会将包含的所有内容和文本完全地隐藏。

<!-- <p>This is my paragraph.</p>  -->

但不像Razor注释，HTML注释仍然会被渲染到页面上，用户可以从页面的源代码中看到这些注释。
Razor对C#的嵌套块是有限制的，关于这些限制你可以参考http://aspnetwebstack.codeplex.com/workitem/1914

变量