您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET Web Pages Razor 語法完整指南：C# 與 VB.NET 程式碼嵌入、程式碼區塊與內嵌運算式詳解

編輯：ASP.NET 基礎

ASP.NET Web Pages Razor 語法完整指南

掌握 Razor 標記語法核心規則，支援 C# 與 VB.NET 兩種語言，輕鬆在 HTML 中嵌入伺服器端程式碼，建立動態網頁。

什麼是 Razor？

將伺服器端程式碼嵌入網頁的標記語法
擁有傳統 ASP.NET 標記功能，但更簡單、易學
伺服器端標記語法，類似 ASP、PHP
支援 C# 與 Visual Basic 程式語言
檔案副檔名：.cshtml (C#)、.vbhtml (VB)

第一個 Razor 程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Web Pages Demo</title>
</head>
<body>
    <h1>Hello Web Pages</h1>
    <p>現在時間：@DateTime.Now</p>
</body>
</html>

關鍵點： @ 符號標記 Razor 程式碼，伺服器執行後輸出結果至 HTML。

C# Razor 語法規則

核心語法表

語法元素	規則	範例
程式碼區塊	@{ ... }	@{ var x = 1; }
內嵌運算式	@ 開頭	@DateTime.Now、@Model.Name
陳述式結尾	分號 ;	var msg = "Hello";
變數宣告	var 關鍵字	var name = "Razor";
字串常值	雙引號 ""	"Hello World"
大小寫敏感	是	Var ≠ var
檔案副檔名	.cshtml	Index.cshtml

C# 完整範例

<!-- 單一陳述式區塊 -->
@{ var myMessage = "Hello World"; }

<!-- 內嵌運算式/變數 -->
<p>myMessage 的值：@myMessage</p>

<!-- 多重陳述式區塊 -->
@{
    var greeting = "歡迎來到我們的網站！";
    var weekDay = DateTime.Now.DayOfWeek;
    var greetingMessage = greeting + " 今天是：" + weekDay;
}
<p>問候語：@greetingMessage</p>

控制流程範例

@{
    var score = 85;
    if (score >= 60) {
        <p>恭喜通過！分數：@score</p>
    } else {
        <p>加油！分數：@score</p>
    }
}

@{
    var fruits = new[] { "蘋果", "香蕉", "橘子" };
    <ul>
    @foreach (var fruit in fruits) {
        <li>@fruit</li>
    }
    </ul>
}

VB.NET Razor 語法規則

核心語法表

語法元素	規則	範例
程式碼區塊	@Code ... End Code	@Code Dim x = 1 End Code
內嵌運算式	@ 開頭	@DateTime.Now、@Model.Name
變數宣告	Dim 關鍵字	Dim name = "Razor"
字串常值	雙引號 ""	"Hello World"
字串串接	& 運算子	"Hello " & "World"
大小寫敏感	否	Dim = dim = DIM
檔案副檔名	.vbhtml	Index.vbhtml

VB.NET 完整範例

<!-- 單一陳述式區塊 -->
@Code Dim myMessage = "Hello World" End Code

<!-- 內嵌運算式/變數 -->
<p>myMessage 的值：@myMessage</p>

<!-- 多重陳述式區塊 -->
@Code
    Dim greeting = "歡迎來到我們的網站！"
    Dim weekDay = DateTime.Now.DayOfWeek
    Dim greetingMessage = greeting & " 今天是：" & weekDay
End Code
<p>問候語：@greetingMessage</p>

VB 控制流程範例

@Code
    Dim score = 85
    If score >= 60 Then
        @<p>恭喜通過！分數：@score</p>
    Else
        @<p>加油！分數：@score</p>
    End If
End Code

@Code
    Dim fruits = {"蘋果", "香蕉", "橘子"}
    @<ul>
    For Each fruit In fruits
        @<li>@fruit</li>
    Next
    @</ul>
End Code

Razor 進階技巧

HTML 編碼與原始輸出

語法	行為	用途
@運算式	自動 HTML 編碼	預設安全，防 XSS
@Html.Raw(運算式)	輸出原始 HTML	信任內容、預渲染 HTML

註解語法

@* 這是伺服器端註解，不會輸出至瀏覽器 *@

@{
    // C# 單行註解
    /* C# 多行註解 */
}

@Code
    ' VB 單行註解
End Code

巢狀 HTML 標記輸出

@{
    var items = new[] { "項目1", "項目2", "項目3" };
    if (items.Length > 0) {
        <ul class="item-list">
        @foreach (var item in items) {
            <li data-value="@item">@item</li>
        }
        </ul>
    }
}

邏輯運算子在 HTML 屬性中

<input type="checkbox" @(isChecked ? "checked" : "") />
<div class="@(isActive ? "active" : "inactive")">內容</div>

C# vs VB.NET 快速比較

特性	C#	VB.NET
程式碼區塊	@{ ... }	@Code ... End Code
變數宣告	var	Dim
字串串接	+	&
大小寫敏感	是	否
副檔名	.cshtml	.vbhtml
內嵌運算式	@運算式	@運算式
HTML 編碼	自動	自動