ASP.NET中的Razor語法簡介

Posted on 2022-06-13 by WalkonNet

當服務器讀取頁面時，它首先運行 Razor 代碼，然後再發送 HTML 頁面到瀏覽器。在服務器上執行的代碼能夠執行一些在瀏覽器上不能完成的任務，比如，訪問服務器數據庫。服務器代碼能創建動態的 HTML 內容，然後發送到瀏覽器。從瀏覽器上看，服務器代碼生成的 HTML 與靜態的 HTML 內容沒有什麼不同。

https://docs.microsoft.com/zh-cn/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c

一、Razor 語法

1、 Razor C# 語法規則

Razor 代碼塊包含在 @{ … } 中，當行或多行。
內聯表達式（變量和函數）以 @ 開頭：@變量或 @( 表達式 )
代碼語句用分號結束
變量使用 var 關鍵字聲明
字符串用引號括起來
C# 代碼區分大小寫
C# 文件的擴展名是 .cshtml

<!-- Single statement block -->
@{ var myMessage =    "Hello World"; }

<!-- Inline expression or variable -->
<p>The value of myMessage is: 
@myMessage
</p> 

<!--    Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>The greeting is: 
@greetingMessage
</p>

2、Razor的作用域

大括號裡面的就是表示作用域的范圍，用形如 “@[code]”來寫一段代碼塊。在作用域 “@(code)” 中輸出也是用@符號的。

我的年齡：
@{
    int age = 25;
    string sex = "男";
    @age
}性別： @(sex)

3、Razor和Html混合編寫

a.在作用域內容如果是以html標簽開始則視為文本輸出
b.如果輸出@，則使用@@
c.如果需在代碼塊中直接輸出純文字而不帶HTML標簽，則可以使用@:標簽，如果在 "@:" 後面加上@就表示Razor語句的變量。

@{
    var strzm = "abc";
    @:this is a mail:[email protected] is var:@strzm,this is mail@strzm,this is @@

    //輸出abc
    @strzm
 }

如果需要在代碼塊中輸出續或不連續的多行純文本，則使用text標簽較為方便。

@if (Model.Price > 5M) {
<text> 名稱：<b>@Model.Name</b><br /> 分類：<b>@Model.Description</b><br /> 價錢：<b>@Model.Price</b><br /> <pre> 測試行一: <a>aaaa</a> 測試行二: @@ fda@aaa </pre> </text>

}

4、變量

一個變量的名稱必須以字母字符開頭，並且不能包含空格或者保留字符。變量使用 var 關鍵字聲明，或通過使用具體類型聲明。

// Using the var keyword:
var greeting = "Welcome to RUNOOB.COM";
var counter = 103;

// Using data types:
string greeting = "Welcome to RUNOOB.COM";
int counter = 103;

5、數據類型

int 整數（全數字） 103, 12, 5168
float 浮點數 3.14, 3.4e38
decimal 十進制數字（高精度） 1037.196543
bool 佈爾值 true, false
string 字符串 "Hello RUNOOB.COM", "John"

6、轉換數據類型(string類型才能轉)

AsInt()\IsInt(): 轉換字符串為整數

if (myString.IsInt()){
   myInt=myString.AsInt();
}

AsFloat()\IsFloat(): 轉換字符串為浮點數。
AsDecimal()\IsDecimal():轉換字符串為十進制數。
AsDateTime()\IsDateTime(): 轉換字符串為 ASP.NET DateTime 類型。
AsBool()\IsBool(): 轉換字符串為佈爾值。
ToString(): 轉換任何數據類型為字符串。
```
var  myInt=1234;
myString=myInt.ToString();
```

7、循環

For 循環

<body>
@for(var i = 10; i < 21; i++) {<p>Line @i</p>}
</body>

For Each 循環

<body>
<ul>
@foreach (var x in Request.ServerVariables)
{
<li>@x</li>
}
</ul>
</body>

While 循環

<body>
@{ var i = 0; while (i < 5) {i += 1; <p>Line @i</p> } }
</body>

8、數組

</p>
<p>Kai is now in position@{
string[] members = {"Jani", "Hege", "Kai", "Jim"};
int i = Array.IndexOf(members, "Kai")+1;
int len = members.Length;
string x = members[2-1];
}
<html>
<body>
<h3>Members</h3>
@foreach (var person in members)
{
<p>@person</p>

}
<p>The number of names in Members are 
@l
en</p>
<p>The person at position 2 is 
@x
</p>
<p>Kai is now in position 
@i
</p>
</body>
</html>

9、邏輯條件

If 條件

@{var price=50;}
<html>
<body>
@if (price>30)
{
<p>The price is too high.</p>

}
</body>
</html>

Else 條件

@{var price=20;}
<html>
<body>
@if (price>30)
{
<p>The price is too high.</p> } else { <p>The price is OK.</p>

} 
</body>
</html>

Else If 條件

@{var price=25;}
<html>
<body>
@if (price>=30) { <p>The price is high.</p> } else if (price>20 && price<30) { <p>The price is OK.</p> } else { <p>The price is low.</p> }
</body>
</html>

Switch 條件

@{
var weekday=DateTime.Now.DayOfWeek;
var day=weekday.ToString();
var message="";
}
<html>
<body>
@switch(day)
{
case "Monday":
message="This is the first weekday.";
break;
case "Thursday":
message="Only one day before weekend.";
break;
case "Friday":
message="Tomorrow is weekend!";
break;
default:
message="Today is " + day;
break;
}
<p>
@message
</p>
</body>
</html>

二、Razor引擎

1、佈局(Layout)(@RenderBody()方法)

解釋：Layout方式佈局就相當於一個模板，我們在它地址地方去添加代碼。類似於ASP.NET母版頁中的ContentPlaceHolder服務器控件，在MVC中使用@RenderBody()來呈現子Web頁面的內容，它可以省去我們在每個視圖文件中寫相同的html元素、JS和樣式等的工作。
母版頁：(~/Views/Layout/_SiteLayout.cshtml)

母版的呈現是MVC內部處理的，這種以下劃線（_）開頭的視圖文件，一般是不能直接返回給用戶。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>我的網站 - @Page.Title</title>
    </head>
    <body>
        @RenderBody()
    </body>
</html>

子頁面：(~/Views/Home/About.cshtml)

@{
    Layout = "~/Views/Layout/_SiteLayout.cshtml";
}
<h1>
    關於我的網站
</h1>
<p>
    這是一些內容顯示在關於我們這個頁面，我們用的是SiteLayout.cshtml這個主頁母版頁。
    <br />
    當前時間：@DateTime.Now
</p>

2、頁面(@RenderPage()方法)

解釋：page當需要在一個頁面中，輸出另外一個Razor文件(頁面)的內容時候用到，比如頭部或尾部這些公共的內容時需要用到，用@RenderPage()方法

母版頁：(~/Views/Layout/_SiteLayout.cshtml)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Simple Site</title>
</head>
<body>
   <!--頭部-->    
   @RenderPage("~/Views/Layout/_header.cshtml")
</body>
</html>

公共頁：(~/Views/Layout/_header.cshtml)

<div id="header">
        <a href="#" rel="external nofollow"  rel="external nofollow" >主頁</a>
        <a href="#" rel="external nofollow"  rel="external nofollow" >關於我們</a>
</div>

3、Section區域(@RenderSection())

解釋：Section是定義在Layout的頁面中使用的。在Layout的頁面中用。在要Layout的父頁面中使用@RenderSection()方法。

@RenderSecion()這個占位符表示：在這裡會渲染頁面裡面的一個節（可以是html代碼也可以是c#代碼和Html的結合體）。
@RenderSection("scripts", required: false)做一個補充說明，第一個參數指明：在子頁面被渲染的節的名稱，第二個參數：指定子頁面這個節是否是必需的，如果指定瞭required:true;但是在子頁面沒有給這個名稱的節的話，編譯是通不過的。

母版頁：(~/Views/Layout/_SiteLayout.cshtml)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Simple Site</title>
</head>
<body>
    <div id="left-menu">
        @RenderSection("menu",true)
    </div>
</body>
</html>

公共頁：(~/Views/Layout/_menu.cshtml)

@{
    Layout = "~/Views/Layout/_SiteLayout.cshtml";
}
<h1>
    關於我的網站
</h1>
<p>
    這是一些內容顯示在關於我們這個頁面，我們用的是SiteLayout.cshtml這個主頁母版頁。
    <br />
    當前時間：@DateTime.Now
</p>
@section menu{
    
<ul id="sub-menu"> <li>菜單1</li> <li>菜單2</li> <li>菜單3</li> <li>菜單4</li> </ul> }

如果在子頁面中沒有去實現瞭menu瞭，則會拋出異常。我們可以使用它的重載@RenderSection("menu", false)

@if (IsSectionDefined("menu")) { @RenderSection("menu", false) } else { <p>menu Section is not defined!</p> }

三、Razor 幫助器

ASP.NET 幫助器是通過幾行簡單的 Razor 代碼即可訪問的組件。您可以使用 Razor 語法構建自己的幫助器，或者使用內建的 ASP.NET 幫助器。

下面是一些有用的 Razor 幫助器的簡短說明：

Web Grid（Web 網格）
Web Graphics（Web 圖形）
Google Analytics（Google 分析）
Facebook Integration（Facebook 集成）
Twitter Integration（Twitter 集成）
Sending Email（發送電子郵件）
Validation（驗證）

@Href("~/")//表示網站的根目錄
@Html.Raw('<font color='red'>紅字</font>')就會顯示出紅色的”紅字“，不用的話會直接顯示這段html字符串（<font color='red'>紅字</font>）

自定義Helper

@helper就是可以定義可重復使用的幫助器方法，不僅可以在同一個頁面不同地方使用，還可以在不同的頁面使用。

1、新建一個HelperMath.cshtml頁面

2、HelperMath.cshtml頁面寫方法

@*求和*@
@helper sum(int a, int b)
{
    int result = a + b;
    @result
}

3、Index.cshtml頁面調用

1+2= @HelperMath.sum(1, 2)
 <br />

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

ASP.NET中的Razor語法簡介

目錄

一、Razor 語法

1、 Razor C# 語法規則

2、Razor的作用域

3、Razor和Html混合編寫

4、變量

5、數據類型

6、轉換數據類型(string類型才能轉)

7、循環

8、數組

9、邏輯條件

二、Razor引擎

1、佈局(Layout)(@RenderBody()方法)

2、頁面(@RenderPage()方法)

3、Section區域(@RenderSection())

三、Razor 幫助器

自定義Helper

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

一、Razor 語法

1、 Razor C# 語法規則

2、Razor的作用域

3、Razor和Html混合編寫

4、變量

5、數據類型

6、轉換數據類型(string類型才能轉)

7、循環

8、數組

9、邏輯條件

二、Razor引擎

1、佈局(Layout)(@RenderBody()方法)

2、頁面(@RenderPage()方法)

3、Section區域(@RenderSection())

三、Razor 幫助器

自定義Helper

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆