[翻譯]Razor語法(C#)

聲明

本文原文引用自: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標記中國使用這些標籤,(比如<p></p>作爲一個段落,<em></em>作爲斜體樣式),你可以參考一下本文後部的在代碼塊中合併文字、標籤和代碼
你可以閱讀更多關於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)還有變量名稱都是大小寫敏感的。下面的代碼就定義了兩個完全不同的變量lastNameLastName

@{
    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,num2totalMessage變量都存儲了各種各樣的數字和一個字符串。
- 使用雙引號標記的字符串字面量的值指定了totalMessage變量的值。
- 因爲代碼是大小寫敏感的,當totalMessage變量在頁面的底端被使用的時候,它的名字必須和上面聲明的時候使用的名字完全一樣。
- 表達式num1.AsInt() + num2.AsInt()描述瞭如何使用對象和它的方法。每個變量的AsInt方法會將輸入的字符串轉換成一個數字(一個整形變量),所以你可以用他來進行算術運算。譯者注:這裏的num1num2都是字符串變量,所以如果直接使用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元素中,比如<p></p><em></em>

@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標籤的打開,比如<p>標籤,它會將元素裏面的所有東西和它的內容渲染出來給瀏覽器,並解析服務器代碼表達式。

  • 使用@:運算符或者是<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標籤(<br/>),還有服務器代碼和配對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

變量

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章