ASP.NET 網頁 - 程式設計概念

本章將介紹使用 Razor 語法的 ASP.NET 網頁程式設計概念。ASP.NET 是微軟用於在 Web 伺服器上執行動態網頁的技術。

本章的主要目的是讓您熟悉將用於 ASP.NET 網頁的程式設計語法。
您還將學習 C# 程式語言編寫的 Razor 語法和程式碼。
我們已經在前面的章節中看到過這種語法，但本章將詳細解釋這種語法。

什麼是 Razor

Razor 語法是一種 ASP.NET 程式設計語法，用於使用 C# 或 Visual Basic .NET 程式語言建立動態網頁。Razor 語法自 2010 年 6 月開始開發，並於 2011 年 1 月釋出到 Microsoft Visual Studio 2010。

Razor 是一種用於向網頁新增伺服器端程式碼的標記語法。
Razor 具有傳統 ASP.NET 標記的功能，但更容易學習和使用。
Razor 是一種伺服器端標記語言，類似於 ASP 和 PHP。
Razor 支援 C# 和 Visual Basic 程式語言。

基本的 Razor 語法

Razor 語法基於 ASP.NET 並專為建立 Web 應用程式而設計。它具有傳統 ASP.NET 標記的功能，但更容易使用和學習。

Razor 程式碼塊用 @{...} 括起來。
內聯表示式（變數和函式）以 @ 開頭。
程式碼語句以分號 (;) 結尾。
變數用 var 關鍵字宣告。
字串用引號括起來。
C# 程式碼區分大小寫。
C# 檔案的副檔名為 .cshtml。

讓我們來看下面的例子：

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

<!-- Inline expressions -->
<p>The value of your account is: @total </p>
<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 + " Today is: " + weekDay;
}

<p>The greeting is: @greetingMessage</p>

<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8" />
      <title>Welcome to ASP.NET Web Pages Tutorials</title>
   </head>
   
   <body>
      <h1>Hello World, ASP.NET Web Page</h1>
      <p>Hello World!</p>
   </body>

</html>

正如您在上面的例子中看到的，在程式碼塊內，每個完整的程式碼語句都必須以分號結尾。內聯表示式不以分號結尾。

讓我們執行您的應用程式並在瀏覽器中指定以下網址 **https://:46023/firstpage**，您將看到以下輸出。

儲存資料的變數

您可以將值儲存在變數中，包括字串、數字和日期等。您可以使用 var 關鍵字建立一個新變數。您可以使用 @ 直接在頁面中插入變數值。讓我們來看另一個簡單的例子，我們將資料儲存在另一個變數中。

<!-- Storing a string -->
@{
   var welcomeMessage = "Welcome to ASP.NET Web Pages!";
}
<p>@welcomeMessage</p>

<!-- Storing a date -->
@{
   var year = DateTime.Now.Year;
}
<!-- Displaying a variable -->
<p>Current year is : @year!</p>

讓我們執行您的應用程式並在瀏覽器中指定以下網址 **https://:46023/firstpage**，您將看到以下輸出。

決策制定

動態網頁的一個關鍵特性是您可以根據條件確定要執行的操作。最常見的方法是使用 **If 和 Else 語句**。讓我們來看一下以下程式中顯示的決策制定程式碼。

@{
   var result = "";
   
   if(IsPost){
      result = "This page was posted using the Submit button.";
   } else{
      result = "This was the first request for this page.";
   }
}

<!DOCTYPE html>
<html>
   
   <head>
      <title></title>
   </head>
   
   <body>
      <form method = "POST" action = "" >
         <input type = "Submit" name = "Submit" value = "Submit"/>
         <p>@result</p>
      </form>
   </body>

</html>

讓我們執行您的應用程式並在瀏覽器中指定以下網址：**https://:46023/firstpage**，您將看到以下輸出。

現在讓我們點選“提交”，您將看到它也更新了訊息，如下面的螢幕截圖所示。

讓我們來看另一個例子，在這個例子中，我們必須建立一個 **簡單的加法功能**，讓使用者輸入兩個數字，然後將它們相加並顯示結果。

@{
   var total = 0;
   var totalMessage = "";
   
   if (IsPost){
      // Retrieve the numbers that the user entered.
      var num1 = Request["text1"];
      var num2 = Request["text2"];
      
      // Convert the entered strings into integers numbers and add.
      total = num1.AsInt() + num2.AsInt();
      totalMessage = "Total = " + total;
   }
}

<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <title>My Title</title>
      <meta charset = "utf-8" />
      <style type = "text/css">
         body {
            background-color: #d6c4c4;
            font-family: Verdana, Arial;
            margin: 50px;
         }
         form {
            padding: 10px;
            border-style: dashed;
            width: 250px;
         }
      </style>
   
   </head>
   <body>
      <p>Enter two whole numbers and then click <strong>Add</strong>.</p>
      
      <form action = "" method = "post">
         <p>
            <label for = "text1">First Number:</label>
            <input type = "text" name = "text1" />
         </p>
         <p>
            <label for = "text2">Second Number:</label>
            <input type = "text" name = "text2" />
         </p>
         <p><input type = "submit" value = "Add" /></p>
      </form>
      
      <p>@totalMessage</p>
   
   </body>
</html>

讓我們執行應用程式並在瀏覽器中指定以下網址：**https://:46023/firstpage**，您將看到以下輸出。

現在在提到的欄位中輸入兩個數字，如下面的螢幕截圖所示。

點選“新增”，您將看到這兩個數字的和，如下面的螢幕截圖所示。

列印頁面