ASP.NET 網頁簡介 - 程序設計基本概念

發行項
07/16/2024

本教學課程提供如何使用 Razor 語法在 ASP.NET 網頁中撰寫程式的概觀。

您將學到什麼：

您在 ASP.NET 網頁中用於程式設計的基本「Razor」語法。

一些基本 C#，這是您將使用的程式設計語言。

網頁的一些基本程序設計概念。

如何安裝套件（包含預先建置程式代碼的元件）以搭配您的網站使用。

如何使用 協助程式 來執行一般程序設計工作。

討論的功能/技術：

NuGet 和套件管理員。

協助 Gravatar 程式。

本教學課程主要是介紹您將用於網頁 ASP.NET 程序設計語法的練習。您將瞭解 以 C# 程式設計語言撰寫的 Razor 語法 和程式代碼。您已在上一個教學課程中瞥見此語法;在本教學課程中，我們將進一步說明語法。

我們承諾，本教學課程牽涉到您在單一教學課程中看到的最程序設計，而這隻是關於程序設計的唯一教學課程。在此集合的其餘教學課程中，您實際上會建立執行有趣動作的頁面。

您也將了解 協助程式。協助程式是一個元件，也就是一段封裝的程序代碼，您可以新增至頁面。協助程式會為您執行工作，否則可能是繁瑣或複雜的手動作業。

建立頁面以使用Razor 播放

在本節中，您將使用Razor進行一些遊戲，以便瞭解基本語法。

如果 WebMatrix 尚未執行，請啟動它。您將使用您在上一個教學課程中建立的網站（開始使用網頁）。若要重新開啟它，請按兩下 [ 我的網站 ]，然後選擇 [WebPageMovies]：

Web 矩陣開始畫面的螢幕快照，其中顯示以紅色矩形醒目提示的 [開啟網站] 選項和 [我的網站]。

選取 [ 檔案 ] 工作區。

在功能區中，按兩下 [ 新增 ] 以建立頁面。選取 [CSHTML ]，並將新的頁面 命名為 TestRazor.cshtml。

按一下 [確定]。

將下列內容複製到檔案中，完全取代已存在的內容。

注意

當您將程式代碼或標記從範例複製到頁面時，縮排和對齊方式可能與教學課程中不同。不過，縮排和對齊不會影響程式代碼的執行方式。

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

檢查範例頁面

您看到的大部分內容都是一般 HTML。不過，在頂端有此程式代碼區塊：

@{
   // Working with numbers.
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings).
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects.
   var rightNow = DateTime.Now;
}

請注意此程式碼區塊的下列事項：

@ 字元會告訴 ASP.NET 下列內容是Razor程式代碼，而不是HTML。 ASP.NET 會將 @ 字元後面的一切視為程序代碼，直到它再次進入一些 HTML 為止。（在此情況下，這就是 <！DOCTYPE> 專案。
如果程式代碼有一行以上，大括弧（{ 和 } ）會括住 Razor 程式代碼的區塊。大括弧會告訴 ASP.NET 該區塊的程式代碼開始和結束位置。
字元會標示批註，也就是不會執行的程式代碼的一部分。
每個語句必須以分號結尾（;)。（不過，沒有評論。
您可以將值儲存在變數中，您可以使用關鍵詞 var 來建立（declare）。當您建立變數時，您會為其指定名稱，其中包含字母、數位和底線（_）。變數名稱不能以數位開頭，而且無法使用程式設計關鍵詞的名稱（例如 var）。
您會以引號括住字元字串（例如 “ASP.NET” 和 “Web Pages”。（它們必須是雙引號。數位不是引號。
引號外的空格符並不重要。換行符大多無關緊要：例外狀況是您無法將字串以引號分隔成行。縮排和對齊並不重要。

此範例中並不明顯的是，所有程式代碼都區分大小寫。這表示變數 TheSum 與可能命名為 theSum 或 thesum 的變數不同。同樣地，var 是關鍵詞，但 Var 不是。

對象和屬性和方法

然後有表達式 DateTime.Now。簡單來說，DateTime 是物件。物件是您可以使用的程式：頁面、文本框、檔案、影像、Web 要求、電子郵件訊息、客戶記錄等。物件有一或多個 描述其特性的屬性 。文本框物件具有 Text 屬性（等等）、要求物件具有 Url 屬性（以及其他屬性）、電子郵件訊息具有 From 屬性和 To 屬性等等。物件也有 可以執行的「動詞」方法 。您將使用物件很多。

如您從範例所見，DateTime 是可讓您對日期和時間進行程序設計的物件。它有一個名為 Now 的屬性，會傳回目前的日期和時間。

使用程式代碼在頁面中轉譯標記

在頁面本文中，請注意下列事項：

<div>
  <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
  <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
  <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>

<div>
  <p>The technology is @technology, and the product is @product.</p>
  <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>

<div>
  <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>

同樣地，@ 字元會告訴 ASP.NET 下列專案是程序代碼，而不是 HTML。在標記中，您可以新增 @ 後面接著程式代碼表達式，ASP.NET 會在該時間點轉譯該表達式的值。在此範例中， @a 會轉譯任何值為名為的變數、 @product 轉譯具名產品變數中的任何值等等。

不過，您不限於變數。在此幾個實例中，@ 字元在表達式之前：

@（a*b）會呈現變數 a 和 b 中任何專案的乘積。（* 運算子表示乘法。）
@（technology + “ + product）會在串連變數技術和產品后呈現值，並在兩者之間新增空格。串連字串的運算符（+）與加數位的運算符相同。 ASP.NET 通常可以判斷您是使用數位還是字串，並使用 + 運算元執行正確的動作。
@Request.Url 會轉譯 Request 物件的 Url 屬性。 Request 物件包含瀏覽器目前要求的相關信息，當然 Url 屬性包含該目前要求的 URL。

此範例也設計用來示範您可以以不同方式執行工作。您可以在頂端的程式代碼區塊中執行計算、將結果放入變數，然後在標記中轉譯變數。或者，您可以在標記的運算式中執行計算。您所使用的方法取決於您在做什麼，而且在某種程度上，根據您自己的喜好設定。

查看運作中的程序代碼

以滑鼠右鍵按下檔名，然後選擇 [在瀏覽器中啟動]。您會在瀏覽器中看到頁面，其中包含頁面中解析的所有值和表示式。

在瀏覽器視窗中執行的 [測試 Razor] 頁面螢幕快照，其中顯示已解析值和表達式的三個方塊。

查看瀏覽器中的來源。

測試Razor頁面來源的螢幕快照，將頁面來源與轉譯的網頁瀏覽器輸出進行比較。

如您在上一個教學課程中所預期，Razor 程式代碼都未在頁面中。您看到的就是實際顯示值。當您執行頁面時，實際上是對 WebMatrix 內建的網頁伺服器提出要求。收到要求時，ASP.NET 解析所有值和表達式，並將其值轉譯至頁面。然後，它會將頁面傳送至瀏覽器。

提示

Razor 和 C#

到目前為止，我們已經說您正在使用Razor語法。這是真的，但它不是完整的故事。您使用的實際程式設計語言稱為 C# 。 C# 是由十多年前Microsoft所建立，並已成為建立 Windows 應用程式的主要程式設計語言之一。您已瞭解如何為變數命名以及如何建立語句等的所有規則，實際上是 C# 語言的所有規則。

Razor 更具體地是指一組小型慣例，讓您如何將此程式代碼內嵌至頁面。例如，使用 @ 在頁面中標記程式代碼並使用 @{ } 來內嵌程式代碼區塊的慣例是頁面的Razor層面。協助程式也會被視為 Razor 的一部分。 Razor 語法在多個位置使用，而不只是在網頁 ASP.NET。（例如，它也用於 ASP.NET MVC 檢視中。

我們提到這一點，因為如果您尋找有關程序設計 ASP.NET 網頁的資訊，您會發現許多Razor參考。不過，許多參考不適用於您正在執行的作業，因此可能會造成混淆。事實上，您的許多程式設計問題確實會與使用 C# 或使用 ASP.NET 有關。因此，如果您特別尋找Razor的相關信息，您可能找不到所需的答案。

新增一些條件式邏輯

在頁面中使用程序代碼的其中一個絕佳功能，就是您可以根據各種條件變更所發生的情況。在本教學課程的這個部分中，您將使用一些方式來變更頁面中顯示的內容。

此範例會是簡單且有些嘗試的，因此我們可以專注於條件式邏輯。您將建立的頁面會執行此動作：

根據頁面是否第一次顯示頁面，或在頁面上按下按鈕以提交頁面而定，在頁面上顯示不同的文字。這會是第一個條件式測試。
只有在 URL 的查詢字串中傳遞特定值時，才會顯示訊息（http://...？show=true）。這會是第二個條件式測試。

在 WebMatrix 中，建立頁面並將其命名為 TestRazorPart2.cshtml。（在功能區中，按兩下新增，選擇 [CSHTML]，將檔案命名，然後按兩下 [ 確定]。

以下欄內容取代該頁面的內容：

@{
   var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <p>@message</p>
      <p><input type="submit" value="Submit" /></p>
  </div>
  </form>
</body>
</html>

頂端的程式代碼區塊會使用一些文字初始化名為 message 的變數。在頁面本文中，訊息變數的內容會顯示在 p> 元素內<。標記也包含用來<建立 [提交] 按鈕的輸入>元素。

執行頁面以查看它現在的運作方式。現在，它基本上是靜態頁面，即使您按兩下 [提交 ] 按鈕也一樣。

返回 WebMatrix。在程式代碼區塊內，在初始化訊息的行後面新增下列反白顯示的程式代碼：

@{
    var message = "This is the first time you've requested the page.";

    if(IsPost) {
        message = "Now you've submitted the page.";
    }
}

if { } 區塊

您剛才新增的內容是 if 條件。在程序代碼中，if 條件具有如下的結構：

if(some condition){
    One or more statements here that run if the condition is true;
}

要測試的條件位於括弧內。它必須是傳回 true 或 false 的值或表達式。如果條件為 true，ASP.NET 執行大括弧內的語句或語句。（這些是當時的邏輯的一部分。如果條件為 false，則會略過程式代碼區塊。

以下是您可以在 if 語句中測試的一些條件範例：

if(currentValue > 12) { ... }

if(dueDate <= DateTime.Today) { ... }

if(IsDone == true) { ... }

if(IsPost) { ... }

if(!IsPost) { ... }

if(a != 0) { ... }

if(fileProcessingIsDone != true && displayMessage == false) { ... }

您可以使用邏輯運算符或比較運算符，針對值或表達式測試變數：等於（==）、大於（）、小於< （）、>大於或等於（=），以及小於或等於（><=）。！= 運算符表示不等於，例如，如果（a ！= 0）表示 a 不等於 0。

注意

請確定您注意到，等於（==）的比較運算子與 =不同。 = 運算子僅用於指派值（var a=2）。如果您混合這些運算符，您會收到錯誤，否則會收到一些奇怪的結果。

若要測試某個專案是否為 true，完整的語法為 if（IsDone == true）。但您也可以使用快捷方式 if（IsDone）。如果沒有比較運算符，ASP.NET 假設您要測試 true。

! 運算子本身表示邏輯 NOT。例如，條件 if（！IsPost）表示 IsPost 不是 true。

您可以使用邏輯 AND （&& 運算子）或邏輯 OR （|| 運算子）來結合條件。例如，如果上述範例中的條件最後一個表示 FileProcessingIsDone 未設定為 true AND displayMessage 則為 false。

else 區塊

如果區塊是最後一件事：if 區塊後面可以接著另一個區塊。另一個區塊很有用，您必須在條件為 false 時執行不同的程式碼。以下是簡單的範例：

var message = "";
if(errorOccurred == true)
{
    message = "Sorry, an error occurred."; 
}
else
{
    message = "The process finished without errors!";
}

您將在此系列稍後的教學課程中看到一些範例，其中使用else區塊很有用。

測試要求是否為送出（post）

還有更多，但讓我們回到範例，其條件為 if（IsPost）{ ... }。 IsPost 實際上是目前頁面的屬性。第一次要求頁面時，IsPost 會傳回 false。不過，如果您按鍵或提交頁面，也就是您張貼該頁面， IsPost 會傳回 true。因此IsPost可讓您判斷您是否正在處理表單提交。（就 HTTP 動詞而言，如果要求是 GET 作業，IsPost 會傳回 false。如果要求是POST作業，IsPost 會傳回 true。）在稍後的教學課程中，您將使用輸入表單，在此測試變得特別有用。

執行頁面。因為這是您第一次要求頁面，因此您會看到「這是您第一次要求頁面」。該字串是您初始化訊息變數的值。有 if（IsPost）測試，但此時會傳回 false，因此，如果區塊未執行，則內部的程式代碼會傳回 false。

按兩下 [ 提交] 按鈕。再次要求頁面。和之前一樣，訊息變數會設定為「這是第一次...」。但這次，測試 if（IsPost）會傳回 true，因此，如果區塊執行，則程式代碼會在內部執行。程序代碼會將訊息變數的值變更為不同的值，也就是標記中轉譯的內容。

現在，在標記中新增 if 條件。在包含 [提交] 按鈕的 <p> 元素下方，新增下列標記：

@if(IsPost){
  <p>You submitted the page at @DateTime.Now</p>
}

您要在標記內新增程序代碼，因此您必須從 @开始。然後，如果測試與您稍早在程式碼區塊中新增的測試類似，不過，在大括弧內，您正在新增一般 HTML，至少，直到它到達 @DateTime.Now為止是普通的。這是另一個有點Razor程式代碼，所以您必須再次在前面新增 @ 。

此處的重點是，您可以在頂端和標記的程式代碼區塊中新增條件。如果您在頁面主體中使用 if 條件，區塊內的行可以是標記或程序代碼。在此情況下，只要混合標記和程序代碼，就如同如此，您必須使用 @ 來清楚 ASP.NET 程序代碼的位置。

執行頁面，然後按兩下 [ 提交]。這次您不僅會在提交時看到不同的訊息（「現在您已提交...」），但您會看到列出日期和時間的新訊息。

在網頁瀏覽器中執行的 Test Razor 2 頁面螢幕快照，其中顯示頁面提交後顯示的時間戳訊息。

測試查詢字串的值

再測試一次。這一次，您將新增 if 區塊，以測試名為的值顯示可能會在查詢字串中傳遞。（如下所示： http://localhost:43097/TestRazorPart2.cshtml?show=true您將變更頁面，如此一來，只有當 show 的值為 true 時，才會顯示您所顯示的訊息（「這是第一次...等等」。

在頁面頂端的底部（但內部）程式代碼區塊，新增下列內容：

var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
    showMessage = true;
}

完整的程式代碼區塊現在看起來像下列範例。（請記住，當您將程式代碼複製到頁面時，縮排看起來可能不同。但這不會影響程式代碼的執行方式。

@{
   var message = "This is the first time you've requested the page.";

   if(IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if(Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

區塊中的新程式代碼會將名為 showMessage 的變數初始化為 false。然後，如果測試要尋找查詢字串中的值，它會執行。當您第一次要求頁面時，其URL如下所示：

http://localhost:43097/TestRazorPart2.cshtml

程式代碼會判斷 URL 是否包含查詢字串中名為 show 的變數，就像這個版本的 URL：

http://localhost:43097/TestRazorPart2.cshtml？show=true

測試本身會查看 Request 物件的 QueryString 屬性。如果查詢字串包含名為 show 的專案，而且該專案設定為 true，則 if 區塊會執行並將 showMessage 變數設定為 true。

這裡有一個技巧，如你所看到的。如同名稱所說，查詢字串是字串。不過，如果您測試的值是布爾值（true/false）值，則您只能測試 true 和 false。您必須先將它轉換成布爾值，才能在查詢字串中測試 show 變數的值。這就是 AsBool 方法的用途 — 它會接受字串做為輸入，並將它轉換成布爾值。顯然，如果字串為「true」，AsBool 方法會將該值轉換成 true。如果字串的值是任何其他值，AsBool 會傳回 false。

提示

數據類型和 As（）方法

到目前為止，我們才說過，當您建立變數時，您會使用關鍵詞 var。不過，這不是整個故事。為了操作值 - 若要新增數位或串連字串，或比較日期，或測試 true/false - C# 必須處理適當的內部表示值。 C# 通常會根據您使用值執行的動作，找出該表示法應該是什麼（也就是數據類型）。不過，現在和之後，它無法做到這一點。如果沒有，您必須明確指出 C# 應該如何代表數據來協助。 AsBool 方法會執行此動作，它會告訴 C# 應該將 “true” 或 “false” 的字串值視為布爾值。類似的方法也會以其他類型來表示字串，例如 AsInt（視為整數）、AsDateTime（視為日期/時間）、AsFloat（視為浮點數），依序等等。當您使用這些 As（）方法時，如果 C# 無法如要求表示字串值，您會看到錯誤。

在頁面的標記中，移除或批註此元素（此處顯示已批註化）：

<!-- <p>@message</p> -->

在您移除或批註該文字的位置，請新增下列內容：

@if(showMessage) {
  <p>@message</p>
}

如果測試指出 showMessage 變數為 true，則呈現 <具有訊息變數值的 p> 元素。

條件式邏輯的摘要

如果您完全不確定您剛剛完成的工作，以下是摘要。

訊息變數會初始化為預設字串（“這是第一次 ...）。
如果頁面要求是送出的結果（post），訊息的值會變更為「現在您已提交...」
showMessage 變數會初始化為 false。
如果查詢字串包含？show=true，showMessage 變數會設定為 true。
在標記中，如果 showMessage 為 true， <則會轉譯 p> 元素，以顯示訊息的值。（如果 showMessage 為 false，則標記中的該點不會轉譯任何內容。
在標記中，如果要求是 post， <則會轉譯顯示日期和時間的 p> 元素。

執行頁面。沒有訊息，因為 showMessage 是 false，所以在標記中 if（showMessage）測試會傳回 false。

按一下 [提交] 。您會看到日期和時間，但仍沒有訊息。

在瀏覽器中，移至 [URL] 方塊，並將下列內容新增至 URL 的結尾：？show=true，然後按 Enter。

網頁瀏覽器中 [測試 Razor 2] 頁面的螢幕快照，其中顯示 U R L 方塊中的查詢字串。

頁面會再次顯示。（因為您變更了 URL，因此這是新的要求，而不是送出。再次按兩下 [ 提交 ]。訊息會再次顯示，日期和時間也一樣。

網頁瀏覽器中[測試 Razor 2] 頁面的螢幕快照，在 [U R L] 方塊中以查詢字串提交頁面。

在 URL 中，將？show=true 變更為？show=false，然後按 Enter。再次提交頁面。頁面會回到您啟動的方式 — 沒有訊息。

如先前所述，此範例的邏輯有點令人心動。不過，如果要出現在您的許多頁面中，它將需要一或多個您在這裡看到的窗體。

安裝協助程式（顯示 Gravatar 影像）

人們通常想要在網頁上執行的一些工作需要大量的程式代碼，或需要額外的知識。範例：顯示數據的圖表;將 Facebook 的 [讚] 按鈕放在頁面上;從您的網站傳送電子郵件;裁剪或調整影像大小;使用網站PayPal。若要輕鬆地執行這類作業，ASP.NET 網頁可讓您使用 協助程式。協助程式是您為月臺安裝的元件，可讓您只使用幾行 Razor 程式代碼來執行一般工作。

ASP.NET 網頁有一些內建的協助程式。不過，許多協助程式可在使用 NuGet 套件管理員提供的套件（載入宏）中使用。 NuGet 可讓您選取要安裝的套件，然後負責安裝的所有詳細數據。

在本教學課程的這個部分中，您將安裝協助程式，讓您顯示 Gravatar （「全域辨識的虛擬人偶」）影像。您將學習兩件事。其中一個是如何尋找並安裝協助程式。您也將了解協助程式如何使用您自己撰寫的許多程式代碼，輕鬆地執行您不需要執行的事情。

您可以在的 Gravatar 網站 http://www.gravatar.com/註冊自己的 Gravatar，但建立 Gravatar 帳戶來執行本教學課程的這個部分並不重要。

在 WebMatrix 中，按兩下 [ NuGet] 按鈕。

Web 矩陣使用者介面的螢幕快照，其中顯示醒目提示紅色矩形的 [Nu Get] 按鈕。

這會啟動 NuGet 套件管理員，並顯示可用的套件。（並非所有套件都是協助程式;有些則新增 WebMatrix 本身的功能，有些是額外的範本等等。您可能會收到有關版本不相容的錯誤訊息。您可以按下 [ 確定 ] 並繼續進行本教學課程，以忽略此錯誤訊息。

Web 矩陣中 [Nu Get Gallery] 對話框的螢幕快照，其中顯示要安裝的可用套件清單。

在搜尋方塊中，輸入「asp.net 協助程式」。 NuGet 會顯示符合搜尋字詞的套件。

Web 矩陣中 Nu Get Gallery 對話框的螢幕快照，其中顯示醒目提示紅色矩形的 S P 點 N E T Web 協助程式連結庫專案。

ASP.NET Web 協助程式連結庫包含可簡化許多常見工作的程式碼，包括使用 Gravatar 影像。 選取 [ASP.NET Web 協助程式連結庫套件]，然後按兩下 [安裝] 啟動安裝程式。當系統詢問您是否要安裝套件，並接受完成安裝的條款時，請 選取 [是 ]。

這樣就大功告成了。 NuGet 會下載並安裝所有專案，包括可能需要的任何其他元件（相依性）。

如果基於某些原因，您必須卸載協助程式，則程式非常類似。按兩下 [ NuGet] 按鈕，按兩下 [ 已安裝] 索引標籤，然後挑選您要卸載的套件。

在頁面中使用協助程式

現在您將使用您剛才安裝的協助程式。將協助程式新增至頁面的程式與大部分協助程序類似。

在 WebMatrix 中，建立頁面並將其命名為 GravatarTest.cshml。（您正在建立特殊頁面來測試協助程式，但您可以在網站的任何頁面中使用協助程式。

在 body 元素內<，新增 <div> 元素。> 在 div> 元素內<，輸入下列專案：

@Gravatar.

@ 字元與您用來標記 Razor 程式代碼的字元相同。 Gravatar 是您正在使用的協助程序物件。

一旦您輸入句點（.），WebMatrix 就會顯示 Gravatar 協助程式提供的方法清單（函式）：

來源編輯器的螢幕快照，其中顯示 Gravatar 協助程式 IntelliSense 下拉式清單，其中醒目提示黃色的 [取得 H T M L] 專案。

這項功能稱為 IntelliSense。它藉由提供內容適當的選擇來協助您撰寫程式代碼。 IntelliSense 適用於 WebMatrix 中支援的 HTML、CSS、ASP.NET 程式代碼、JavaScript 和其他語言。這是另一項功能，可讓您更輕鬆地在 WebMatrix 中開發網頁。

在鍵盤上按 G，您會看到 IntelliSense 找到 GetHtml 方法。按 Tab 鍵。IntelliSense 會為您插入選取的方法（GetHtml）。輸入左括弧，並注意自動新增右括弧。在兩個括弧之間以引號輸入您的電子郵件位址。如果您有 Gravatar 帳戶，則會傳回配置文件圖片。如果您沒有 Gravatar 帳戶，則會傳回預設影像。當您完成時，這一行看起來會像這樣：

@Gravatar.GetHtml("john@contoso.com")

現在，在瀏覽器中檢視頁面。視您是否有 Gravatar 帳戶而定，您的圖片或預設影像都會顯示。

網頁瀏覽器視窗的螢幕快照，其中顯示用戶選取的格拉瓦塔爾男子眼鏡影像。網頁瀏覽器視窗的螢幕快照，其中顯示文體化和旋轉字母 G 的預設 Gravatar 影像。

若要瞭解協助程式為您執行的動作，請在瀏覽器中檢視頁面的來源。除了您在頁面中擁有的 HTML，您會看到包含識別碼的影像元素。這是協助程式呈現到頁面的程式代碼，位於您擁有 @Gravatar.GetHtml的位置。協助程式會取得您提供的資訊，併產生直接與 Gravatar 交談的程式代碼，以取回所提供帳戶的正確影像。

GetHtml 方法也可讓您藉由提供其他參數來自定義影像。下列程式代碼示範如何要求影像的寬度和高度為 40 像素，如果指定的帳戶不存在，則會使用名為 wavatar 的指定預設影像。

@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")

此程式代碼會產生類似下列結果的內容（預設影像會隨機不同）。

網頁瀏覽器頁面的螢幕快照，其中顯示新的指定預設影像，其中包含 Get H T M L 方法中定義的設定參數。

即將上一步

為了讓本教學課程保持簡短，我們只需要關注幾個基本概念。當然，Razor 和 C# 還有更多。當您完成這些教學課程時，您將深入瞭解。如果您有興趣深入瞭解 Razor 和 C# 的程式設計層面，您可以在這裡閱讀更完整的簡介：使用 Razor 語法 ASP.NET Web 程式設計簡介。

下一個教學課程會介紹您使用資料庫。在本教學課程中，您將開始建立範例應用程式，讓您列出您最愛的電影。

TestRazor 頁面的完整清單

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

TestRazorPart2 頁面的完整清單

@{
   var message = "This is the first time you've requested the page.";

   if (IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if (Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <!--<p>@message</p>-->
      @if(showMessage){
        <p>@message</p>
      }
      <p><input type="submit" value="Submit" /></p>
      @if (IsPost) {
        <p>You submitted the page at @DateTime.Now</p>
      }
    </div>
  </form>
</body>
</html>

GravatarTest 頁面的完整清單

@{
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
          @Gravatar.GetHtml("john@contoso.com")
          @Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
        </div>
    </body>
</html>

其他資源

上一個下一個

共用方式為

ASP.NET 網頁簡介 - 程序設計基本概念

建立頁面以使用Razor 播放

檢查範例頁面

對象和屬性和方法

使用程式代碼在頁面中轉譯標記

查看運作中的程序代碼

新增一些條件式邏輯

if { } 區塊

else 區塊

測試要求是否為送出（post）

測試查詢字串的值

條件式邏輯的摘要

安裝協助程式（顯示 Gravatar 影像）

在頁面中使用協助程式

即將上一步

TestRazor 頁面的完整清單

TestRazorPart2 頁面的完整清單

GravatarTest 頁面的完整清單

其他資源

意見反應

意見反應

其他資源

共用方式為

ASP.NET 網頁簡介 - 程序設計基本概念

建立頁面以使用Razor 播放

檢查範例頁面

對象和屬性和方法

使用程式代碼在頁面中轉譯標記

查看運作中的程序代碼

新增一些條件式邏輯

if { } 區塊

else 區塊

測試要求是否為送出 （post）

測試查詢字串的值

條件式邏輯的摘要

安裝協助程式 （顯示 Gravatar 影像）

在頁面中使用協助程式

即將上一步

TestRazor 頁面的完整清單

TestRazorPart2 頁面的完整清單

GravatarTest 頁面的完整清單

其他資源

意見反應

意見反應

其他資源

測試要求是否為送出（post）

安裝協助程式（顯示 Gravatar 影像）