ASP.NET MVC - Razor

上一頁
下一頁

在本章中，我們將探討 ASP.NET MVC 應用程式中的 Razor 檢視引擎以及 Razor 存在的一些原因。Razor 是一種標記語法，允許您使用 C# 和 VB.Net 將基於伺服器的程式碼嵌入到網頁中。它不是一種程式語言，而是一種伺服器端標記語言。

Razor 與 ASP.NET MVC 沒有關聯，因為 Razor 是一種通用模板引擎。您可以在任何地方使用它來生成輸出，例如 HTML。只是 ASP.NET MVC 實現了一個檢視引擎，允許我們在 MVC 應用程式中使用 Razor 生成 HTML。

View Engine

您將擁有一個模板檔案，其中包含一些文字文字和一些程式碼塊。您可以將該模板與一些資料或特定模型結合起來，其中模板指定資料應該出現在哪裡，然後執行模板以生成輸出。

Razor 與 ASPX

  • Razor 與 ASPX 檔案的工作方式非常相似。ASPX 檔案是模板，包含文字文字和一些 C# 程式碼，指定資料應該出現在哪裡。我們執行這些操作以生成應用程式的 HTML。

  • ASPX 檔案依賴於 ASP.NET 執行時才能解析和執行這些 ASPX 檔案。Razor 沒有此類依賴關係。

  • 與 ASPX 檔案不同，Razor 有一些不同的設計目標。

目標

Microsoft 希望 Razor 易於使用和學習，並且可以在 Visual Studio 等工具中工作，以便可以使用 IntelliSense 和偵錯程式，但他們希望 Razor 與特定技術（如 ASP.NET 或 ASP.NET MVC）沒有關聯。

如果您熟悉 ASPX 檔案的生命週期，那麼您可能知道它依賴於 ASP.NET 執行時才能解析和執行這些 ASPX 檔案。Microsoft 希望 Razor 更智慧，使開發人員的工作更容易。

讓我們來看一個 ASPX 檔案的示例程式碼，其中包含一些文字文字。這是我們的 HTML 標記。它還包含少量 C# 程式碼。

<% foreach (var item in Model) { %>
   <tr>
      <td>
         <%: Html.ActionLink("Edit", "Edit", new { id = item.ID })%> |
         <%: Html.ActionLink("Details", "Details", new { id = item.ID }) %>|
         <%: Html.ActionLink("Delete", "Delete", new { id = item.ID })%>
      </td>
		
      <td>
         <%: item.Name %>
      </td>
		
      <td>
         <%: String.Format("{0,g}", item.JoiningDate) %>
      </td>
		
   </tr>
<%}%>

但這些 Web 窗體基本上被 Microsoft 重用以與早期版本的 MVC 協同工作，這意味著 ASPX 檔案從未完全適合 MVC。

當您需要從 C# 程式碼轉換回 HTML 以及從 HTML 程式碼轉換回 C# 程式碼時，語法有點笨拙。IntelliSense 還會提示您執行 MVC 專案中沒有意義的操作，例如將輸出快取和使用者控制元件的指令新增到 ASPX 檢視中。

現在，檢視這段程式碼，它生成相同的輸出，區別在於它使用了 Razor 語法。

@foreach (var item in Model) {
   <tr>
      <td>
         @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
         @Html.ActionLink("Details", "Details", new { id = item.ID }) |
         @Html.ActionLink("Delete", "Delete", new { id = item.ID })
      </td>
		
      <td>
         @item.Name
      </td>
		
      <td>
         @String.Format("{0,g}", item.JoiningDate)
      </td>
   </tr>
}

使用 Razor 語法，您可以使用“@”符號開始一段 C# 程式碼，Razor 解析器將自動切換到將此語句（此 foreach 語句）解析為一段 C# 程式碼。

但是，當我們完成 foreach 語句並有我們的開括號時，我們可以從 C# 程式碼轉換到 HTML，而無需在其中放置顯式標記，例如百分號和尖括號。

Razor 解析器足夠智慧，可以切換 C# 程式碼和 HTML，並且當我們需要在此處放置閉括號時，可以再次從 HTML 切換回 C# 程式碼。如果您比較這兩個程式碼塊，我想您會同意 Razor 版本更容易閱讀和編寫。

使用 Razor 建立檢視

讓我們建立一個新的 ASP.Net MVC 專案。

Razor MVC Project

在名稱欄位中輸入專案名稱，然後單擊“確定”。

project_name

為了簡單起見，選擇“空”選項，並在“新增資料夾和核心引用”部分選中“MVC”複選框，然後單擊“確定”。它將建立一個具有最少預定義內容的基本 MVC 專案。

Visual Studio 建立專案後，您將在解決方案資源管理器視窗中看到許多檔案和資料夾。由於我們從空專案模板建立了 ASP.Net MVC 專案，因此目前應用程式不包含任何可執行的內容。由於我們從空應用程式開始，甚至沒有一個控制器，讓我們新增一個 HomeController。

要新增控制器，請右鍵單擊解決方案資源管理器中的控制器資料夾，然後選擇“新增”→“控制器”。它將顯示“新增腳手架”對話方塊。

Razor Controller Folder

選擇“MVC 5 控制器 - 空”選項，然後單擊“新增”按鈕，然後將出現“新增控制器”對話方塊。

HomeController

將名稱設定為 HomeController，然後單擊“新增”按鈕。您將在 Controllers 資料夾中看到一個新的 C# 檔案“HomeController.cs”，它也在 Visual Studio 中開啟以供編輯。

Editing in Visual Studio

右鍵單擊 Index 操作，然後選擇“新增檢視…”。

Index Action Add View

從“模板”下拉列表中選擇“空”，然後單擊“新增”按鈕。Visual Studio 將在“View/Home”資料夾內建立一個 Index.cshtml 檔案。

Create Index.cshtml

請注意，Razor 檢視具有 cshtml 副檔名。如果您使用 Visual Basic 構建 MVC 應用程式，它將是 VBHTML 副檔名。在此檔案的頂部是一個程式碼塊，它顯式地將此 Layout 屬性設定為 null。

執行此應用程式時，您將看到空白網頁，因為我們從“空”模板建立了一個檢視。

Blank Webpage

讓我們新增一些 C# 程式碼以使事情更有趣。要在 Razor 檢視中編寫一些 C# 程式碼，我們首先要輸入“@”符號，該符號告訴解析器它將要執行一些程式碼操作。

讓我們建立一個 FOR 迴圈，在花括號內指定“@i”，這實際上是在告訴 Razor 放置 i 的值。

@{
   Layout = null;
} 

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>Index</title>
   </head>
	
   <body>
      <div>
         @for (int index = 0; index < 12; index++){
            <div>@index </div>
         }
      </div>
   </body>
	
</html>

執行此應用程式，您將看到以下輸出。

Razor Output
列印頁面
上一頁
下一頁
廣告