ASP.NET Web Pages 2 中的最上層功能

發行項
06/16/2023

本文提供 ASP.NET Web Pages 2 RC 中熱門新功能的概觀，這是Microsoft WebMatrix 2 RC隨附的輕量型 Web 程式設計架構。

包含的內容：

安裝 WebMatrix

新功能和增強功能

RC 版本的變更

Beta 版本的變更

使用新增和更新的網站範本

驗證使用者輸入

使用 OAuth 和 OpenID 從 Facebook 和其他網站啟用登入

使用地圖協助程式新增地圖

並排執行網頁應用程式

行動裝置的轉譯頁面

其他資源

注意

本主題假設您使用 WebMatrix 來處理 ASP.NET Web Pages 2 程式碼。不過，如同網頁 1，您也可以使用 Visual Studio 建立網頁 2 網站，這可讓您增強 IntelliSense 功能和偵錯。若要在 Visual Studio 中使用網頁，您必須先安裝 Visual Studio 2010 SP1、Visual Web Developer Express 2010 SP1 或 Visual Studio 11 Beta。然後安裝 ASP.NET MVC 4 Beta 版，其中包含在 Visual Studio 中建立 ASP.NET MVC 4 和網頁 2 應用程式的範本和工具。

上次更新：2012 年 6 月 18 日

安裝 WebMatrix

若要安裝網頁，您可以使用 Microsoft Web Platform Installer，這是免費的應用程式，可讓您輕鬆地安裝和設定 Web 相關技術。您將安裝 WebMatrix 2 Beta，其中包含網頁 2 Beta 版。

流覽至最新版 Web 平臺安裝程式的安裝頁面：

https://go.microsoft.com/fwlink/?LinkId=226883

注意

如果您已安裝 WebMatrix 1，此安裝會將它更新為 WebMatrix 2 Beta。您可以在同一部電腦上執行使用第 1 版或 2 建立的網站。如需詳細資訊，請參閱並存執行網頁應用程式一節。
選擇 [立即安裝]。

如果您使用 Internet Explorer，請移至下一個步驟。如果您使用其他瀏覽器，例如 Mozilla Firefox 或 Google Chrome，系統會提示您將 Webmatrix.exe 檔案儲存到您的電腦。儲存檔案，然後按一下該檔案以啟動安裝程式。
執行安裝程式，然後選擇 [ 安裝 ] 按鈕。這會安裝 WebMatrix 和網頁。

新功能和增強功能

RC 版本 (2012 年 6 月變更)

2012 年 6 月的 RC 版本版本從 2012 年 3 月發行的 Beta 版本重新整理有一些變更。這些變更包括：

方法 Validation.AddFormError 已新增至 Validation 協助程式。例如，如果您手動執行驗證 (，您可以驗證查詢字串中傳遞的值) ，而且您想要新增可由方法顯示 Html.ValidationSummary 的錯誤訊息。如需詳細資訊，請參閱在ASP.NET Web Pages (驗證 Razor) 網站的使用者輸入中驗證使用者輸入時，不會直接來自使用者的資料一節。
統合和縮小的功能已從核心 ASP.NET Web Pages 2 個元件中移除。因此， Assets 本檔中稍後所列的協助程式無法使用。相反地，您必須安裝 ASP.NET 優化 NuGet 套件。如需詳細資訊，請參閱ASP.NET Web Pages (Razor) 網站中的統合和縮小資產。
已新增支援 ASP.NET Web Pages 2 的其他元件。這項變更的唯一明顯效果是，在建立網站或將月臺部署至裝載提供者之後，您可能會在月臺的 bin 資料夾中看到更多元件。

Beta 版本 (2012 年 2 月變更)

2012 年 2 月發行的 Beta 版本只有 2011 年 12 月發行的 Beta 版本有所變更。這些變更包括：

Razor 現在支援條件屬性。在 HTML 元素中，如果您將屬性設定為解析為或 null 的伺服器程式碼 false 中的值，ASP.NET 完全不會轉譯屬性。例如，假設您有下列核取方塊的標記：
```
<input type="checkbox"
name="check1"
value="check1"
checked="@checked1" />
```
如果的值 checked1 解析為 false 或， nullchecked 則不會轉譯屬性。這是一項重大變更。
方法 Validation.GetHtml 已重新命名為 Validation.For 。這是重大變更; Validation.GetHtml 無法在 Beta 版本中運作。
您現在可以在 ~ 標記中包含運算子，以參考網站根目錄，而不使用函式 Href 。 (也就是說，Razor 剖析器現在可以尋找並解析 ~ 運算子，而不需要明確呼叫 Href .) 方法 Href 仍可運作，因此這不是中斷性變更。

例如，如果您先前有如下的標記：

<a href="@Href("~/Default.cshtml")">Home</a>

您現在可以使用如下所示的標記：

<a href="~/Default.cshtml">Home</a>
(Scripts 資源) 管理的協助程式已取代 Assets 為協助程式，其方法稍有不同，例如：
- 針對 Scripts.Add ，請使用 Assets.AddScript
- 針對 Scripts.GetScriptTags ，請使用 Assets.GetScripts
  
  這是重大變更;在 Beta 版本中無法使用類別 Scripts 。本檔中使用資產管理的程式碼範例已隨著這項變更而更新。

使用新增和更新的網站範本

入門網站範本已更新，因此預設會在網頁 2 上執行。它也包含下列新功能：

行動裝置易用的頁面轉譯。透過使用 CSS 樣式和 @media 選取器， 入門網站 可改善小螢幕上頁面的轉譯，包括行動裝置畫面。
已改善成員資格和驗證選項。您可以讓使用者使用其他社交網路網站的帳戶登入您的網站，例如 Twitter、Facebook 和 Windows Live。如需詳細資訊，請參閱使用 OAuth 和 OpenID 從 Facebook 和其他網站啟用登入一節。
HTML5 元素。

新的 個人網站 範本可讓您建立包含個人部落格、相片頁面和 Twitter 頁面的網站。您可以執行下列動作，根據 個人網站 範本自訂網站：

編輯版面配置檔案 (_SiteLayout.cshtml) 和樣式檔案 (Site.css) 來變更網站的外觀。
安裝 NuGet 套件，以將功能新增至您的網站。如需如何安裝套件的相關資訊，包括 ASP.NET Web 協助程式程式庫，請參閱安裝協助程式的相關教學課程。

若要存取個人網站範本，請選擇 [WebMatrix快速入門] 畫面上的[範本]。

在 [ 範本 ] 對話方塊中，選擇 [個人網站 ] 範本。

個人網站範本的登陸頁面可讓您遵循連結來設定您的部落格、Twitter 頁面和相片頁面。

驗證使用者輸入

在網頁 1 中，若要驗證提交表單的使用者輸入，您可以使用類別 System.Web.WebPages.Html.ModelState 。 (這在標題為使用 Data.) 的網頁 1 教學課程中的數個程式碼範例中說明：您仍然可以在網頁 2 中使用此方法。不過，網頁 2 也提供改善的工具來驗證使用者輸入：

新的驗證類別，包括 System.Web.WebPages.ValidationHelper 和 System.Web.WebPages.Validator ，可讓您使用幾行程式碼來執行功能強大的驗證工作。
選擇性地，用戶端驗證可提供立即意見反應給使用者，而不是要求往返伺服器以檢查驗證錯誤。 (基於安全性考慮，即使已事先在用戶端中執行檢查，也會在伺服器上執行驗證。)

若要使用新的驗證功能，請執行下列動作：

在頁面的程式碼中，使用協助程式的方法註冊要驗證的專案 Validation ： Validation.RequireField 、 Validation.RequireFields (註冊多個專案，以) 或 Validation.Add 。方法 Add 可讓您指定其他類型的驗證檢查，例如資料類型檢查、比較不同欄位中的專案、字串長度檢查，以及使用正則運算式 (模式) 。以下是一些範例：

Validation.RequireField("text1");
Validation.RequireField("text1", "The text1 field is required");
Validation.RequireFields("text1", "text2", "text3");

Validation.Add("text1", Validation.StringLength(5));
Validation.Add("textDate", Validation.DateTime("Enter a date"));
Validation.Add("textCount", Validation.Integer("Enter a number"));
Validation.Add("textCount",
Validation.Range(1, 10, "Enter a value between 1 and 10"));

若要顯示欄位特定錯誤，請在要驗證的每個元素的標記中呼叫 Html.ValidationMessage ：

<input type="text" name="course"
value="@Request["course"]" />
@Html.ValidationMessage("course")

若要在標記中顯示頁面上 Html.ValidationSummary 所有錯誤的摘要 (<ul> 清單) ：

@Html.ValidationSummary()

這些步驟足以實作伺服器端驗證。如果您想要新增用戶端驗證，請另外執行下列動作。

在網頁的區段中新增下列腳本檔案參考 <head> 。前兩個腳本參考會指向內容傳遞網路上的遠端檔案， (CDN) 伺服器。第三個參考會指向本機腳本檔案。當 CDN 無法使用時，生產應用程式應該實作後援。測試後援。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

取得 jquery.validate.unobtrusive.min.js 程式庫本機複本最簡單的方式，就是根據其中一個網站範本建立新的網頁網站 (，例如入門網站) 。範本建立的網站在其 Scripts 資料夾中包含 jquery.validate.unobtrusive.js 檔案，您可以從該資料夾中將其複製到您的網站。

如果您的網站使用 _SiteLayout 頁面來控制版面配置，您可以在該頁面中包含這些腳本參考，讓驗證可供所有內容頁面使用。如果您只想在特定頁面上執行驗證，您可以使用資產管理員只在這些頁面上註冊腳本。若要這樣做，請在您想要驗證的頁面中呼叫 Assets.AddScript(path) ，並參考每個腳本檔案。然後在_SiteLayout頁面中新增對的呼叫 Assets.GetScripts ，以轉譯已註冊的 <script> 標籤。如需詳細資訊，請參閱向資產管理員註冊腳本一節。

在個別專案的標記中，呼叫 Validation.For 方法。這個方法會發出 jQuery 可以攔截的屬性，以提供用戶端驗證。例如：

<input type="text" name="course"
value="@Request["course"]"
@Validation.For("course")
/>
@Html.ValidationMessage("course")

下列範例顯示驗證表單上使用者輸入的頁面。若要執行並測試此驗證程式代碼，請執行此動作：

使用其中一個包含腳本資料夾的 WebMatrix 2 網站範本建立新的網站，例如 入門網站 範本。
在新網站中，建立新的 .cshtml 頁面，並以下列程式碼取代頁面的內容。
在瀏覽器中執行頁面。輸入有效和不正確值，以查看驗證的效果。例如，將必要欄位保留空白，或在 [ 點數 ] 欄位中輸入字母。

@{
// Specify what fields users must fill in.
Validation.RequireFields("course", "professorname", "credits");
// Add validation criteria.  Here, require that input to Credits is an integer.
Validation.Add("credits", Validator.Integer());

if (IsPost)  {
// Wrap the postback code with a validation check.
if (Validation.IsValid()) {
    var course = Request["course"];
    var professorName = Request["professorname"];
    var credits = Request["credits"];
    // Display valid input values.
    <text>
        You entered: <br />
        Class: @course <br />
        Professor: @professorName <br />
        Credits: @credits <br />
    </text>
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing Validation in ASP.NET Web Pages version 2</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script  src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="@Href("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
</head>
<body>
<form method="post" action="">
<!-- Display a summary message about any validation issues. -->
@Html.ValidationSummary()
<fieldset>
  <legend>Add Class</legend>
<div>
  <label for="Course">Class:</label>
  <!-- Validation.For("course") adds validation attributes to the input element. -->
  <input type="text" name="Course" value="@Request["course"]"  @Validation.For("course") />

  <!-- Display a field-specific message about validation issues. -->
  @Html.ValidationMessage("course")
</div>

<div>
  <label for="ProfessorName">Professor:</label>
  <input type="text" name="ProfessorName" value="@Request["professorname"]"
      @Validation.For("professorname") />
  @Html.ValidationMessage("professorname")
</div>

<div>
  <label for="Credits">Credits:</label>
  <input type="text" name="Credits" value="@Request["credits"]" @Validation.For("credits") />
  @Html.ValidationMessage("credits")
</div>

<div>
  <label>&nbsp;</label>
  <input type="submit" value="Submit" class="submit" />
</div>
  </fieldset>
</form>
</body>
</html>

以下是使用者提交有效輸入時的頁面：

當使用者提交頁面時，其必要欄位保留空白：

以下是使用者在 [ 點數 ] 欄位中，以整數以外的專案提交頁面時：

如需詳細資訊，請參閱下列部落格文章：

已更新網頁 v2 中的驗證使用 Validation 協助程式 (伺服器端新增驗證的基本概念)
在網頁 v2 中更新驗證，第 2 部分新增用戶端驗證。
已更新網頁 v2 中的驗證，第 3 部分格式化驗證錯誤。

使用資產管理員註冊腳本

資產管理員是一項新功能，您可以在伺服器程式碼中使用來註冊和轉譯用戶端腳本。當您使用多個檔案的程式碼 (時，這項功能會很有説明，例如配置頁面、內容頁面、協助程式等) ，這些檔案會在執行時間合併成單一頁面。資產管理員會協調原始程式檔，以確保腳本檔案在轉譯頁面上正確且有效率地參考，不論其從哪一個程式碼檔案呼叫，或呼叫多少次。資產管理員也會在正確的位置轉 <script> 譯標籤，讓頁面可以在轉譯) 時快速載入 (而不下載腳本，並避免在轉譯完成之前呼叫腳本時可能發生的錯誤。

例如，假設您建立可呼叫 JavaScript 檔案的自訂協助程式，並在內容頁程式碼的三個不同位置呼叫此協助程式。如果您未使用資產管理員在協助程式中註冊腳本呼叫，則所有指向相同腳本檔案的三個不同 <script> 標籤都會出現在轉譯的頁面中。此外，根據標記插入轉譯頁面的位置 <script> 而定，如果腳本嘗試在頁面完全載入之前存取特定頁面元素，就可能發生錯誤。如果您使用資產管理員來註冊腳本，請避免這些問題。

您可以執行下列動作，向資產管理員註冊腳本：

在需要參考腳本的程式碼中，呼叫 Assets.AddScript 方法。
在 _SiteLayout 頁面中，呼叫 Assets.GetScripts 方法來轉譯 <script> 標記。

注意

將呼叫 Assets.GetScripts 放在_SiteLayout頁面中的最後一個專案 <body> 。這有助於加快頁面載入速度，並有助於避免腳本錯誤。

下列範例顯示資產管理員的運作方式。程式碼包含下列專案：

名為的 MakeNote 自訂協助程式。這個協助程式會在方塊內轉譯字串，方法是 div 將樣式為框線的元素包裝起來，並將「Note：」新增至該方塊中。協助程式也會呼叫 JavaScript 檔案，將執行時間行為新增至附注。協助程式會藉由呼叫 Assets.AddScript 來註冊腳本，而不是使用 <script> 標記來參考腳本。
JavaScript 檔案。這是協助程式所呼叫的檔案，它會在事件期間 mouseover 暫時增加記事專案的字型大小。
參考 _SiteLayout 頁面的內容頁面，會在本文中轉譯一些內容，然後呼叫 MakeNote 協助程式。
_SiteLayout頁面。此頁面提供通用的頁首和版面配置結構。它也包含對 Assets.GetScripts 的呼叫，也就是資產管理員在頁面中轉譯腳本呼叫的方式。

若要執行範例：

建立空白的網頁 2 網站。您可以為此使用 WebMatrix 空白網站 範本。
在網站中建立名為 Scripts 的資料夾。
在 [腳本 ] 資料夾中，建立名為 Test.js的檔案、從範例複製 Test.js 內容，然後儲存檔案。
在網站中 建立名為 App_Code 的資料夾。
在 App_Code 資料夾中，建立名為 Helpers.cshtml的檔案、將範例程式碼複製到其中，然後將它儲存在根資料夾中名為 App_Code 的資料夾。
在網站的根資料夾中，建立名為 _SiteLayout.cshtml 的檔案、將範例複製到其中，然後儲存檔案。
在網站根目錄中，建立名為 ContentPage.cshtml的檔案、新增範例程式碼，並加以儲存。
在瀏覽器中執行 ContentPage 。您傳遞給 MakeNote 協助程式的字串會轉譯為 Boxed 附注。
將滑鼠指標傳遞至記事上方。腳本會暫時增加附注的字型大小。
檢視轉譯頁面的來源。由於您放置呼叫 Assets.GetScripts 的位置，因此呼叫Test.js的轉譯 <script> 標記是頁面本文中的最後一個專案。

Test.js

function UpdateNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "150%";
}
function ReturnNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "inherit";
}

Helpers.cshtml

@helper MakeNote(string content, string noteid) {
Assets.AddScript("~/Scripts/Test.js");

<div id="@noteid" style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;"
 onmouseover="UpdateNoteStyle('@noteid')" onmouseout="ReturnNoteStyle('@noteid')">
  <p>
  <strong>Note</strong>&nbsp;&nbsp; @content
   </p>
</div>
}

_SiteLayout.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
    <div class="content-wrapper">
        <h1>Contoso Ltd.</h1>
    </div>
</header>
<div id="body">
    <section class="content-wrapper main-content clear-fix">
        @RenderBody()
    </section>
</div>
@Assets.GetScripts()
</body>
</html>

ContentPage.cshtml

@{
Layout = "~/_SiteLayout.cshtml";
}
<p>
Nullam scelerisque facilisis placerat. Fusce a augue
erat, malesuada euismod dui.
</p>
@Helpers.MakeNote("Latin is fun to translate.", "note1")

當您將滑鼠指標放在附注上方時，下列螢幕擷取畫面會顯示瀏覽器中 的 ContentPage.cshtml ：

使用 OAuth 和 OpenID 從 Facebook 和其他網站啟用登入

網頁 2 提供成員資格和驗證的增強選項。主要增強功能是有新的 OAuth 和 OpenID 提供者。使用這些提供者，您可以讓使用者使用 Facebook、Twitter、Windows Live、Google 和 Yahoo 的現有認證登入您的網站。例如，若要使用 Facebook 帳戶登入，使用者可以只選擇 Facebook 圖示，將他們重新導向至他們輸入其使用者資訊的 Facebook 登入頁面。然後，他們可以將 Facebook 登入與您的網站上的帳戶產生關聯。網頁成員資格功能的相關增強功能是使用者可以建立多個登入 (包括從社交網路網站的登入，) 您網站上的單一帳戶登入。

此影像顯示 [ 入門網站 ] 範本中的 [登入] 頁面，使用者可以選擇 Facebook、Twitter 或 Windows Live 圖示，以使用外部帳戶登入：

您可以只使用幾行程式碼來啟用 OAuth 和 OpenID 成員資格。您用來搭配 OAuth 和 OpenID 提供者使用的方法和屬性位於類別中 WebMatrix.Security.OAuthWebSecurity 。

不過，不要使用程式碼來啟用來自其他網站的登入，建議使用 WebMatrix 2 Beta 隨附的新 入門網站 範本來開始使用新的提供者。 入門網站範本包含完整的成員資格基礎結構、使用登入頁面完成、成員資格資料庫，以及讓使用者使用本機認證或其他網站登入網站所需的所有程式碼。

如何使用 OAuth 和 OpenID 提供者啟用登入

本節提供如何讓使用者從外部網站 (Facebook、Twitter、Windows Live、Google 或 Yahoo) 登入以 入門網站 範本為基礎的網站範例。建立入門網站之後，您可以遵循下列 (詳細資料) ：

對於使用 OAuth 提供者的網站， (Facebook、Twitter 和 Windows Live) ，請在外部網站上建立應用程式。這可讓您的應用程式金鑰，以便叫用這些網站的登入功能。對於使用 OpenID 提供者的網站， (Google、Yahoo) ，您不需要建立應用程式。針對所有這些網站，您必須擁有帳戶才能登入和建立開發人員應用程式。

注意

Windows Live 應用程式只接受工作網站的即時 URL，因此您無法使用本機網站 URL 來測試登入。
編輯網站中的一些檔案，以指定適當的驗證提供者，並提交您要使用的網站登入。

若要啟用 Google 和 Yahoo 登入：

在您的網站中，編輯 _AppStart.cshtml 頁面，並在呼叫 WebSecurity.InitializeDatabaseConnection 方法之後，于 Razor 程式碼區塊中新增下列兩行程式碼。此程式碼可同時啟用 Google 和 Yahoo OpenID 提供者。
```
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Google);
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Yahoo);
```

在 ~/Account/Login.cshtml 頁面中，從接近頁面結尾的標記 <fieldset> 區塊中移除批註。若要取消批註程式碼，請移除 @* 前面並遵循區塊的 <fieldset> 字元。產生的程式碼區塊看起來像這樣：

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

<input>將 Google 或 Yahoo 提供者的專案新增至 <fieldset>~/Account/Login.cshtml頁面中的群組。 Google 和 Yahoo 元素的 <input> 更新 <fieldset> 群組看起來像下列範例：

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
<input type="submit" name="provider" id="yahoo" value="Yahoo" title="Log in using your Yahoo account." />
<input type="submit" name="provider" id="google" value="Google" title="Log in using your Google account." />
</fieldset>

在 ~/Account/AssociateServiceAccount.cshtml 頁面中，將 Google 或 Yahoo 的元素新增 <input> 至 <fieldset> 檔案結尾附近的群組。您可以複製剛新增至 <fieldset>~/Account/Login.cshtml頁面中區段的相同 <input> 元素。

如果您想要建立頁面，即可使用入門網站範本中的 ~/Account/AssociateServiceAccount.cshtml 頁面，讓使用者可以在該頁面上建立多個來自其他網站的登入與網站上單一帳戶的關聯。

現在您可以測試 Google 和 Yahoo 登入。

執行網站的 default.cshtml 頁面，然後選擇 [ 登入] 按鈕。
在 [ 登入 ] 頁面上，于 [使用其他服務登入] 區段中，選擇 [Google ] 或 [ Yahoo 提交] 按鈕。此範例使用 Google 登入。

網頁會將要求重新導向至 Google 登入頁面。
輸入現有 Google 帳戶的認證。
如果 Google 詢問您是否要允許 Localhost 從帳戶使用資訊，請按一下 [ 允許]。

此程式碼會使用 Google 權杖來驗證使用者，然後在您的網站返回此頁面。此頁面可讓使用者將其 Google 登入與您網站上的現有帳戶產生關聯，或者他們可以在您的網站註冊新帳戶，以將外部登入與產生關聯。
選擇 [ 關聯] 按鈕。瀏覽器會返回應用程式的首頁。

若要啟用 Facebook 登入：

如果您尚未登入) ，請移至 Facebook 開發人員網站 (登入。
選擇 [ 建立新的應用程式 ] 按鈕，然後遵循提示來命名並建立新的應用程式。
在 [ 選取您的應用程式如何與 Facebook 整合] 區段中，選擇 [網站 ] 區段。
例如，在 [網站 URL ] 欄位中填入網站的 URL (，例如) http://www.example.com 。 [ 定義域] 欄位是選擇性的;您可以使用此功能來提供整個網域 (的驗證，例如 example.com) 。

注意

如果您在本機電腦上執行網站，其 URL 類似 http://localhost:12345 (號碼是本機埠號碼) ，您可以將此值新增至 [ 網站 URL ] 欄位來測試您的網站。不過，每當本機網站的埠號碼變更時，您必須更新應用程式的 [網站 URL ] 欄位。
選擇 [ 儲存變更] 按鈕。
再次選擇 [ 應用程式] 索引 標籤，然後檢視應用程式的起始頁面。
複製應用程式的 [應用程式識別碼 ] 和 [ 應用程式密碼 ] 值，並將其貼到暫存文字檔中。您會在網站程式碼中將這些值傳遞至 Facebook 提供者。
結束 Facebook 開發人員網站。

現在您會對網站的兩個頁面進行變更，讓使用者能夠使用其 Facebook 帳戶登入網站。

在您的網站中，編輯 _AppStart.cshtml 頁面，並取消批註 Facebook OAuth 提供者的程式碼。未批註的程式碼區塊如下所示：

OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Facebook,
consumerKey: "",   // for Facebook, consumerKey is called AppID in the SDK
consumerSecret: "");

從 Facebook 應用程式複製 應用程式 識別碼值作為參數的值 consumerKey ， (引號內) 。
從 Facebook 應用程式複製 應用程式秘密 值作為 consumerSecret 參數值。
儲存並關閉檔案。

編輯 ~/Account/Login.cshtml 頁面，並從靠近頁面結尾的區塊中移除批註 <fieldset> 。若要取消批註程式碼，請移除 @* 前面並遵循區塊的 <fieldset> 字元。移除批註的程式碼區塊如下所示：

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

儲存並關閉檔案。

現在您可以測試 Facebook 登入。

執行網站的 default.cshtml 頁面，然後選擇 [ 登入 ] 按鈕。
在 [ 登入 ] 頁面的 [ 使用另一個服務登入] 區段中，選擇 Facebook 圖示。

網頁會將要求重新導向至 Facebook 登入頁面。
登入 Facebook 帳戶。

此程式碼會使用 Facebook 權杖來驗證您，然後返回頁面，讓 Facebook 登入與網站的登入產生關聯。您的使用者名稱或電子郵件地址會填入表單上的[Email] 欄位。
選擇 [ 關聯] 按鈕。

瀏覽器會返回首頁並登入。

若要啟用 Twitter 登入：

流覽至 Twitter 開發人員網站。
選擇 [ 建立應用程式] 連結，然後登入網站。
在 [ 建立應用程式] 表單上，填寫 [ 名稱 ] 和 [ 描述] 欄位。
在 [ 網站 ] 欄位中，輸入網站的 URL (例如， http://www.example.com) 。

注意

如果您要在本機測試網站， (使用類似) 的 http://localhost:12345 URL，Twitter 可能無法接受 URL。不過，您可能可以使用本機回送 IP 位址 (，例如 http://127.0.0.1:12345) 。這可簡化在本機測試應用程式的程式。不過，每次本機網站的埠號碼變更時，都必須更新應用程式的 [WebSite ] 欄位。
在 [ 回呼 URL ] 欄位中，輸入網站中您想要使用者在登入 Twitter 之後返回的頁面 URL。例如，若要將使用者傳送至入門網站的首頁 (，以辨識其登入狀態) ，請輸入您在 [網站 ] 欄位中輸入的相同 URL。
接受條款，然後選擇 [ 建立 Twitter 應用程式 ] 按鈕。
在 [ 我的應用程式 ] 登陸頁面上，選擇您建立的應用程式。
在 [ 詳細資料] 索引 標籤上，捲動至底部，然後選擇 [ 建立我的存取權杖 ] 按鈕。
在 [ 詳細資料] 索引標籤上，複製應用程式的 [ 取用者金鑰 ] 和 [ 取用者密碼] 值，並將其貼到暫存文字檔中。您會在網站程式碼中將這些值傳遞至 Twitter 提供者。
結束 Twitter 網站。

現在，您會對網站的兩個頁面進行變更，讓使用者能夠使用他們的 Twitter 帳戶登入網站。

在您的網站中，編輯 _AppStart.cshtml 頁面，並取消批註 Twitter OAuth 提供者的程式碼。未批註的程式碼區塊看起來像這樣：
```
OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Twitter,
consumerKey: "",
consumerSecret: "");
```
從 Twitter 應用程式中複製 取用者金鑰 值作為參數的值 consumerKey ， (引號內) 。
從 Twitter 應用程式複製取用 者密碼 值作為參數的值 consumerSecret 。
儲存並關閉檔案。

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

儲存並關閉檔案。

現在您可以測試 Twitter 登入。

執行網站的 default.cshtml 頁面，然後選擇 [ 登入 ] 按鈕。
在 [ 登入 ] 頁面的 [ 使用另一個服務登入] 區段中，選擇 Twitter 圖示。

網頁會將要求重新導向至您所建立應用程式的 Twitter 登入頁面。
登入 Twitter 帳戶。
此程式碼會使用 Twitter 權杖來驗證使用者，然後將您傳回頁面，讓登入與網站帳戶產生關聯。您的名稱或電子郵件地址會填入表單的[Email] 欄位中。
選擇 [ 關聯] 按鈕。

瀏覽器會返回首頁並登入。

使用地圖協助程式新增地圖

網頁 2 包含 ASP.NET Web 協助程式程式庫的新增專案，這是網頁網站的增益集套件。其中一個是類別提供的 Microsoft.Web.Helpers.Maps 對應元件。您可以使用類別 Maps ，根據地址或一組經度和緯度座標產生地圖。類別 Maps 可讓您直接呼叫熱門地圖引擎，包括 Bing、Google、MapQuest 和 Yahoo。

若要在您的網站中使用新 Maps 類別，您必須先安裝第 2 版的 Web 協助程式程式庫。若要這樣做，請移至安裝目前發行版本本的 ASP.NET Web 協助程式程式庫並安裝第 2 版的指示。

不論您呼叫哪一個地圖引擎，新增對應至頁面的步驟都相同。您只要將 JavaScript 檔案參考新增至對應頁面，然後新增呼叫來轉譯頁面上的 <script> 標記。然後在您的對應頁面上，呼叫您想要使用的對應引擎。

下列範例示範如何建立根據地址轉譯地圖的頁面，以及根據經度和緯度座標轉譯地圖的另一個頁面。位址對應範例使用 Google Maps，而座標組應範例會使用Bing 地圖服務。請注意下列程式碼中的元素：

Assets.AddScript呼叫位於兩個對應頁面頂端的。這個方法會將參考新增至隨附于入門網站範本的jquery-1.6.2.min.js檔案，以及類別所需的 Maps 參考。
在配置檔案中呼叫 Assets.GetScripts 方法。這個方法會在兩個 <script> 對應頁面上轉譯標記。
在對應頁面中呼叫 @Maps.GetGoogleHtml 和 @Maps.GetBingHtml 方法。若要對應位址，您必須傳遞位址字串。若要對應座標，您必須通過經度和緯度座標。針對Bing 地圖服務引擎，您也必須在Bing 地圖服務開發人員網站) 註冊免費取得的金鑰 (。其他地圖引擎的方法的運作方式類似 (@Maps.GetYahooHtml 、 @Maps.GetMapQuestHtml) 。

若要建立對應頁面：

根據 入門網站 範本建立網站。
在網站的根目錄中建立名為 MapAddress.cshtml 的檔案。此頁面會根據您傳遞給它的位址產生地圖。

將下列程式碼複製到檔案中，覆寫現有的內容。

@{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map an Address:</h3>
<form method="post" action="" id="coordinates" style="width: 320px">
<fieldset>
  <div>
    <label for="address">Address:</label>
    <input style="width: 300px" type="text"  name="address"  value="@Request["address"]"/>
    <input type="submit" value="Map It!" />
   </div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theAddress = Request["address"];
@Maps.GetGoogleHtml(theAddress,
    width: "800",
    height: "800")
}
</div>

在網站的根目錄中建立名為 _MapLayout.cshtml 的檔案。此頁面將會是兩個對應頁面的版面配置頁面。

將下列程式碼複製到檔案中，覆寫現有的內容。

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />

<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 1em;
        left: 3em;
        width: 18em;
    }
    #content {
        margin-top: 10em;
        margin-left: 3em;
    }
</style>
</head>
<body>
  @RenderBody()

  @*
Call the Assets helper to render tags for the Maps helper. For
releases after Web Pages 2 Beta, call Assets.GetScripts().
  *@
  @Assets.GetScripts()
</body>
</html>

在網站的根目錄中建立名為 MapCoordinates.cshtml 的檔案。此頁面會根據您傳遞給它的一組座標來產生地圖。

將下列程式碼複製到檔案中，覆寫現有的內容。

@{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map a set of coordinates:</h3>
<form method="post" action="" id="coordinates">
<fieldset>
<div>
    <label for="latitude">Latitude:&nbsp;&nbsp;&nbsp;</label>
    <input type="text"  name="latitude" value="@Request["latitude"]"/>
</div>
<div>
    <label for="longitude">Longitude:</label>
    <input type="text" name="longitude" value="@Request["longitude"]"/>
</div>
<div>
    <input type="submit" value="Map It!" />
</div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theLatitude = Request["latitude"];
var theLongitude = Request["longitude"];
@Maps.GetBingHtml("Ag6C5Ci9VUGz9AIhQyJ7YNwGraanqwy5-V3LK1qGDpdEVPV-MUPBryG18ELoC6g6",
    "",
    theLatitude,
    theLongitude,
    width: "800",
    height: "800")
}
</div>

若要測試您的對應頁面：

執行 MapAddress.cshtml 檔案頁面。
輸入完整的位址字串，包括街地道址、州或省和郵遞區號，然後選擇 [ 地圖] 按鈕。頁面會從 Google Maps 轉譯地圖：
尋找特定位置的一組緯度和經度座標。
執行 MapCoordinates.cshtml頁面。輸入座標，然後選擇 [ 對應它] 按鈕。頁面會從Bing 地圖服務轉譯地圖：

並存執行網頁應用程式

網頁 2 新增並存執行應用程式的能力。這可讓您繼續執行網頁 1 應用程式、建置新的網頁 2 應用程式，並在相同的電腦上執行所有應用程式。

以下是當您使用 WebMatrix 安裝網頁 2 Beta 版時要記住的一些事項：

根據預設，現有的網頁應用程式會在您的電腦上以第 2 版應用程式的形式執行。 (GAC 中已安裝第 2 版的元件，並會自動使用。)
如果您想要使用網頁第 1 版 (而非預設值來執行網站，如上一點) 所示，您可以將網站設定為執行此動作。如果您的網站還沒有網站根目錄中 的web.config 檔案，請建立新的檔案，並將下列 XML 複製到其中，覆寫現有的內容。如果網站已經包含 web.config 檔案，請將類似下列元素新增 <appSettings> 至 <configuration> 區段。
```
<?xml version="1.0"?>
<configuration>
<appSettings>
<add key="webPages:Version" value="1.0"/>
</appSettings>
</configuration>
```
'- 如果您未在 web.config 檔案中指定版本，則會將月臺部署為第 2 版網站。 (第 2 版元件會複製到已部署月臺中的 bin 資料夾。)
您在 Web Matrix 第 2 版 Beta 版中使用網站範本建立的新應用程式，包括網站 bin 資料夾中的網頁第 2 版元件。

一般而言，您一律可以使用 NuGet 將適當的元件安裝到網站的 bin 資料夾中，來控制要與您的網站搭配使用的網頁版本。若要尋找套件，請造訪 NuGet.org。

行動裝置的轉譯頁面

網頁 2 可讓您建立自訂顯示器，以在行動裝置或其他裝置上轉譯內容。

System.Web.WebPages命名空間包含下列類別，可讓您使用顯示模式： DefaultDisplayMode 、 DisplayInfo 和 DisplayModes 。您可以直接使用這些類別，並撰寫程式碼來轉譯特定裝置的正確輸出。

或者，您可以使用檔案命名模式來建立裝置特定頁面，如下所示： FileName.Mobile.cshtml。例如，您可以建立兩個版本的頁面，一個名為 MyFile.cshtml ，另一個名為 MyFile.Mobile.cshtml。在執行時間，當行動裝置要求 MyFile.cshtml時，網頁會從 MyFile.Mobile.cshtml轉譯內容。否則，會轉譯 MyFile.cshtml 。

下列範例示範如何藉由新增行動裝置的內容頁面來啟用行動轉譯。 Page1.cshtml 包含內容加上導覽提要欄位。 Page1.Mobile.cshtml 包含相同的內容，但省略提要欄位。

若要建置並執行程式碼範例：

在網頁網站中，建立名為 Page1.cshtml 的檔案，並從範例中複製 Page1.cshtml 內容。
建立名為 Page1.Mobile.cshtml 的檔案，並從範例複製 Page1.Mobile.cshtml 內容。請注意，頁面的行動版本會省略流覽區段，以在較小的螢幕上進行更好的轉譯。
執行桌面瀏覽器並流覽至 Page1.cshtml。
執行行動瀏覽器 (或行動裝置模擬器) 並流覽至 Page1.cshtml。請注意，這次網頁會轉譯頁面的行動版本。

注意

若要測試行動頁面，您可以使用在桌上型電腦上執行的行動裝置模擬器。此工具可讓您測試網頁，因為它們在行動裝置上看起來 (，通常是較小的顯示區域) 。模擬器的其中一個範例是 Mozilla Firefox 的使用者代理程式切換器附加元件，可讓您從桌上出版 Firefox 模擬各種行動瀏覽器。

Page1.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 0;
        left: 0;
        width: 10em;
    }
    #content {
    margin-left: 13em;
        margin-right: 10em;
    }
</style>
</head>
<body>
<div id="navigation">
    <h3>Related Sites</h3>
    <ul>
        <li><a href="http://www.adventure-works.com/">Adventure Works</a></li>
        <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li>
        <li><a href="http://www.treyresearch.net/">Trey Research</a></li>
    </ul>
</div>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

Page1.Mobile.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    #content {
    margin-left: 2em;
        margin-right: 5em;
    }
</style>
</head>
<body>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

在桌面瀏覽器中轉譯的 Page1.cshtml：

Page1.Mobile.cshtml 顯示在 Firefox 瀏覽器中的 Apple iPhone 模擬器檢視中。即使要求是 Page1.cshtml，應用程式還是會轉譯 Page1.Mobile.cshtml。

其他資源

ASP.NET Web Pages 1 個資源

注意

大部分的網頁 1 程式設計和 API 資源仍然適用于網頁 2。

ASP.NET Web Pages程式設計簡介

WebMatrix 資源

Microsoft WebMatrix 網站
使用 Microsoft WebMatrix 啟動 Web 開發 (包含完整範例網頁應用程式)

共用方式為

ASP.NET Web Pages 2 中的最上層功能

安裝 WebMatrix

新功能和增強功能

RC 版本 (2012 年 6 月變更)

Beta 版本 (2012 年 2 月變更)

使用新增和更新的網站範本

驗證使用者輸入

使用資產管理員註冊腳本

使用 OAuth 和 OpenID 從 Facebook 和其他網站啟用登入

如何使用 OAuth 和 OpenID 提供者啟用登入

使用地圖協助程式新增地圖

並存執行網頁應用程式

行動裝置的轉譯頁面

其他資源

ASP.NET Web Pages 1 個資源

WebMatrix 資源

意見反應

意見反應

其他資源