引言
前邊兩篇博客介紹了Web API的基本框架以及路由配置，這篇博客主要解決在前后端分離專案中，為前端人員提供詳細介面說明的問題，主要是通過修改WebApi HelpPage相關代碼和添加WebApiTestClient組件實作WebAPI介面詳細說明以及介面測驗，
WepAPI系列博客
ASP.NET Web API 2系列(一)：初識Web API及手動搭建基本框架
ASP.NET Web API 2系列(二)：靈活多樣的路由配置
WebApi HelpPage幫助頁
通過VS2017創建Web API應用程式（注意不是空的API應用程式），系統會自動添加HelpPage，這里通過修改代碼和設定路徑，可以實時查看WebAPI的介面說明，
創建Web API應用程式
新建WebAPITest解決方案，并添加WebAPITest.Web(Web API應用程式)和WebAPI.Entities(類別庫)，創建程序可以到系列博客查看，創建完成，解決方案資源管理器如下圖所示：
在Entities中添加Student類，并在Controllers中添加StudentController(Web API控制器類(V2.1))，修改相應代碼（具體參照ASP.NET Web API 2系列(二)：靈活多樣的路由配置），洗掉原有的ValueController，上述操作完成后如下圖所示：
運行程式，點擊頁面中API選單（http://localhost:56783/Help），可以看到API介面，如下圖所示：
點擊上邊串列中的介面，可以查看呼叫說明，如下圖所示：
這時發現所有的說明資訊都為空（Description），接下來添加描述資訊，
HelpPage顯示description
Student.cs中的相應欄位和StudentController.cs中的介面添加描述資訊，如下圖所示：
分別勾選WebAPITest.Entities和WebAPITest.Web專案【屬性-生成-輸出-XML檔案檔案】，如下圖所示：
修改Areas/HelpPage/App_Start/HelpPageConfig.cs
修改 public static void Register(HttpConfiguration config)：
config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/bin")));
輸出目錄都設定到Web的bin下，具體截圖如下：
修改Areas/HelpPage/XmlDocumentationProvider.cs
添加私有變數：
private List<XPathNavigator> _documentNavigators;修改建構式 public XmlDocumentationProvider(string documentPath)（其中的files種的XML名字必須和生成的對應）：
public XmlDocumentationProvider(string documentPath) { if (documentPath == null) { throw new ArgumentNullException("documentPath"); } //XPathDocument xpath = new XPathDocument(documentPath); //_documentNavigator = xpath.CreateNavigator(); _documentNavigators = new List<XPathNavigator>(); var files = new[] { "WebAPITest.Web.xml", "WebAPITest.Entities.xml" }; foreach (var file in files) { var path = Path.Combine(documentPath, file); if (File.Exists(path)) { XPathDocument xpath = new XPathDocument(path); _documentNavigators.Add(xpath.CreateNavigator()); } } }
添加私有方法：
private XPathNavigator SelectSingleNode(string selectExpression) { foreach (var navigator in _documentNavigators) { var propertyNode = navigator.SelectSingleNode(selectExpression); if (propertyNode != null) return propertyNode; } return null; }
用SelectSingleNode(selectExpression)替換_documentNavigator.SelectSingleNode(selectExpression)的呼叫，在文中大概有四處，
此時完成添加描述的全部操作，運行程式，效果如下圖所示：
WebApiTestClient介面測驗
WebApiTestClient介紹
WebApiTestClient組件作用主要有以下幾個：
（1）將WebApi的介面放到了瀏覽器里面，以可視化的方式展現出來，比如我們通過http://localhost:11095/Help這個地址就能在瀏覽器里面看到這個服務里面所有的API介面以及介面的詳細說明，
（2）能夠詳細查看API的類說明、方法說明、引數說明、回傳值說明，只需要我們在定義方法時候加上 /// 這種詳細注釋即可，組件自動讀取注釋里面的內容展現在界面上面，
（3）可以修改http請求頭檔案Head和請求體Body里面的引數，指定發送http請求的特性，比如指定我們最常見的contentType指示引數的型別，
（4）組件擁有測驗介面的功能，用過Soup UI的朋友應該知道，通過Soup UI能夠方便測驗WebService引數以及回傳值，我們的WebApiTestClient也可以實作類似的功能，直接通過頁面上的測驗按鈕，就能測驗介面，
安裝 WebApiTestClient組件
通過NuGet引入組件，如下圖所示：
安裝成功后，專案會自動添加一些主要檔案：
Scripts\WebApiTestClient.js
Areas\HelpPage\TestClient.css
Areas\HelpPage\Views\Help\DisplayTemplates\TestClientDialogs.cshtml
Areas\HelpPage\Views\Help\DisplayTemplates\TestClientReferences.cshtml
組件使用
修改Areas/HelpPage/Views/Help/Api.cshtml，添加以下內容:
@Html.DisplayForModel("TestClientDialogs")@section Scripts{ <link href="~/Areas/HelpPage/HelpPage.css" rel="stylesheet" /> @Html.DisplayForModel("TestClientReferences")}
添加位置如下圖所示：
添加完成后，運行程式，呼叫api/Student/{id}，此時發現在頁面右下角出現一個【Test API】按鈕，如下圖所示：
單擊【Test API】按鈕，可以直接測驗次API介面，具體呼叫后邊再講，此時發現測驗頁面在當前頁面的最下端，不太美觀，如下圖所示：
研究發現，出現該問題的原因是由于新建的專案自帶的JQuery和Boostrap的版本過高引起，通過NuGet將JQuery修改為1.12.4，Boostrap修改為3.3.7，在此運行程式，測驗頁面出現頁面中間，如下所示：
輸出呼叫引數001，點擊【Send】按鈕，測驗api/Student/{id}，呼叫結果如下圖所示：
其他介面都可以通過此方法呼叫測驗，非常的直觀、便捷，
總結
至此，完成了關于WebAPI介面查看及測驗調動的全部程序，上述操作的環境VS2017和.Net Framework4.6，相關程式代碼感興趣的童鞋也可以直接下載(頁面右上角的GitHub)，博文寫作不易希望多多支持，后續會更新更多內容，感興趣的朋友可以加關注，歡迎留言交流！
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/12347.html
標籤：ASP.NET