ASP.NET中的Razor語法簡介

2022-06-13 18:00:44

當伺服器讀取頁面時，它首先執行 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:2734796332@qq.com.this 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 />

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。