ASP.NET Core MVC 從入門到精通之Razor語法

来源:https://www.cnblogs.com/hsiang/archive/2023/04/23/17344033.html
-Advertisement-
Play Games

隨著技術的發展，ASP.NET Core MVC也推出了好長時間，經過不斷的版本更新迭代，已經越來越完善，本系列文章主要講解ASP.NET Core MVC開發B/S系統過程中所涉及到的相關內容，適用於初學者，在校畢業生，或其他想從事ASP.NET Core MVC 系統開發的人員。 經過前幾篇文章... ...


隨著技術的發展，ASP.NET Core MVC也推出了好長時間，經過不斷的版本更新迭代，已經越來越完善，本系列文章主要講解ASP.NET Core MVC開發B/S系統過程中所涉及到的相關內容，適用於初學者，在校畢業生，或其他想從事ASP.NET Core MVC 系統開發的人員。 經過前幾篇文章的講解，初步瞭解ASP.NET Core MVC項目創建，啟動運行，以及命名約定，創建控制器，視圖，模型，接收參數，傳遞數據，路由，頁面佈局，wwwroot和客戶端庫等內容，今天繼續講解ASP.NET Core MVC 中Razor語法等相關內容，僅供學習分享使用。

 

Razor視圖

 

在ASP.NET Core MVC項目中，預設創建的視圖，都是以cshtml為尾碼的Razor視圖。

 基於 Razor 的視圖模板：

  • 具有 .cshtml 文件擴展名。
  • 提供一種巧妙的方法來使用 C# 創建 HTML 輸出。

 

添加Razor視圖

 

在項目中添加視圖，可以通過在控制器中的Action上右鍵進行添加對應視圖，也可以通過在Views中創建目錄，然後目錄上右鍵添加視圖，如下所示：

 打開添加視圖對話框，選擇Razor視圖，點擊【添加】按鈕，如下所示：

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

 經過以上步驟後，即可添加視圖成功，如下所示：

 預設視圖效果如下所示：

 

Razor介紹

 

Razor 是一種標記語法，用於將基於 .NET 的代碼嵌入網頁中。 Razor 語法由 Razor 標記、C# 和 HTML 組成。 包含 Razor 的文件通常具有 .cshtml 文件擴展名。 從 Razor 標記呈現 HTML 與從 HTML 文件呈現 HTML 沒有什麼不同。

 

Razor語法

 

Razor 支持 C#，並使用 @ 符號從 HTML 轉換為 C#。 Razor 計算 C# 表達式，並將它們呈現在 HTML 輸出中。當符號 @ 後跟 Razor 保留關鍵字時，它將轉換為 Razor特定於 的標記。 否則會轉換為純 HTML。不過凡事總有特例，如包含在email中的@符號將不會被當成轉換字元，而是直接顯示。

1 <a href="mailto:[email protected]">[email protected]</a>

 

隱式Razor表達式

 

隱式 Razor 表達式以 @ 開頭，後跟 C# 代碼。

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

隱式表達式不能包含空格，但 C# await 關鍵字除外。 如果該 C# 語句具有明確的結束標記，則可以混用空格：

 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>

隱式表達式不能包含 C# 泛型，因為括弧 (<>) 內的字元會被解釋為 HTML 標記。 以下代碼無效：

 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>

註意：泛型方法調用必須包裝在 顯式 Razor 表達式 或 Razor 代碼塊中。

 

顯式Razor表達式

 

顯式 Razor 表達式由 @ 符號和一對小括弧組成，將計算 @() 括弧中的所有內容，並將其呈現到輸出中。 若要進行一些計算，可使用以下 Razor 標記：

 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表達式-->
10 <p>@(a+b+c+d)</p>
11 <!--隱式Razor表達式-->
12 <p>@a+b+c+d</p>

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

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

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

 

表達式編碼

 

通過Razor表達式進行輸出時，有時並不能達到想要效果，如下所示：

1 <!--輸出原生標簽併進行轉義-->
2 <div>@("<span>Hello World</span>")</div>
3 <!--輸入標簽中的內容-->
4 <div>@Html.Raw("<span>Hello World</span>")</div>

在頁面上輸出結果如下所示：

 

Razor代碼塊

 

Razor 代碼塊以 @ 開始，並括在 {} 中。 代碼塊內的 C# 代碼不會呈現，這點與表達式不同。 一個視圖中的代碼塊和表達式共用相同的作用域並按順序進行定義：

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

在頁面輸出 如下所示：

 

隱式轉換

 

代碼塊中的預設語言是 C#，但 Razor 頁面可以轉換回 HTML：

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

 

顯式行轉換

 

要在代碼塊內以 HTML 形式呈現整個行的其餘內容，請使用 @: 語法：

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

如果代碼中沒有 @:，會生成 Razor 運行時錯誤。

Razor 文件中多餘的 @ 字元可能會導致代碼塊中後面的語句發生編譯器錯誤。 這些額外的 @ 編譯器錯誤：

  • 可能難以理解，因為實際錯誤發生在報告的錯誤之前。
  • 在將多個隱式表達式和顯式表達式合併到單個代碼塊後很常見。

 

控制結構

 

控制結構是對代碼塊的擴展。 代碼塊的各個方面（轉換為標記、內聯 C#）同樣適用於以下結構：

 

條件控制語句

 

條件 @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 }

以下標記展示如何使用 switch 語句：

 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 }

 

迴圈控制

 

迴圈 @for, @foreach, @while, and @do while

@for迴圈

 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迴圈

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迴圈

 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迴圈

 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種迴圈方式實現的效果都是一樣的，如下所示：

 

異常捕獲

 

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

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

在頁面上輸出如下內容：

 

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 *@

在呈現網頁之前，伺服器會刪除 Razor 註釋。 Razor 使用 @* *@ 來分隔註釋。 以上代碼第3段已被註釋禁止，因此伺服器不呈現任何標記。

 

Razor保留關鍵字

 

Razor 關鍵字

  • page
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper（ASP.NET Core 當前不支持）

Razor 關鍵字使用 @(Razor Keyword) 進行轉義（例如，@(functions)）。

C# Razor 關鍵字

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

C# Razor 關鍵字必須使用 @(@C# Razor Keyword) 進行雙轉義（例如，@(@case)）。 第一個 @ 對 Razor 分析程式轉義。 第二個 @ 對 C# 分析器轉義。

Razor 未使用的保留關鍵字

  • class

以上就是ASP.NET Core MVC 從入門到精通之Razor語法簡介的主要內容，關於其他Razor語法內容，可參考文檔：

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

 


作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新技術及職場文章


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 15面向對象特性
    面向對象特性 封裝 在程式設計中，封裝（Encapsulation）是對具體對象的一種抽象，即將某些部分隱藏起來，在程式外部看不到，其含義是其他程式無法調用。要瞭解封裝，離不開“私有化”，就是將類或者是函數中的某些屬性限制在某個區域之內，外部無法調用。 封裝的作用： 1、保護隱私（把不想別人知道的東 ...
  • 【Qt6】QWindow類可以做什麼
    原來的水文標題是“用 VS Code 搞 Qt6”，想想還是直接改為“Qt6”，反正這個用不用 VS Code 也能搞。雖然我知道大伙伴們都很討厭 CMake，但畢竟這廝幾乎成了 C++ 的玩家規範了。Qt 也算識大體，支持用 CMake 來構建程式。所以，只要你用的是能寫 C++ 的工具，理論上都 ...
  • springboot~關於md5簽名引發的問題
    事實是這樣的，我有個介面，這個介面不能被篡改，於是想到了比較簡單的md5對url地址參數進行加密，把這個密碼當成是sign，然後服務端收到請求後，使用相同演算法也生成sign，兩個sign相同就正常沒有被篡改過。 問題的出現 介面中的參數包括userId,extUserId,時間，其中extUserI ...
  • Java中代碼的執行順序
    本篇文章主要介紹了，如何通過Nginx配置跨域，並覆蓋後端服務跨域配置。 先看下後端代碼跨域配置： 主要的目標是：不修改後端跨域配置代碼，來實現Nginx跨域指定功能變數名稱。 @Bean public CorsFilter corsFilter() { final UrlBasedCorsConfigur ...
  • Go語言上手（三） | 青訓營筆記
    高質量編程簡介及編碼規範 高質量: 各種邊界條件考慮完備 異常情況處理，穩定性 易讀易維護 編程原則 簡單性 可讀性 生產力 編碼規範 公共符號始終要註釋 例外：實現介面的方法不需要註釋 格式化 使用gofmt（官方工具）自動格式化 註釋 代碼作用（適合公共符號） 代碼如何實現 （適合註釋實現過程） ...
  • CAS的service參數驗證
    異常處理 panic 異常處理 ​ 如果出現了panic異常，那麼會停止當前函數的運行，然後會找recover()方法，如果沒有的話，就會報錯退出程式，如果有就會執行recover的方法體中的方法 ​ 我們可以使用defer延遲處理函數來捕獲panic異常，用recover()來從錯誤場景中恢復，必 ...
  • NGINX 備忘清單_開發速查表分享
    NGINX 備忘清單 Nginx (engine x) 是一個高性能的HTTP和反向代理web伺服器 ，同時也提供了IMAP/POP3/SMTP服務。Nginx是由伊戈爾·賽索耶夫為俄羅斯訪問量第二的Rambler.ru站點（俄文：Рамблер）開發的，公開版本1.19.6發佈於2020年12月1 ...
  • npm 備忘清單_開發速查表分享
    npm 備忘清單 npm 是 Node.js 的包管理工具，用來安裝各種 Node.js 的擴展。 npm 是 JavaScript 的包管理工具，也是世界上最大的軟體註冊表。有超過 60 萬個 JavaScript 代碼包可供下載，每周下載約 30 億次。npm 讓 JavaScript 開發人員 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類