使用 ASP.NET Web API 建置 RESTful API

發行項
07/13/2023

實際操作實驗室：使用 ASP.NET 4.x 中的 Web API，為連絡人管理員應用程式建置簡單的 REST API。您也會建置用戶端來取用 API。

最近幾年，HTTP 不只是為了提供 HTML 頁面而變得清楚。它也是建置 Web API 的強大平臺，使用幾個動詞 (GET、POST 等等，) 加上一些簡單的概念，例如 URI 和標頭。 ASP.NET Web API是一組可簡化 HTTP 程式設計的元件。因為它建置在 ASP.NET MVC 執行時間之上，所以 Web API 會自動處理 HTTP 的低階傳輸詳細資料。同時，Web API 自然會公開 HTTP 程式設計模型。事實上，Web API 的其中一個目標是不要將 HTTP 實境抽象化。因此，Web API 既彈性又容易擴充。 REST 架構樣式已證明是利用 HTTP 的有效方式，雖然它當然不是 HTTP 的唯一有效方法。連絡人管理員會公開 RESTful 以列出、新增和移除連絡人等等。

此實驗室需要對 HTTP、REST 有基本瞭解，並假設您有 HTML、JavaScript 和 jQuery 的基本工作知識。

注意

ASP.NET 網站具有專用於 ASP.NET Web API 架構 https://asp.net/web-api 的區域。此網站將繼續提供與 Web API 相關的晚期資訊、範例和新聞，因此，如果您想要深入瞭解如何建立幾乎任何裝置或開發架構可用的自訂 Web API，請經常檢查。

ASP.NET Web API類似于 ASP.NET MVC 4，在分隔服務層與控制器方面具有絕佳的彈性，可讓您使用數個可用的相依性插入架構相當容易。

所有範例代碼和程式碼片段都包含在 Web Training Kit 中，可在 https://github.com/Microsoft-Web/WebCampTrainingKit/releases 取得。

目標

在此實際操作實驗室中，您將瞭解如何：

實作 RESTful Web API
從 HTML 用戶端呼叫 API

必要條件

需要下列專案才能完成此實際操作實驗室：

Microsoft Visual Studio Express 2012 for Web或進階 (閱讀附錄 B，以取得如何安裝) 的指示。

安裝程式

安裝程式碼片段

為了方便起見，您將在此實驗室中管理的大部分程式碼都可以作為 Visual Studio 程式碼片段使用。若要安裝程式碼片段，請執行 .\Source\Setup\CodeSnippets.vsi 檔案。

如果您不熟悉Visual Studio Code程式碼片段，而且想要瞭解如何使用這些程式碼片段，您可以參閱本檔中的附錄「附錄 A：使用程式碼片段」。

Exercises

此實際操作實驗室包含下列練習：

練習 1：建立Read-Only Web API
練習 2：建立讀取/寫入 Web API
練習 3：從 HTML 用戶端取用 Web API

注意

每個練習都會伴隨 End 資料夾，其中包含完成練習之後應該取得的結果解決方案。如果您需要其他練習的協助，您可以使用此解決方案作為指南。

完成此實驗室的估計時間： 60 分鐘。

練習 1：建立Read-Only Web API

在此練習中，您將實作連絡人管理員的唯讀 GET 方法。

工作 1 - 建立 API 專案

在此工作中，您將使用新的 ASP.NET Web 專案範本來建立 Web API Web 應用程式。

執行 Visual Studio 2012 Express for Web，若要這樣做，請移至 [開始 ] 並輸入 VS Express for Web ，然後按 Enter鍵。
從 [ 檔案] 功能表中，選取 [ 新增專案]。選取 Visual C# | 從專案類型樹狀檢視的 Web 專案類型，然後選取 ASP.NET MVC 4 Web 應用程式 專案類型。將專案的 [名稱 ] 設定為 ContactManager ，並將 [ 方案名稱 ] 設定為 [開始]，然後按一下 [ 確定]。

建立新的 ASP.NET MVC 4.0 Web 應用程式專案
在 [ASP.NET MVC 4 專案類型] 對話方塊中，選取 [Web API 專案類型]。按一下 [確定]。

指定 Web API 專案類型

工作 2 - 建立連絡人管理員 API 控制器

在此工作中，您將建立 API 方法所在的控制器類別。

從專案中刪除Controllers資料夾中名為ValuesController.cs的檔案。
以滑鼠右鍵按一下專案中的 Controllers 資料夾，然後選取 [ 新增] | 操作功能表中的控制器。

將新的控制器新增至專案
在出現的 [ 新增控制器 ] 對話方塊中，從 [範本] 功能表中選取 [空白 API 控制器 ]。將控制器類別命名為 ContactController。然後按一下 [ 新增]。

使用 [新增控制器] 對話方塊建立新的 Web API 控制器
將下列程式碼新增至 ContactController。

(程式碼片段 - Web API 實驗室 - Ex01 - 取得 API 方法)
```
public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}
```
按 F5 鍵來進行應用程式偵錯。 Web API 專案的預設首頁應該會出現。

ASP.NET Web API應用程式的預設首頁
在 Internet Explorer 視窗中，按 F12 鍵以開啟 [開發人員工具 ] 視窗。按一下 [ 網路 ] 索引標籤，然後按一下 [ 開始擷取] 按鈕，開始將網路流量擷取到視窗中。

開啟網路索引標籤並起始網路擷取
使用 /api/contact 在瀏覽器的網址列中附加 URL，然後按 Enter 鍵。傳輸詳細資料會出現在網路擷取視窗中。請注意，回應的 MIME 類型為 application/json。這示範預設輸出格式為 JSON 的方式。

在 [

在 [網路] 檢視中檢視 Web API 要求的輸出

注意

此時 Internet Explorer 10 的預設行為會詢問使用者是否要儲存或開啟 Web API 呼叫所產生的資料流程。輸出會是文字檔，其中包含 Web API URL 呼叫的 JSON 結果。請勿取消對話方塊，以透過開發人員工具視窗watch回應的內容。
按一下 [ 移至詳細檢視 ] 按鈕，以查看此 API 呼叫回應的更多詳細資料。

切換至詳細檢視
按一下 [ 回應本文] 索引標籤以檢視實際的 JSON 回應文字。

在網路監視器中檢視 JSON 輸出文字

工作 3 - 建立連絡人模型並增強連絡人控制器

在此工作中，您將建立 API 方法所在的控制器類別。

以滑鼠右鍵按一下 Models 資料夾，然後從操作功能表中選取 [ 新增 | 類別... ]。

將新模型新增至 Web 應用程式
在 [ 新增專案] 對話方塊中，將新檔案命名為 Contact.cs ，然後按一下 [ 新增]。

建立新的 Contact 類別檔案
將下列醒目提示的程式碼新增至 Contact 類別。

(程式碼片段 - Web API 實驗室 - Ex01 - 連絡人類別)
```
public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}
```
在ContactController類別中，選取Get方法的方法定義中的文字字串，然後輸入Contact一詞。輸入單字之後，就會在 [連絡人] 一字開頭出現指標。按住 Ctrl 鍵並按句號 (.) 鍵，或使用滑鼠按一下圖示，在程式碼編輯器中開啟協助對話方塊，以自動填入 Models 命名空間的 using 指示詞。

針對命名空間宣告使用 Intellisense 協助

修改 Get 方法的程式碼，使其傳回連絡人模型實例的陣列。

(程式碼片段 - Web API 實驗室 - Ex01 - 傳回連絡人清單)

public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

按 F5 在瀏覽器中偵錯 Web 應用程式。若要檢視對 API 回應輸出所做的變更，請執行下列步驟。
1. 瀏覽器開啟之後，如果開發人員工具尚未開啟，請按 F12 。
2. 按一下 [ 網路] 索引標籤。
3. 按 [ 開始擷取] 按鈕。
4. 將 URL 尾碼 /api/contact 新增至網址列中的 URL，然後按 Enter 鍵。
5. 按 [移至詳細檢視] 按鈕。
6. 選取 [ 回應本文] 索引標籤。您應該會看到 JSON 字串，代表連絡人實例陣列的序列化形式。
  
  的
  
  複雜 Web API 方法呼叫的 JSON 序列化輸出

工作 4 - 將功能擷取至服務層

這項工作將示範如何將功能擷取到服務層，讓開發人員輕鬆地將其服務功能與控制器層分開，進而允許實際執行工作的服務重複使用。

在方案根目錄中建立新的資料夾，並將它命名為 Services。若要這樣做，請以滑鼠右鍵按一下[ContactManager] 專案，選取 [新增 | 資料夾]，將它命名為[服務]。

建立 Services 資料夾
以滑鼠右鍵按一下 [服務 ] 資料夾，然後從操作功能表中選取 [ 新增 | 類別... ]。

將新的類別新增至 Services 資料夾
當 [ 新增專案 ] 對話方塊出現時，將新的類別命名為 ContactRepository ，然後按一下 [ 新增]。

建立類別檔案以包含連絡人存放庫服務層的程式碼
將 using 指示詞新增至 ContactRepository.cs 檔案，以包含模型命名空間。
```
using ContactManager.Models;
```

將下列醒目提示的程式碼新增至 ContactRepository.cs 檔案，以實作 GetAllContacts 方法。

(程式碼片段 - Web API 實驗室 - Ex01 - 連絡存放庫)

public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
}

如果 ContactController.cs 檔案尚未開啟，請開啟它。
將下列 using 語句新增至檔案的命名空間宣告區段。
```
using ContactManager.Services;
```
將下列醒目提示的程式碼新增至 ContactController.cs 類別，以新增私用欄位來代表存放庫的實例，讓其餘類別成員可以使用服務實作。

(程式碼片段 - Web API 實驗室 - Ex01 - 連絡控制器)
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
變更 Get 方法，使其使用連絡人存放庫服務。

(程式碼片段 - Web API 實驗室 - Ex01 - 透過存放庫傳回連絡人清單)
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
在 ContactController的 Get 方法定義上放置中斷點。

將中斷點新增至連絡人控制器

將中斷點新增至連絡人控制器 11。按 F5 以執行應用程式。 12.當瀏覽器開啟時，請按 F12 開啟開發人員工具。 13.按一下 [ 網路] 索引標籤。14。按一下 [ 開始擷取] 按鈕。 15.在網址列中附加尾碼 /api/contact 的 URL，然後按 Enter 以載入 API 控制器。 16.Visual Studio 2012 一旦 Get 方法開始執行，就應該中斷。

在 Get 方法中中斷 Get 中斷

在 Get 方法 17 內中斷 。按 F5 繼續。 18.如果 Internet Explorer 尚未專注，返回至 Internet Explorer。請注意網路擷取視窗。

Internet Explorer 中的網路檢視顯示 Web API 呼叫網路檢視的結果

Internet Explorer 中的網路檢視顯示 Web API 呼叫 19 的結果。按一下 [移至詳細檢視] 按鈕。 20.按一下 [ 回應本文 ] 索引標籤。請注意 API 呼叫的 JSON 輸出，以及它如何代表服務層所擷取的兩個連絡人。

在開發人員工具視窗中檢視 Web API 的 JSON 輸出

在開發人員工具視窗中檢視 Web API 的 JSON 輸出

練習 2：建立讀取/寫入 Web API

在此練習中，您將實作連絡人管理員的 POST 和 PUT 方法，以使用資料編輯功能加以啟用。

工作 1 - 開啟 Web API 專案

在這項工作中，您將準備增強在練習 1 中建立的 Web API 專案，以便接受使用者輸入。

執行 Visual Studio 2012 Express for Web，若要這樣做，請移至 [開始 ] 並輸入 VS Express for Web ，然後按 Enter。
開啟位於 Source/Ex02-ReadWriteWebAPI/Begin/資料夾的Begin方案。否則，您可以繼續使用完成上一個練習所取得的結束解決方案。
1. 如果您開啟提供的 Begin 解決方案，您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建置建置方案] 來建 | 置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，進而減少專案大小。使用 NuGet Power Tools，藉由在Packages.config檔案中指定套件版本，您就能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。
開啟 Services/ContactRepository.cs 檔案。

工作 2 - 將Data-Persistence功能新增至連絡人存放庫實作

在這項工作中，您將增強在練習 1 中建立之 Web API 專案的 ContactRepository 類別，以便保存並接受使用者輸入和新的連絡人實例。

將下列常數新增至 ContactRepository 類別，以代表本練習稍後的 Web 服務器快取專案索引鍵名稱。
```
private const string CacheKey = "ContactStore";
```

將建構函式新增至包含下列程式碼的 ContactRepository 。

(程式碼片段 - Web API 實驗室 - Ex02 - 連絡存放庫建構函 式)

public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

修改 GetAllContacts 方法的程式碼，如下所示。

(程式碼片段 - Web API 實驗室 - Ex02 - 取得所有連絡人)
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}
```
注意

此範例僅供示範之用，並使用網頁伺服器的快取作為儲存媒體，以便同時供多個用戶端使用值，而不是使用會話儲存機制或要求儲存體存留期。其中一個可以使用 Entity Framework、XML 儲存體，或任何其他種類的 Web 服務器快取。

將名為 SaveContact 的新方法實作至 ContactRepository 類別，以執行儲存連絡人的工作。 SaveContact方法應該採用單一Contact參數，並傳回指出成功或失敗的布林值。

(程式碼片段 - Web API 實驗室 - Ex02 - 實作 SaveContact 方法)

public bool SaveContact(Contact contact)
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
         try
         {
              var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
              currentData.Add(contact);
              ctx.Cache[CacheKey] = currentData.ToArray();

              return true;
         }
         catch (Exception ex)
         {
              Console.WriteLine(ex.ToString());
              return false;
         }
    }

    return false;
}

練習 3：從 HTML 用戶端取用 Web API

在此練習中，您將建立 HTML 用戶端來呼叫 Web API。此用戶端會使用 JavaScript 來協助與 Web API 進行資料交換，並使用 HTML 標籤在網頁瀏覽器中顯示結果。

工作 1 - 修改索引檢視以提供顯示連絡人的 GUI

在這項工作中，您將修改 Web 應用程式的預設 [索引] 檢視，以支援在 HTML 瀏覽器中顯示現有連絡人清單的需求。

如果 Visual Studio 2012 Express for Web 尚未開啟，請開啟它。
開啟位於Source/Ex03-ConsumingWebAPI/Begin/資料夾的Begin方案。否則，您可以繼續使用完成上一個練習所取得的結束解決方案。
1. 如果您開啟提供的 Begin 解決方案，您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建置建置方案] 來建 | 置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，以減少專案大小。使用 NuGet Power Tools，藉由在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。
開啟位於Views/Home資料夾的Index.cshtml檔案。
將 div 元素內的 HTML 程式碼取代為 id body ，使其看起來像下列程式碼。
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

在檔案底部新增下列 JAVAscript 程式碼，以對 Web API 執行 HTTP 要求。

@section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

如果 ContactController.cs 檔案尚未開啟，請開啟它。
在ContactController類別的Get方法上放置中斷點。

將中斷點放在 API 控制器的 Get 方法上
按 F5 執行專案。瀏覽器會載入 HTML 檔案。

注意

請確定您正在流覽至應用程式的根 URL。
載入頁面並執行 JavaScript 之後，將會叫用中斷點，而程式碼執行會在控制器中暫停。

偵錯

使用 Visual Studio 2012 Express for Web 對 Web API 呼叫進行偵錯
移除中斷點，然後按 F5 或偵錯工具列的 [ 繼續 ] 按鈕，以繼續在瀏覽器中載入檢視。 Web API 呼叫完成之後，您應該會看到從 Web API 呼叫傳回的連絡人顯示為瀏覽器中的清單專案。

的結果

在瀏覽器中顯示為清單專案之 API 呼叫的結果
停止偵錯。

工作 2 - 修改索引檢視以提供建立連絡人的 GUI

在這項工作中，您將繼續修改 MVC 應用程式的索引檢視。表單將會新增至 HTML 頁面，以擷取使用者輸入，並將其傳送至 Web API 以建立新的連絡人，並建立新的 Web API 控制器方法，以從 GUI 收集日期。

開啟 ContactController.cs 檔案。

將新的方法新增至名為 Post 的控制器類別，如下列程式碼所示。

(程式碼片段 - Web API 實驗室 - Ex03 - Post 方法)

public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

    var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

    return response;
}

如果尚未開啟，請在 Visual Studio 中開啟 Index.cshtml 檔案。

將下方的 HTML 程式碼新增至您在上一個工作中新增的未排序清單之後的檔案。

<form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

在檔底部的腳本元素內，新增下列醒目提示的程式碼來處理按鈕點擊事件，這會使用 HTTP POST 呼叫將資料張貼至 Web API。

<script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

在 ContactController.cs中，于 Post 方法上放置中斷點。
按 F5 在瀏覽器中執行應用程式。
在瀏覽器中載入頁面之後，請輸入新的連絡人名稱和識別碼，然後按一下 [ 儲存] 按鈕。

：

在瀏覽器中載入的用戶端 HTML 檔案
當偵錯工具視窗在 Post 方法中中斷時，請查看 連絡人 參數的屬性。這些值應該符合您在表單中輸入的資料。

從

從用戶端傳送至 Web API 的 Contact 物件
逐步執行偵錯工具中的方法，直到 建立回應 變數為止。在偵錯工具的 [ 區域變數 ] 視窗中檢查時，您會看到所有屬性都已設定。

在偵錯工具中建立下列回應調試

偵錯工具 11 中建立之後的回應 。如果您按下 F5 ，或按一下偵錯工具中的 [繼續 ]，要求將會完成。切換回瀏覽器之後，新的連絡人已新增至 ContactRepository 實作所儲存的連絡人清單。

瀏覽器反映成功建立新的連絡人實例

瀏覽器反映新連絡人實例的成功建立

注意

此外，您也可以使用 Web Deploy 將此應用程式部署至 Azure 下列附錄 C：發佈 ASP.NET MVC 4 應用程式。

總結

此實驗室已為您介紹新的 ASP.NET Web API架構，以及使用架構實作 RESTful Web API。從這裡開始，您可以建立新的存放庫，以使用任意數目的機制來協助資料持續性，並聯機該服務，而不是在此實驗室中提供簡單機制的存放庫。 Web API 支援許多額外的功能，例如啟用以任何支援 HTTP 和 JSON 或 XML 的語言撰寫的非 HTML 用戶端的通訊。您也可以在一般 Web 應用程式外部裝載 Web API，以及建立您自己的序列化格式的能力。

ASP.NET 網站具有專用於 [ https://asp.net/web-api ] https://asp.net/web-api () ASP.NET Web API 架構的區域。此網站將繼續提供與 Web API 相關的晚期資訊、範例和新聞，因此，如果您想要深入瞭解如何建立幾乎任何裝置或開發架構可用的自訂 Web API，請經常檢查。

附錄 A：使用程式碼片段

使用程式碼片段時，您會有指尖所需的所有程式碼。實驗室檔會告訴您何時可以使用它們，如下圖所示。

使用 Visual Studio 程式碼片段將程式碼插入專案中

使用 Visual Studio 程式碼片段將程式碼插入專案中

僅使用鍵盤 (C# 新增程式碼片段)

將游標放在您要插入程式碼的位置。
開始輸入程式碼片段名稱， (不含空格或連字號) 。
監看 IntelliSense 顯示相符的程式碼片段名稱。
選取正確的程式碼片段 (或持續輸入，直到選取整個程式碼片段的名稱) 為止。
按 Tab 鍵兩次，將程式碼片段插入游標位置。

開始輸入程式碼片段名稱

按 Tab 鍵以選取醒目提示的程式碼片段

再次按 Tab 鍵，程式碼片段將會展開

若要使用滑鼠 (C# 新增程式碼片段，Visual Basic 和 XML)

以滑鼠右鍵按一下您要插入程式碼片段的位置。
選取 [插入程式碼片段 ]，後面接著 [我的程式碼片段]。
按一下相關程式碼片段，從清單中挑選相關程式碼片段。

] 以滑鼠

以滑鼠右鍵按一下您要插入程式碼片段的位置，然後選取 [插入程式碼片段]

按一下相關程式碼片段，從清單中挑選相關的程式碼片段

附錄 B：安裝 Visual Studio Express 2012 for Web

您可以使用Microsoft Web Platform Installer安裝Microsoft Visual Studio Express 2012 for Web或其他「快速」版本。下列指示會引導您使用Microsoft Web Platform Installer安裝Visual Studio Express 2012 for Web所需的步驟。

移至 [ https://go.microsoft.com/?linkid=9810169 ] (https://go.microsoft.com/?linkid=9810169) 。或者，如果您已安裝 Web Platform Installer，您可以開啟它，並搜尋產品「Visual Studio Express 2012 for Web 與 Azure SDK」。
按一下 [ 立即安裝]。如果您沒有 Web Platform Installer ，系統會將您重新導向至下載並先安裝。
開啟 Web Platform Installer 之後，按一下 [ 安裝 ] 以啟動安裝程式。

安裝Visual Studio Express
閱讀所有產品的授權和條款，然後按一下 [ 我接受 ] 繼續。

接受授權條款
等候下載和安裝程式完成。

安裝進度
安裝完成時，按一下 [ 完成]。

安裝已完成
按一下 [結束 ] 以關閉 Web Platform Installer。
若要開啟 web Visual Studio Express，請移至 [開始]畫面並開始撰寫「VS Express」，然後按一下[VS Express for Web] 圖格。

VS Express for Web 磚

附錄 C：使用 Web Deploy 發佈 ASP.NET MVC 4 應用程式

本附錄將示範如何從 Azure 入口網站建立新的網站，併發布您遵循實驗室取得的應用程式，並利用 Azure 提供的 Web Deploy 發佈功能。

工作 1 - 從 Azure 入口網站建立新的網站

移至 Azure 管理入口網站，並使用與您訂用帳戶相關聯的 Microsoft 認證登入。

注意

透過 Azure，您可以免費裝載 10 個 ASP.NET 網站，然後在流量成長時進行調整。您可以在這裡註冊。

登入入口網站
按一下命令列上的 [ 新增 ]。

建立新的網站
按一下[計算 | 網站]。然後選取 [快速建立] 選項。提供新網站的可用 URL，然後按一下 [ 建立網站]。

注意

Azure 是可在雲端中執行之 Web 應用程式的主機，您可以控制和管理。 [快速建立] 選項可讓您從入口網站外部將已完成的 Web 應用程式部署至 Azure。它不包含設定資料庫的步驟。

建立

使用快速建立建立新網站
等到新網站建立為止。
建立網站之後，請按一下 URL 資料行底下的連結。檢查新的網站是否正常運作。

流覽至新的網站

執行的網站
返回至入口網站，然後按一下 [名稱] 資料行底下的網站名稱以顯示管理頁面。

開啟網站管理頁面
在 [儀表板 ] 頁面的 [ 快速概覽 ] 區段下，按一下 [ 下載發佈設定檔 ] 連結。

注意

發行設定檔包含針對每個啟用的發行方法，將 Web 應用程式發佈至 Azure 所需的所有資訊。發行設定檔包含 URL、使用者認證和資料庫字串，這些都是用來連接到已啟用發行方法的每個端點並進行驗證的必要資訊。 Microsoft WebMatrix 2、Microsoft Visual Studio Express for Web和Microsoft Visual Studio 2012支援讀取發佈設定檔，以自動設定這些程式以將 Web 應用程式發佈至 Azure。

下載網站發佈設定檔
將發行設定檔檔下載到已知位置。在此練習中，您將瞭解如何使用此檔案，從 Visual Studio 將 Web 應用程式發佈至 Azure。

儲存發行設定檔

工作 2 - 設定資料庫伺服器

如果您的應用程式使用SQL Server資料庫，您必須建立SQL Database伺服器。如果您想要部署未使用SQL Server的簡單應用程式，您可以略過這項工作。

您需要SQL Database伺服器來儲存應用程式資料庫。您可以從 Azure 管理入口網站中的訂用帳戶檢視SQL Database伺服器，網址為Sql Databases | Server 伺服器的 | 儀表板。如果您沒有建立伺服器，您可以使用命令列上的 [ 新增 ] 按鈕來建立伺服器。記下 伺服器名稱和 URL、系統管理員登入名稱和密碼，因為您將在下一個工作中使用這些名稱。尚未建立資料庫，因為它將在稍後階段中建立。

SQL Database伺服器儀表板
在下一個工作中，您將測試來自 Visual Studio 的資料庫連線，因此您必須在伺服器的 [允許 IP 位址] 清單中包含本機 IP 位址。若要這樣做，請按一下 [ 設定]，從 [目前用戶端 IP 位址 ] 中選取 IP 位址，然後將它貼到 [ 開始 IP 位址 ] 和 [ 結束 IP 位址 ] 文字方塊中，然後按一下。

新增用戶端 IP 位址
將 [用戶端 IP 位址 ] 新增至允許的 IP 位址清單之後，按一下 [ 儲存 ] 以確認變更。

確認變更

工作 3 - 使用 Web Deploy 發佈 ASP.NET MVC 4 應用程式

返回至 ASP.NET MVC 4 解決方案。在方案總管中，以滑鼠右鍵按一下網站專案，然後選取 [發佈]。

發佈網站
匯入您在第一個工作中儲存的發行設定檔。

匯入發行設定檔
按一下 [ 驗證連線]。驗證完成後，請按 [下一步]。

注意

一旦您看到綠色核取記號出現在 [驗證連線] 按鈕旁，驗證就會完成。

驗證連線
在 [ 設定 ] 頁面的 [ 資料庫 ] 區段下，按一下資料庫連線文字方塊旁的按鈕 (即 DefaultConnection) 。

Web 部署設定
設定資料庫連線，如下所示：
- 在[伺服器名稱] 中，使用tcp：前置詞輸入您的SQL Database伺服器 URL。
- 在 [使用者名稱 ] 中，輸入您的伺服器管理員登入名稱。
- 在 [密碼 ] 中，輸入您的伺服器管理員登入密碼。
- 輸入新的資料庫名稱，例如： MVC4SampleDB。
  
  設定目的地連接字串
然後按一下 [確定] 。當系統提示您建立資料庫時，請按一下 [是]。

建立資料庫
您將用來連線到 Windows Azure 中SQL Database的連接字串會顯示在 [預設連線] 文字方塊中。然後按一下 [下一步] 。

指向 SQL Database 的連接字串
在 [預覽] 頁面中，按一下 [ 發佈]。

發佈 Web 應用程式
發佈程式完成後，您的預設瀏覽器將會開啟已發佈的網站。

發佈至 Azure 的應用程式