ASP.NET MVC5 + EF6 入門教程 (6) View中的Razor使用

標籤：

原文:ASP.NET MVC5 + EF6 入門教程 (6) View中的Razor使用

文章來源： Slark.NET-部落格園 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html 

上一節：ASP.NET MVC5 + EF6 入門教程 (5) Model和Entity Framework

下一節：ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的柵格系統

源碼下載：點我下載

一、Razor簡介

在方案總管中查看Views檔案夾下的檔案，如所示。

檔案的尾碼名都是.cshtml。這是什麼檔案呢？顧名思義，cshtml = cs + html，就是一個包含C Sharp(C#)代碼的HTML檔案。

既然檔案包含原本HTML檔案裡的用戶端代碼和C#這樣的伺服器端代碼，我們就得想個辦法區分這兩種代碼。這裡我們就需要Razor。

Razor是什嗎？一個視圖引擎？期待哪位專家可以給我一個高大上的定義。

在我看來，Razor就是區分伺服器端代碼和其它代碼的一種標記語言。

二、Razor注釋

為了更好的觀察運行結果，這裡我們禁用掉模板。開啟Views檔案夾下的_ViewStart.cshtml檔案。注釋掉其中所有代碼，如所示。

@*@{    Layout = "~/Views/Shared/_Layout.cshtml";}*@

從上面可以看出cshtml檔案中的多行注釋就是在第一行開頭寫@*然後最後一行結尾寫*@。

Razor的單行注釋也差不多這種形式，在行首寫@*，行尾寫*@，如下所示。

@* A one line code comment *@

三、Razor的三種基本形式

Razor通過三種標記方式來確定指定地區的代碼是伺服器端代碼：

• 行內(Inline)標記
• 單行(Single Line)標記
• 多行(Multi-Line)標記

開啟Views檔案夾下的First檔案夾裡的Index.cshtml檔案。寫入如下代碼。圖中黃色部分就是Razor標記下的伺服器端C#代碼

<div>
　　<!--Single Line-->
　　@{ var name = "Slark";}
　　@{ Response.Write("Single Line : Name is" + name + "<br />");}

　　<!--Inline-->
　　Inline : Today is:@DateTime.Now.ToString("yyyy-MM-dd") <br />
　　Inline : Name is @name <br />

　　<!--Multi-Line-->
　　@{
　　　　var age = 25;
　　　　Response.Write("Multi-Line : Age is " + age + "<br />");
　　}
</div>

從上面代碼中可以看出行內標記@後面可以緊跟一個已經被定義的變數或者有傳回值的函數

單行標記中每一行其實就是包含了一個C#語句，用分號結尾。

多行標記就是包含了多行C#語句。

四、語句運行順序

然後選擇剛才編輯的Index.cshtml，點擊功能表列中的"在瀏覽器中查看"，顯示結果如下。

右鍵點擊頁面選擇“查看源”，結果如下：

Single Line : Name isSlark<br />Multi-Line : Age is 25<br /><div>    <!--Single Line-->    <!--Inline-->    Inline : Today is:2014-12-13 　　<br />    Inline : Name is Slark 　　<br />    <!--Multi-Line--></div>

運行結果是不是和你想的不太一樣呢。這個檔案的執行順序是這樣的：

• 伺服器在這個檔案中逐行搜尋Razor標記中的C#代碼，如果讀到的是C#單行或多行代碼，就執行它。執行後輸出的結果就是上面代碼中綠色的部分。如果搜尋到了行內代碼，就把這一段代碼替換成代碼對應的值，對應上面代碼中黃色部分。這樣把這個檔案處理一遍之後。
• 然後伺服器會把檔案中所有非Razor標記的代碼寫入要輸出的檔案，對應上面代碼中藍色和黃色部分。

五、keyword(){}特殊文法

在遇到如if、for、while等具有"keyword(){}"形式的C#代碼結構時，Razor標記可以寫成"@keyword(){}"這樣的特殊形式。

這個不是強制性的，可以不用。下面給出兩個例子作為對比。

注釋掉Index.cshtml中現有的代碼。添加如下代碼：

@if (1 > 2)
{
Response.Write("1 > 2 <br />");
}
else
{
Response.Write("1 <= 2 <br />");
}

@for (int i = 0; i < 3; i++)
{
Response.Write(i + " <br />");
}

選擇在瀏覽器·中查看，得到如下結果：

六、在Razor標記內寫入文本

注釋掉Index.cshtml原有代碼，寫入下面代碼。

@{    var name1 = "Slark";    <p>var name2 = "Slark";</p>    @:var name3 = "Slark";<br />    <text>            var name4 = "Slark";<br />            var name5 = "Slark";    </text>}

代碼看起來是不是很奇怪？來看一下執行結果：

一般情況下，@{}中的代碼只被當作C#代碼運行。而上面代碼中只有name1被當作C#代碼處理而其他幾行都被當作文本輸出了。

之前的內容都是介紹怎麼在html檔案中嵌入伺服器代碼，現在來介紹怎麼在伺服器代碼裡嵌入html代碼...

如上面代碼中所示，一共三種方法：

• 在Razor標記的代碼中如果有成對的html標記，則這個標記及其內容會被當作普通文本輸出。如上面的 <p>var name2 = "Slark";</p>
• 在Razor標記的代碼中如果有"@:"，則其後的一行代碼會被當作普通文本輸出。如上面的 @:var name3 = "Slark";<br />
• 在Razor標記的代碼中如果有<text>...</text>標記，則其內容會被當作普通文本輸出。如上面的 <text> var name4 = "Slark";<br /> var name5 = "Slark"; </text>

您的推薦和留言是我繼續更新的動力，謝謝。

上一節：ASP.NET MVC5 + EF6 入門教程 (5) Model和Entity Framework

下一節：ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的柵格系統

ASP.NET MVC5 + EF6 入門教程 (6) View中的Razor使用