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?

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

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

源碼下載：點(diǎn)我下載

一、Razor簡介

在解決方案資源管理器中查看Views文件夾下的文件，如下圖所示。

文件的后綴名都是.cshtml。這是什么文件呢？顧名思義，cshtml = cs + html，就是一個(gè)包含C Sharp(C#)代碼的HTML文件。

既然文件包含原本HTML文件里的客戶端代碼和C#這樣的服務(wù)器端代碼，我們就得想個(gè)辦法區(qū)分這兩種代碼。這里我們就需要Razor。

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

在我看來，Razor就是區(qū)分服務(wù)器端代碼和其它代碼的一種標(biāo)記語言。

二、Razor注釋

為了更好的觀察運(yùn)行結(jié)果，這里我們禁用掉模板。打開Views文件夾下的_ViewStart.cshtml文件。注釋掉其中所有代碼，如下圖所示。

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

從上面可以看出cshtml文件中的多行注釋就是在第一行開頭寫@*然后最后一行結(jié)尾寫*@。

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

@* A one line code comment *@

三、Razor的三種基本形式

Razor通過三種標(biāo)記方式來確定指定區(qū)域的代碼是服務(wù)器端代碼：

• 行內(nèi)(Inline)標(biāo)記
• 單行(Single Line)標(biāo)記
• 多行(Multi-Line)標(biāo)記

打開Views文件夾下的First文件夾里的Index.cshtml文件。寫入如下代碼。圖中黃色部分就是Razor標(biāo)記下的服務(wù)器端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>

從上面代碼中可以看出行內(nèi)標(biāo)記@后面可以緊跟一個(gè)已經(jīng)被定義的變量或者有返回值的函數(shù)

單行標(biāo)記中每一行其實(shí)就是包含了一個(gè)C#語句，用分號(hào)結(jié)尾。

多行標(biāo)記就是包含了多行C#語句。

四、語句運(yùn)行順序

然后選擇剛才編輯的Index.cshtml，點(diǎn)擊菜單欄中的"在瀏覽器中查看"，顯示結(jié)果如下。

右鍵點(diǎn)擊頁面選擇“查看源”，結(jié)果如下：

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>

運(yùn)行結(jié)果是不是和你想的不太一樣呢。這個(gè)文件的執(zhí)行順序是這樣的：

• 服務(wù)器在這個(gè)文件中逐行搜尋Razor標(biāo)記中的C#代碼，如果讀到的是C#單行或多行代碼，就執(zhí)行它。執(zhí)行后輸出的結(jié)果就是上面代碼中綠色的部分。如果搜尋到了行內(nèi)代碼，就把這一段代碼替換成代碼對(duì)應(yīng)的值，對(duì)應(yīng)上面代碼中黃色部分。這樣把這個(gè)文件處理一遍之后。
• 然后服務(wù)器會(huì)把文件中所有非Razor標(biāo)記的代碼寫入要輸出的文件，對(duì)應(yīng)上面代碼中藍(lán)色和黃色部分。

五、keyword(){}特殊語法

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

這個(gè)不是強(qiáng)制性的，可以不用。下面給出兩個(gè)例子作為對(duì)比。

注釋掉Index.cshtml中現(xiàn)有的代碼。添加如下代碼：

@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 />");
}

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

六、在Razor標(biāo)記內(nèi)寫入文本

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

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

代碼看起來是不是很奇怪？來看一下執(zhí)行結(jié)果：

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

之前的內(nèi)容都是介紹怎么在html文件中嵌入服務(wù)器代碼，現(xiàn)在來介紹怎么在服務(wù)器代碼里嵌入html代碼...

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

• 在Razor標(biāo)記的代碼中如果有成對(duì)的html標(biāo)記，則這個(gè)標(biāo)記及其內(nèi)容會(huì)被當(dāng)作普通文本輸出。如上面的?<p>var name2 = "Slark";</p>
• 在Razor標(biāo)記的代碼中如果有"@:"，則其后的一行代碼會(huì)被當(dāng)作普通文本輸出。如上面的?@:var name3 = "Slark";<br />
• 在Razor標(biāo)記的代碼中如果有<text>...</text>標(biāo)記，則其內(nèi)容會(huì)被當(dāng)作普通文本輸出。如上面的 <text> var name4 = "Slark";<br /> var name5 = "Slark"; </text>

您的推薦和留言是我繼續(xù)更新的動(dòng)力，謝謝。

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

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

posted on 2015-01-05 10:36 NET未來之路 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/4202945.html

總結(jié)

以上是生活随笔為你收集整理的ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。