隨著技術(shù)的發(fā)展，ASP.NET Core MVC也推出了好長(zhǎng)時(shí)間，經(jīng)過(guò)不斷的版本更新迭代，已經(jīng)越來(lái)越完善，本系列文章主要講解ASP.NET Core MVC開發(fā)B/S系統(tǒng)過(guò)程中所涉及到的相關(guān)內(nèi)容，適用于初學(xué)者，在校畢業(yè)生，或其他想從事ASP.NET Core MVC 系統(tǒng)開發(fā)的人員。 經(jīng)過(guò)前幾篇文章的講解，初步了解ASP.NET Core MVC項(xiàng)目創(chuàng)建，啟動(dòng)運(yùn)行，以及命名約定，創(chuàng)建控制器，視圖，模型，接收參數(shù)，傳遞數(shù)據(jù)，路由，頁(yè)面布局，wwwroot和客戶端庫(kù)等內(nèi)容，今天繼續(xù)講解ASP.NET Core MVC 中Razor語(yǔ)法等相關(guān)內(nèi)容，僅供學(xué)習(xí)分享使用。

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-422860.html

Razor視圖

?

在ASP.NET Core MVC項(xiàng)目中，默認(rèn)創(chuàng)建的視圖，都是以cshtml為后綴的Razor視圖。

?基于 Razor 的視圖模板：

• 具有?.cshtml?文件擴(kuò)展名。
• 提供一種巧妙的方法來(lái)使用 C# 創(chuàng)建 HTML 輸出。

?

添加Razor視圖

?

在項(xiàng)目中添加視圖，可以通過(guò)在控制器中的Action上右鍵進(jìn)行添加對(duì)應(yīng)視圖，也可以通過(guò)在Views中創(chuàng)建目錄，然后目錄上右鍵添加視圖，如下所示：

?打開添加視圖對(duì)話框，選擇Razor視圖，點(diǎn)擊【添加】按鈕，如下所示：

?輸入視圖名稱，如Index，點(diǎn)擊【添加】按鈕，模板可根據(jù)具體需要是否添加，如下所示：

?經(jīng)過(guò)以上步驟后，即可添加視圖成功，如下所示：

?默認(rèn)視圖效果如下所示：

?

Razor介紹

?

Razor 是一種標(biāo)記語(yǔ)法，用于將基于 .NET 的代碼嵌入網(wǎng)頁(yè)中。 Razor 語(yǔ)法由 Razor 標(biāo)記、C# 和 HTML 組成。 包含 Razor 的文件通常具有?.cshtml?文件擴(kuò)展名。?從 Razor 標(biāo)記呈現(xiàn) HTML 與從 HTML 文件呈現(xiàn) HTML 沒(méi)有什么不同。

?

Razor語(yǔ)法

?

Razor 支持 C#，并使用?@?符號(hào)從 HTML 轉(zhuǎn)換為 C#。 Razor 計(jì)算 C# 表達(dá)式，并將它們呈現(xiàn)在 HTML 輸出中。當(dāng)符號(hào)?@?后跟?Razor 保留關(guān)鍵字時(shí)，它將轉(zhuǎn)換為 Razor特定于 的標(biāo)記。 否則會(huì)轉(zhuǎn)換為純 HTML。不過(guò)凡事總有特例，如包含在email中的@符號(hào)將不會(huì)被當(dāng)成轉(zhuǎn)換字符，而是直接顯示。

1 <a href="mailto:Alan.hsiang@qq.com">Alan.hsiang@qq.com</a>

?

隱式Razor表達(dá)式

?

隱式 Razor 表達(dá)式以?@?開頭，后跟 C# 代碼。

1 <p>今天是：@DateTime.Now</p>
2 <p>昨天是：@DateTime.Now.AddDays(-1)</p>

隱式表達(dá)式不能包含空格，但 C#?await?關(guān)鍵字除外。 如果該 C# 語(yǔ)句具有明確的結(jié)束標(biāo)記，則可以混用空格：

 1 @{
 2     ViewData["Title"] = "Index";
 3 
 4     async Task<string> DoSomething(string left,string right)
 5     {
 6         return left + right;
 7 
 8     }
 9 }
10 
11 
12 <h1>Index</h1>
13 <p>@await DoSomething("hello", "world")</p>

隱式表達(dá)式不能包含 C# 泛型，因?yàn)槔ㄌ?hào) (<>) 內(nèi)的字符會(huì)被解釋為 HTML 標(biāo)記。 以下代碼無(wú)效：

 1 @{
 2     ViewData["Title"] = "Index";
 3 
 4     string? GenericMethod<T>(T t)
 5     {
 6         return t?.ToString();
 7     }
 8 }
 9 
10 
11 <h1>Index</h1>
12 <!--不能使用泛型-->
13 <p>@GenericMethod<int>(0)</p>

注意：泛型方法調(diào)用必須包裝在?顯式 Razor 表達(dá)式?或?Razor 代碼塊中。

?

顯式Razor表達(dá)式

?

顯式 Razor 表達(dá)式由?@?符號(hào)和一對(duì)小括號(hào)組成，將計(jì)算?@()?括號(hào)中的所有內(nèi)容，并將其呈現(xiàn)到輸出中。 若要進(jìn)行一些計(jì)算，可使用以下 Razor 標(biāo)記：

 1 @{
 2     ViewData["Title"] = "Index";
 3 
 4     int a=1,b=2,c=3,d=4;
 5 }
 6 
 7 
 8 <h1>Index</h1>
 9 <!--顯式Razor表達(dá)式-->
10 <p>@(a+b+c+d)</p>
11 <!--隱式Razor表達(dá)式-->
12 <p>@a+b+c+d</p>

在上述例子中，顯示Razor表達(dá)式和隱式Razor表達(dá)式在頁(yè)面顯示的效果是不同的，如下所示：

?另外在隱式Razor表達(dá)式中，不支持泛型，在顯示Razor表達(dá)式中是支持泛型的。如下所示：

1 <p>@(GenericMethod<int>(10))</p>

?

表達(dá)式編碼

?

通過(guò)Razor表達(dá)式進(jìn)行輸出時(shí)，有時(shí)并不能達(dá)到想要效果，如下所示：

1 <!--輸出原生標(biāo)簽并進(jìn)行轉(zhuǎn)義-->
2 <div>@("<span>Hello World</span>")</div>
3 <!--輸入標(biāo)簽中的內(nèi)容-->
4 <div>@Html.Raw("<span>Hello World</span>")</div>

在頁(yè)面上輸出結(jié)果如下所示：

?

Razor代碼塊

?

Razor 代碼塊以?@?開始，并括在?{}?中。 代碼塊內(nèi)的 C# 代碼不會(huì)呈現(xiàn)，這點(diǎn)與表達(dá)式不同。 一個(gè)視圖中的代碼塊和表達(dá)式共享相同的作用域并按順序進(jìn)行定義：

 1 @{
 2     var quote = "我是公子小六";
 3 }
 4 
 5 <p>@quote</p>
 6 
 7 @{
 8     quote = "小六公子是我";
 9 }
10 
11 <p>@quote</p>

在頁(yè)面輸出 如下所示：

?

隱式轉(zhuǎn)換

?

代碼塊中的默認(rèn)語(yǔ)言是 C#，但 Razor 頁(yè)面可以轉(zhuǎn)換回 HTML：

1 @{
2     var name = "我是公子小六";
3     <p>Now in HTML, was in C# @name</p>
4 }

?

顯式行轉(zhuǎn)換

?

要在代碼塊內(nèi)以 HTML 形式呈現(xiàn)整個(gè)行的其余內(nèi)容，請(qǐng)使用?@:?語(yǔ)法：

1 @for (var i = 0; i < students.Length; i++)
2 {
3     var student = students[i];
4     @:student: @student.Name
5 }

如果代碼中沒(méi)有?@:，會(huì)生成 Razor 運(yùn)行時(shí)錯(cuò)誤。

Razor 文件中多余的?@?字符可能會(huì)導(dǎo)致代碼塊中后面的語(yǔ)句發(fā)生編譯器錯(cuò)誤。 這些額外的?@?編譯器錯(cuò)誤：

• 可能難以理解，因?yàn)閷?shí)際錯(cuò)誤發(fā)生在報(bào)告的錯(cuò)誤之前。
• 在將多個(gè)隱式表達(dá)式和顯式表達(dá)式合并到單個(gè)代碼塊后很常見(jiàn)。

?

控制結(jié)構(gòu)

?

控制結(jié)構(gòu)是對(duì)代碼塊的擴(kuò)展。 代碼塊的各個(gè)方面（轉(zhuǎn)換為標(biāo)記、內(nèi)聯(lián) C#）同樣適用于以下結(jié)構(gòu)：

?

條件控制語(yǔ)句

?

條件?@if, else if, else,如下所示：

 1 @{
 2     int value = 10;
 3 }
 4 
 5 @if (value % 2 == 0)
 6 {
 7     <p>The value was even.</p>
 8 }
 9 else if (value >= 1337)
10 {
11     <p>The value is large.</p>
12 }
13 else
14 {
15     <p>The value is odd and small.</p>
16 }

以下標(biāo)記展示如何使用 switch 語(yǔ)句：

 1 @switch (value)
 2 {
 3     case 1:
 4         <p>The value is 1!</p>
 5         break;
 6     case 1337:
 7         <p>Your number is 1337!</p>
 8         break;
 9     default:
10         <p>Your number wasn't 1 or 1337.</p>
11         break;
12 }

?

循環(huán)控制

?

循環(huán)?@for, @foreach, @while, and @do while

@for循環(huán)

 1 @{
 2     var students = new Student[]
 3     {
 4         new Student(){Id=1,Name="公"},
 5         new Student(){Id=2,Name="子"},
 6         new Student(){Id=3,Name="小"},
 7         new Student(){Id=4,Name="六"},
 8     };
 9 }
10 @for (var i = 0; i < students.Length; i++)
11 {
12     var student = students[i];
13     <div>
14         <span>Id: @student.Id</span>
15         <span>Name: @student.Name</span>
16     </div>
17 }

@foreach循環(huán)

1 @foreach (var student in students)
2 {
3     <div>
4         <span>Id: @student.Id</span>
5         <span>Name: @student.Name</span>
6     </div>
7 }

@while循環(huán)

 1 @{ var i = 0; }
 2 @while (i < students.Length)
 3 {
 4     var student = students[i];
 5     <div>
 6         <span>Id: @student.Id</span>
 7         <span>Name: @student.Name</span>
 8     </div>
 9     i++;
10 }

@do while循環(huán)

 1 @{ var i = 0; }
 2 @do
 3 {
 4     var student = students[i];
 5     <div>
 6         <span>Id: @student.Id</span>
 7         <span>Name: @student.Name</span>
 8     </div>
 9 
10     i++;
11 } while (i < students.Length);

以上4種循環(huán)方式實(shí)現(xiàn)的效果都是一樣的，如下所示：

?

異常捕獲

?

@try, catch, finally，異常處理與 C# 類似：

 1 @try
 2 {
 3     throw new InvalidOperationException("無(wú)效操作.");
 4 }
 5 catch (Exception ex)
 6 {
 7     <p>異常信息: @ex.Message</p>
 8 }
 9 finally
10 {
11     <p>finally塊.</p>
12 }

在頁(yè)面上輸出如下內(nèi)容：

?

Razor注釋

?

Razor 支持 C# 和 HTML 注釋：

 1 @{
 2     /* C# comment */
 3     // Another C# comment
 4 }
 5 <!-- HTML comment -->
 6 @*
 7     @{
 8         /* C# comment */
 9         // Another C# comment
10     }
11     <!-- HTML comment -->
12 *@

在呈現(xiàn)網(wǎng)頁(yè)之前，服務(wù)器會(huì)刪除 Razor 注釋。 Razor 使用?@* *@?來(lái)分隔注釋。 以上代碼第3段已被注釋禁止，因此服務(wù)器不呈現(xiàn)任何標(biāo)記。

?

Razor保留關(guān)鍵字

?

• page
• namespace
• functions
• inherits
• model
• section
• helper（ASP.NET Core 當(dāng)前不支持）

Razor 關(guān)鍵字使用?@(Razor Keyword)?進(jìn)行轉(zhuǎn)義（例如，@(functions)）。

• case
• do
• default
• for
• foreach
• if
• else
• lock
• switch
• try
• catch
• finally
• using
• while

C# Razor 關(guān)鍵字必須使用?@(@C# Razor Keyword)?進(jìn)行雙轉(zhuǎn)義（例如，@(@case)）。 第一個(gè)?@?對(duì) Razor 分析程序轉(zhuǎn)義。 第二個(gè)?@?對(duì) C# 分析器轉(zhuǎn)義。

• class

以上就是ASP.NET Core MVC 從入門到精通之Razor語(yǔ)法簡(jiǎn)介的主要內(nèi)容，關(guān)于其他Razor語(yǔ)法內(nèi)容，可參考文檔：

參考文檔：https://learn.microsoft.com/zh-cn/aspnet/core/mvc/views/razor?view=aspnetcore-7.0

?

到了這里，關(guān)于ASP.NET Core MVC 從入門到精通之Razor語(yǔ)法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！