創建新的ASP。NET MVC 4.0 Web應用程序項目

  1. 在ASP中。NET MVC 4項目類型對話框,選擇Web API項目類型。單擊確定。

    Image 2: Specifying the Web API project type

指定Web API項目類型(S)

在此任務中,您將創建API方法將駐留在其中的控制器類。

  1. 從項目中刪除Controllers文件夾中名為ValuesController.cs的文件。

  2. 右鍵單擊項目中的控制器文件夾,然后從上下文菜單中選擇添加|控制器。

    Image 3: Adding a new controller to the project

向項目添加新控制器

  1. 在出現的添加控制器對話框中,從模板菜單中選擇空API控制器。將控制器類命名為ContactController。然后,單擊添加

    Image 4: Using the Add Controller dialog to create a new Web API controller

使用“添加控制器”對話框創建新的Web API控制器(U)

  1. 將以下代碼添加到ContactController中。

(代碼段-Web API實驗室-Ex01-獲取API方法

publicstring[]Get()
{
returnnewstring[]
{
"Hello",
"[World](http://www.dlbhg.com/provider/uid20241114923216711076)"
;
  1. F5調試應用程序。應該顯示Web API項目的默認主頁。

    Image 5: The default home page of an ASP.NET Web API application

ASP的默認主頁。NET Web API應用程序

  1. 在Internet Explorer窗口中,按F12鍵打開開發人員工具窗口。單擊網絡選項卡,然后單擊開始捕獲按鈕,開始將網絡流量捕獲到窗口中。

    Image 6: Opening the network tab and initiating network capture

打開網絡選項卡并啟動網絡捕獲

  1. 在瀏覽器的地址欄中用/api/contact附加URL,然后按回車鍵。傳輸詳細信息將顯示在網絡捕獲窗口中。請注意,響應的MIME類型為application/json。這演示了默認輸出格式是JSON。

    Image 7: Viewing the output of the Web API request in the Network view

在“網絡”視圖中查看Web API請求的輸出(V)

Internet Explorer 10此時的默認行為是詢問用戶是否要保存或打開Web API調用產生的流。輸出將是一個文本文件,其中包含Web API URL調用的JSON結果。不要取消對話框,以便能夠通過開發人員工具窗口查看響應的內容。

  1. 單擊Go詳細查看按鈕,查看有關此API調用響應的更多詳細信息。

    Image 8: Switch to Detailed View

切換到詳細視圖

  1. 單擊響應正文選項卡查看實際的JSON響應文本。

    Image 9: Viewing the JSON output text in the network monitor

在網絡監視器中查看JSON輸出文本

在此任務中,您將創建將駐留API方法的控制器類。

  1. 右鍵單擊模型文件夾,然后選擇添加|類。..從上下文菜單中選擇。

    Image 10: Adding a new model to the web application

向web應用程序添加新模型

  1. 添加新項對話框中,將新文件命名為Contact.cs,然后單擊添加

    Image 11: Creating the new Contact class file

創建新的Contact類文件

  1. 將以下突出顯示的代碼添加到Contact類中。

(代碼段-Web API實驗室-Ex01-聯系類別

 public string Name { get; set; 
  1. ContactController類中,選擇Get方法的方法定義中的單詞string,然后鍵入單詞Contact。輸入單詞后,單詞聯系人的開頭將出現一個指示符。按住Ctrl+鍵并按句點(.)鍵,或使用鼠標單擊圖標打開代碼編輯器中的幫助對話框,以自動填寫Models命名空間的using指令。

    Image 12: Using Intellisense assistance for namespace declarations

使用Intellisense輔助進行命名空間聲明

  1. 修改Get方法的代碼,使其返回Contact模型實例數組。

(代碼段-Web API實驗室-Ex01-返回聯系人列表

 public Contact[] Get()
{
return new Contact[]
{
new Contact
{
名稱=“格倫·布洛克”,
Name = "Glenn Block"
,
new Contact
{
名字=“丹·羅斯”,
Name = "Dan Roth"

;
  1. F5在瀏覽器中調試web應用程序。要查看對API的響應輸出所做的更改,請執行以下步驟。

1.瀏覽器打開后,如果開發人員工具尚未打開,請按F12。

2.單擊網絡選項卡。

3.按下開始捕獲按鈕。

4.將URL后綴/api/聯系人添加到地址欄中的URL,然后按輸入鍵。

5.按Go詳細視圖按鈕。

6.選擇響應體選項卡。您應該看到一個JSON字符串,表示Contact實例數組的序列化形式。

Image 13: JSON serialized output of a complex Web API method call

復雜Web API方法調用的JSON序列化輸出(JSON)

本任務將演示如何將功能提取到服務層,使開發人員能夠輕松地將他們的服務功能與控制器層分離,從而允許實際完成工作的服務的可重用性。

  1. 在解決方案根目錄中創建一個新文件夾,并將其命名為Services。為此,右鍵單擊ContactManager項目,選擇添加|新建文件夾,將其命名為Services。

    Image 14: Creating Services folder

創建服務文件夾

  1. 右鍵單擊服務文件夾,然后選擇添加|類。..從上下文菜單中選擇。

    Image 15: Adding a new class to the Services folder

將新類添加到Services文件夾

  1. 出現添加新項對話框時,將新類命名為ContactRepository,然后單擊添加。

    Image 16: Creating a class file to contain the code for the Contact Repository service layer

創建類文件以包含聯系人存儲庫服務層的代碼

  1. ContactRepository.cs文件中添加一個using指令,以包含模型命名空間。

    using ContactManager.Models;
  2. 將以下突出顯示的代碼添加到ContactRepository.cs文件中,以實現GetAllContacts方法。

(代碼段-Web API實驗室-Ex01-聯系存儲庫

 public class ContactRepository
{
public Contact[] GetAllContacts()
{
return new Contact[]
{
new Contact
{
名稱=“格倫·布洛克”,
Name = "Glenn Block"
,
new Contact
{
名字=“丹·羅斯”,
Name = "Dan Roth"

;
  1. 打開ContactController.cs文件(如果尚未打開)。

  2. 將以下using語句添加到文件的命名空間聲明部分。

    using ContactManager.Services;
  3. 將以下突出顯示的代碼添加到ContactController.cs類中,以添加一個私有字段來表示存儲庫的實例,以便其他類成員可以使用服務實現。

(代碼段-Web API實驗室-Ex01-聯系控制器

publicContactController()
{
this.contactRepository=newContactRepository();

...
  1. 更改Get方法,使其使用聯系人存儲庫服務。

(代碼段-Web API實驗室-Ex01-通過存儲庫返回聯系人列表

publicContact[]Get()
{
returncontactRepository.GetAllContacts();
  1. ContactController獲取方法定義上設置斷點。

Image 17: Adding breakpoints to the contact controller

_向觸點控制器11添加斷點。按F5運行應用程序。 12.瀏覽器打開后,按F12打開開發人員工具。 13.單擊網絡選項卡。單擊開始捕獲按鈕。 15.在地址欄中添加后綴/api/contact的URL,然后按輸入加載api控制器。 16.一旦Get方法開始執行,Visual Studio 2012就會中斷。

Image 18: Breaking within the Get method

Get方法中的突破 17。按F5繼續。 18.如果Internet Explorer尚未處于焦點,請Go它。注意網絡捕獲窗口。

Image 19: Network view in Internet Explorer showing results of the Web API call

_顯示Web API調用結果的Internet Explorer中的網絡視圖_19。單擊Go詳細視圖按鈕。 20.單擊響應主體選項卡。注意API調用的JSON輸出,以及它如何表示服務層檢索到的兩個聯系人。

Image 20: Viewing the JSON output from the Web API in the developer tools window

在開發人員工具窗口中查看Web API的JSON輸出(V)

在本練習中,您將為聯系人管理器實現POST和PUT方法,以使其具有數據編輯功能。

在本任務中,您將準備增強練習1中創建的Web API項目,使其能夠接受用戶輸入。

  1. 運行Visual Studio 2012學習版Web,若要執行此操作,請go開始并鍵入**VS學習版Web*,然后按輸入**。

  2. 打開位于Source/Ex02 ReadWriteWebAPI/Begint/文件夾中的Begin解決方案。否則,您可以繼續使用通過完成上一個練習獲得的結束解決方案。

1.如果您打開了提供的開始解決方案,則需要下載一些缺少的NuGet包才能繼續。為此,請單擊項目菜單,然后選擇管理NuGet包。

2.在管理NuGet包對話框中,單擊還原以下載丟失的包。

3.最后,通過單擊構建|構建解決方案來構建解決方案。

使用NuGet的一個優點是,您不必在項目中發布所有庫,從而減小了項目規模。使用NuGet Power Tools,通過在Packages.config文件中指定包版本,您將能夠在第一次運行項目時下載所有必需的庫。這就是為什么在從該實驗室打開現有解決方案后,您必須運行這些步驟。

  1. 打開Services/ContactRepository.cs文件。

在此任務中,您將增強練習1中創建的Web API項目的ContactRepository類,以便它可以持久化并接受用戶輸入和新的Contact實例。

  1. 將以下常量添加到ContactRepository類中,以表示本練習稍后的web服務器緩存項鍵名的名稱。

    privateconststringCacheKey="ContactStore";
  2. ContactRepository添加一個構造函數,其中包含以下代碼。

(代碼段-Web API實驗室-Ex02-聯系存儲庫構造器

如果(ctx!=空)

ctx.Cache[CacheKey] = contacts;
  1. 修改GetAllContacts方法的代碼,如下所示。

(代碼段-Web API實驗室-Ex02-獲取所有聯系人

如果(ctx!=空)

returnnewContact[]
{
newContact
{
Id=0,
Name="Placeholder"

;

此示例用于演示目的,將使用web服務器的緩存作為存儲介質,以便多個客戶端可以同時使用這些值,而不是使用會話存儲機制或請求存儲生命周期??梢允褂脤嶓w框架、XML存儲或任何其他類型來代替web服務器緩存。

  1. ContactRepository類中實現一個名為SaveContact的新方法,以完成保存聯系人的工作。SaveContact方法應接受一個Contact參數,并返回一個表示成功或失敗的布爾值。

(代碼段-Web API實驗室-Ex02-實現SaveContact方法

如果(ctx!=空)

返回true;

return false;

在本練習中,您將創建一個HTML客戶端來調用Web API。該客戶端將使用JavaScript促進與Web API的數據交換,并將使用HTML標記在Web瀏覽器中顯示結果。

在此任務中,您將修改web應用程序的默認索引視圖,以支持在HTML瀏覽器中顯示現有聯系人列表的要求。

  1. 打開Visual Studio 2012 Web學習版(如果尚未打開)。

  2. 打開位于Source/Ex03 ConsumingWebAPI/Begint/文件夾中的Begin解決方案。否則,您可以繼續使用通過完成上一個練習獲得的結束解決方案。

1.如果您打開了提供的開始解決方案,則需要下載一些缺少的NuGet包才能繼續。為此,請單擊項目菜單,然后選擇管理NuGet包。

2.在管理NuGet包對話框中,單擊還原以下載丟失的包。

3.最后,通過單擊構建|構建解決方案來構建解決方案。

使用NuGet的一個優點是,您不必在項目中發布所有庫,從而減小了項目規模。使用NuGet Power Tools,通過在Packages.config文件中指定包版本,您將能夠在第一次運行項目時下載所有必需的庫。這就是為什么在從該實驗室打開現有解決方案后,您必須運行這些步驟。

  1. 打開位于Views/Home文件夾中的Index.cshtml文件。

  2. 將div元素中的HTML代碼替換為idbody,使其看起來像以下代碼。

  1. 在文件底部添加以下Javascript代碼,以執行對Web API的HTTP請求。
  1. 打開ContactController.cs文件(如果尚未打開)。

  2. ContactController類的Get方法上放置斷點。

    Image 21: Placing a breakpoint on the Get method of the API controller

_在API控制器的Get方法上放置斷點(P)

  1. F5運行項目。瀏覽器將加載HTML文檔。

確保您正在瀏覽應用程序的根URL。

  1. 加載頁面并執行JavaScript后,斷點將被命中,代碼執行將在控制器中暫停。

    Image 22: Debugging into the Web API calls using VS Express for Web

使用Visual Studio 2012學習版Web調試Web API調用(D)

  1. 刪除斷點,按F5或調試工具欄的繼續按鈕,繼續在瀏覽器中加載視圖。一旦Web API調用完成,您應該會看到從Web API調用返回的聯系人在瀏覽器中顯示為列表項。

    Image 23: Results of the API call displayed in the browser as list items

_在瀏覽器中顯示為列表項的API調用結果(R)

  1. 停止調試。

在此任務中,您將繼續修改MVC應用程序的索引視圖。將向HTML頁面添加一個表單,該表單將捕獲用戶輸入并將其發送到Web API以創建新的聯系人,并將創建一個新的Web API控制器方法以從GUI收集日期。

  1. 打開ContactController.cs文件。

  2. 向名為Post的控制器類添加一個新方法,如下代碼所示。

(代碼段-Web API實驗室-Ex03-后方法_)

var響應=請求。CreateResponse(System.Net.HttpStatusCode.Created,聯系人);

returnresponse;
  1. 如果尚未打開,請在Visual Studio中打開Index.cshtml文件。

  2. 將下面的HTML代碼添加到您在上一個任務中添加的無序列表之后的文件中。

  1. 在文檔底部的腳本元素中,添加以下突出顯示的代碼來處理按鈕單擊事件,該事件將使用HTTP post調用將數據發布到Web API。
  1. ContactController.cs中,在Post方法上放置斷點。

  2. F5在瀏覽器中運行應用程序。

  3. 在瀏覽器中加載頁面后,鍵入新的聯系人姓名和Id,然后單擊保存按鈕。

    Image 24: The client HTML document loaded in the browser

瀏覽器中加載的客戶端HTML文檔

  1. 當調試器窗口在Post方法中中斷時,請查看contact參數的屬性。這些值應與您在表單中輸入的數據相匹配。

    Image 25: The Contact object being sent to the Web API from the client

_從客戶端發送到Web API的聯系人對象(T)

  1. 逐步執行調試器中的方法,直到創建了response變量。在調試器的Locals窗口中檢查后,您將看到所有屬性都已設置。

Image 26: The response following creation in the debugger

_在調試器中創建后的響應_11。如果按F5或在調試器中單擊繼續,請求將完成。切換回瀏覽器后,新聯系人已添加到ContactRepository實現存儲的聯系人列表中。

Image 27: The browser reflects successful creation of the new contact instance

瀏覽器反映新聯系人實例的成功創建

此外,您可以按照附錄C將此應用程序部署到Azure(微軟云平臺):發布ASP。NET MVC 4應用程序使用Web部署。


這個實驗室向你介紹了新的ASP。NET Web API框架,以及使用該框架實現RESTful Web APIs。從這里,您可以創建一個新的存儲庫,使用任何數量的機制和連接來促進數據持久性,而不是本實驗室中提供的簡單的服務。Web API支持許多附加功能,例如允許使用支持HTTP、JSON或XML的任何語言編寫的非HTML客戶端進行通信。也可以在典型的Web應用程序之外托管Web API,還可以創建自己的序列化格式。

有了代碼片段,您就可以輕松獲取所需的所有代碼。實驗室文檔將告訴您何時可以使用它們,如下圖所示。

Image 28: Using Visual Studio code snippets to insert code into your project

使用Visual Studio code片段將代碼插入到項目中(U)

  1. 將光標放在要插入代碼的位置。

  2. 開始鍵入代碼段名稱(不含空格或連字符)。

  3. 觀察IntelliSense顯示匹配的代碼段名稱。

  4. 選擇正確的代碼段(或繼續鍵入,直到選擇了整個代碼段的名稱)。

  5. 按Tab鍵兩次將代碼段插入光標位置。

    Image 29: Start typing the snippet name

開始鍵入代碼段名稱

Image 30: Press Tab to select the highlighted snippet

按Tab鍵選擇突出顯示的代碼段

Image 31: Press Tab again and the snippet will expand

再次按Tab鍵,代碼段將展開

1.右鍵單擊要插入代碼段的位置。

  1. 選擇插入代碼段,然后選擇我的代碼段。

  2. 點擊列表中的相關片段。

    Image 32: Right-click where you want to insert the code snippet and select Insert Snippet

右鍵單擊要插入代碼段的位置,然后選擇插入代碼段

Image 33: Pick the relevant snippet from the list, by clicking on it

點擊列表中的相關片段

  1. Go /is/extensions/introduction到-iis-express/is–express-overview?鏈接ID=9810169?;蛘?,如果您已經安裝了Web平臺安裝程序,則可以打開它并搜索產品“Visual Studio Express 2012 for Web with Azure(微軟云平臺)SDK”。

  2. 單擊立即安裝。如果您沒有Web平臺安裝程序,您將被重定向到先下載并安裝它。

  3. 打開Web平臺安裝程序后,單擊安裝開始安裝。

    Image 34: Install Visual Studio Express

安裝Visual Studio學習版

  1. 閱讀所有產品的許可證和條款,然后單擊我接受繼續。

    Image 35: Accepting the license terms

接受許可條款

  1. 等待下載和安裝過程完成。

    Image 36: Installation progress

安裝進度

  1. 安裝完成后,單擊完成

    Image 37: Installation completed

安裝完成

  1. 單擊退出關閉Web平臺安裝程序。

  2. 若要打開Visual Studio Express for Web,請go開始屏幕并開始寫入“VS Express”,然后單擊VS Express for Web磁貼。

    Image 38: VS Express for Web tile

VS Express用于Web互動程序

本附錄將向您展示如何利用Azure(微軟云平臺)提供的web Deploy發布特征(feature),從Azure(微軟云平臺)門戶網站創建新網站,并發布您通過跟蹤實驗室獲得的應用程序。

  1. Go Azure(微軟云平臺)管理門戶,使用與訂閱關聯的Microsoft憑據登錄。

使用Azure(微軟云平臺),您可以托管10個ASP。NET網站免費,然后隨著流量的增長而擴展。你可以在這里注冊。

Image 39: Log on to Windows Azure portal

登錄門戶

  1. 單擊命令欄上的新建。

    Image 40: Creating a new Web Site

創建新網站

  1. 點擊計算|網站。然后選擇快速創建選項。為新網站提供一個可用的URL,然后單擊創建網站。

Azure(微軟云平臺)是運行在云中的web應用程序的主機,您可以控制和管理該應用程序??焖賱摻ㄟx項允許您從門戶外部將已完成的web應用程序部署到Azure(微軟云平臺)。它不包括設置數據庫的步驟。

Image 41: Creating a new Web Site using Quick Create

使用快速創建創建新網站

  1. 等待新的網站創建。

  2. 創建網站后,單擊URL列下的鏈接。檢查新網站是否正常工作。

    Image 42: Browsing to the new web site

瀏覽新網站

Image 43: Web site running

網站正在運行

  1. Go返回門戶,單擊名稱欄下的網站名稱以顯示管理頁面。

    Image 44: Opening the web site management pages

打開網站管理頁面

  1. 儀表板頁面的快速瀏覽部分,單擊下載發布配置文件鏈接。

_publish profile_包含為每個啟用的發布方法將web應用程序發布到Azure(微軟云平臺)所需的所有信息。發布配置文件包含連接到啟用發布方法的每個端點并對其進行身份驗證所需的URL、用戶憑據和數據庫字符串。Microsoft WebMatrix 2、Microsoft Visual Studio Express for WebMicrosoft Visual Studio 2012支持讀取發布配置文件,以自動配置這些程序,以便將Web應用程序發布到Azure(微軟云平臺)。

Image 45: Downloading the web site publish profile

下載網站發布配置文件

  1. 將發布配置文件下載到已知位置。在本練習中,您將進一步了解如何使用此文件將web應用程序從Visual Studio發布到Azure(微軟云平臺)。

    Image 46: Saving the publish profile file

保存發布配置文件

如果您的應用程序使用SQL Server數據庫,則需要創建一個SQL數據庫服務器。如果要部署不使用SQL Server的簡單應用程序,可以跳過此任務。

  1. 您需要一個SQL數據庫服務器來存儲應用程序數據庫。您可以在Azure(微軟云平臺)管理門戶的SQL數據庫|服務器|Server的儀表板中查看訂閱中的SQL數據庫服務器。如果您沒有創建服務器,可以使用命令欄上的添加按鈕創建一個。記下服務器名稱和URL、管理員登錄名和密碼,因為您將在接下來的任務中使用它們。不要創建數據庫,因為它將在稍后階段創建。

    Image 47: SQL Database Server Dashboard

SQL數據庫服務器儀表板

  1. 在下一個任務中,您將測試來自Visual Studio的數據庫連接,因此您需要將本地IP地址包含在服務器的允許的IP地址列表中。為此,單擊配置,從當前客戶端IP地址中選擇IP地址,并將其粘貼到起始IP地址結束IP地址文本框中,然后單擊!圖48:添加客戶端ip地址確定按鈕。

    Image 49: Adding Client IP Address

添加客戶端IP地址

  1. 客戶端IP地址添加到允許的IP地址列表后,單擊保存以確認更改。

    Image 50: Confirm Changes

確認更改

1.Go返回ASP。NET MVC 4解決方案。在解決方案資源管理器中,右鍵單擊網站項目并選擇發布。

Image 51: Publishing the Application

發布網站

  1. 導入您在第一個任務中保存的發布配置文件。

    Image 52: Importing the publish profile

導入發布配置文件

  1. 單擊驗證連接。驗證完成后,單擊下一步

一旦您看到“驗證連接”按鈕旁邊出現綠色復選標記,驗證即完成。

Image 53: Validating connection

驗證連接

  1. 設置頁面的數據庫部分下,單擊數據庫連接文本框旁邊的按鈕(即DefaultConnection)。

    Image 54: Web deploy configuration

Web部署配置

  1. 按如下方式配置數據庫連接:

*在服務器名稱中,使用_tcp:_前綴鍵入SQL數據庫服務器URL。

*在用戶名中鍵入您的服務器管理員登錄名。

*在密碼中鍵入您的服務器管理員登錄密碼。

*鍵入新的數據庫名稱,例如:MVC4SampleDB。

Image 55: Configuring destination connection string

配置目標連接字符串

  1. 然后單擊確定。當系統提示創建數據庫時,單擊。

    Image 56: Creating the database

創建數據庫

  1. 將用于連接到Windows Azure(微軟云平臺)中的SQL數據庫的連接字符串顯示在“默認連接”文本框中。然后單擊下一步。

    Image 57: Connection string pointing to SQL Database

指向SQL數據庫的連接字符串

  1. 預覽頁面中,單擊發布。

    Image 58: Publishing the web application

發布web應用程序

  1. 發布過程完成后,默認瀏覽器將打開已發布的網站。

    Image 59: Application published to Windows Azure

應用程序已發布到Azure

原文鏈接: https://learn.microsoft.com/en-us/aspnet/web-api/overview/older-versions/build-restful-apis-with-aspnet-web-api

上一篇:

RepairShopr API:重大api更新??!

下一篇:

API開發全面指南:構建現代化API
#你可能也喜歡這些API文章!

我們有何不同?

API服務商零注冊

多API并行試用

數據驅動選型,提升決策效率

查看全部API→
??

熱門場景實測,選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費