ASP.NET Web Pages 簡介 - 程序設計基本概念

發行項
01/18/2024

本教學課程提供如何使用 Razor 語法在 ASP.NET Web Pages 中程式設計的概觀。

您將學到什麼：

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

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

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

如何安裝包含預建程式代碼) 與月臺搭配使用的套件 (元件。

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

討論的功能/技術：

NuGet 和套件管理員。

協助 Gravatar 程式。

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

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

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

建立使用Razor播放的頁面

在本節中，您將使用Razor 播放一些內容，讓您瞭解基本語法。

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

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 宣告 (宣告) 。當您建立變數時，您可以為其命名，其中包含字母、數位和底線 (_) 。變數名稱不能以數字開頭，而且無法使用程式設計關鍵詞的名稱， (例如 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 轉譯名為 product 之變數中的任何值，依此類推斷。

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

@ (a*b) 轉譯變數 a 和 b 中任何專案的乘積。 (* 運算符表示乘法.)
@ (技術 + “ ” + 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 Web Pages 更多的位置使用。 (例如，它用於 ASP.NET MVC 檢視以及.)

我們提到這一點，因為如果您尋找程式設計 ASP.NET Web Pages 的相關信息，您會發現許多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 { } block

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

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

要測試的條件在括弧中。它必須是傳回 true 或 false 的值或表達式。如果條件為 true，ASP.NET 執行大括弧內的語句或語句。 (這些是 if-then logic.) 如果條件為 false，則會略過程式碼區塊。

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

if(currentValue > 12) { ... }

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

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

if(IsPost) { ... }

if(!IsPost) { ... }

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

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

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

注意

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

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

! 運算子本身表示邏輯 NOT。例如，如果 ( 條件！IsPost) 表示 IsPost 不是 true。

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

else 區塊

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

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

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

測試要求是否為提交 (張貼)

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

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

按兩下 [ 提交] 按鈕。再次要求頁面。如前所述，訊息變數會設定為「這是第一次...」。但這次，如果 (IsPost) 傳回 true，則測試會執行 if 區塊內的程式碼。程序代碼會將訊息變數的值變更為不同的值，也就是標記中呈現的內容。

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

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

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

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

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

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

測試查詢字串的值

再測試一次。這次，您將新增，如果區塊測試名為的值，會顯示可能會在查詢字串中傳遞的值。 (如下所示： 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>
}

if 測試指出如果 showMessage 變數為 true，請轉 <譯具有訊息變數值的 p> 元素。

條件式邏輯的摘要

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

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

執行頁面。沒有訊息，因為 showMessage 為 false，所以在標記中，如果 (showMessage) 測試傳回 false，則為。

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

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

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

頁面會再次顯示。 (因為您已變更 URL，所以這是新的要求，而不是 submit.) 再次按兩下 [ 提交 ]。訊息會再次顯示，就像日期和時間一樣。

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

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

如先前所述，此範例的邏輯稍有缺點。不過，如果要出現在許多頁面中，則會採用您在這裡看到的一或多個窗體。

安裝 Helper (顯示 Gravatar 影像)

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

ASP.NET Web Pages 內建一些協助程式。不過，許多協助程式可在使用 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 帳戶而定，您的圖片或預設影像都會顯示。

網頁瀏覽器視窗的螢幕快照，其中顯示具有眼鏡之男性的用戶選取 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 Web Pages 簡介 - 程序設計基本概念

建立使用Razor播放的頁面

檢查範例頁面

對象和屬性和方法

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

查看作用中的程序代碼

新增一些條件式邏輯

if { } block

else 區塊

測試要求是否為提交 (張貼)

測試查詢字串的值

條件式邏輯的摘要

安裝 Helper (顯示 Gravatar 影像)

在頁面中使用協助程式

即將推出下一個

TestRazor 頁面的完整清單

TestRazorPart2 頁面的完整清單

GravatarTest 頁面的完整清單

其他資源

意見反應

意見反應

其他資源