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的柵格系統