① 如何使 WebAPI 自動生成漂亮又實用在線API文檔
1、如何引入組件
首先，我們需要定義一個API項目
然後通過Nuget引入組件。記住選下圖中的第三個。
引入成功後，將向項目裡面添加一些主要文件：
•Scripts\WebApiTestClient.js
•Areas\HelpPage\TestClient.css
•Areas\HelpPage\Views\Help\DisplayTemplates\TestClientDialogs.cshtml
•Areas\HelpPage\Views\Help\DisplayTemplates\TestClientReferences.cshtml
2、如何使用組件
1、修改Api.cshtml文件
通過上述步驟，就能將組件WebAPITestClient引入進來。下面我們只需要做一件事：打開文件 (根據 Areas\HelpPage\Views\Help) Api.cshtml 並添加以下內容:
•@Html.DisplayForModel("TestClientDialogs")
•@Html.DisplayForModel("TestClientReferences")
② 請問html的js調用webapi介面
引用jquery，有很方便的GET調用方法：
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1">
<!--src值為文件位置路徑-->
<scripttype="text/javascript"charset="UTF-8"src="javascript/jquery-1.12.1.js"></script>
<title>測試案例</title>
<!--語法：jQuery.getJSON(url,data,success(data,status,xhr))-->
<scripttype="text/javascript"charset="UTF-8">
functiongetToken(){
$.getJSON("http://localhost/kdapi/api/access_token",{"id":111,"secret":2352532},function(result){
alert(result.access_token);
});
}
</script>
</head>
<body>
<buttononclick="getToken()"style="width:120px;height:60px;">獲取Token</button>
</body>
</html>
③ WebAPI與傳統的WebService有哪些不同
WebService是利用HTTP管道實現了RPC的一種規范形式，放棄了對HTTP原生特徵與語義的完備支持；而WebAPI是要保留HTTP原生特徵與語義的同時實現RPC，但WebAPI的實現風格可以是千姿百態，RESTful只是實現了其中一種風格，你也可以定義一種風格，並實現
WebAPI相比WebService更為輕量級、靈活、優化好的情況下，性能更有優勢，但是對復雜或大型業務的描述與使用增加了無形的成本
WebAPI可以更好的利用HTTP與生俱來的特徵，如：緩存、代理、安全、頭信息擴展，反之，部分實現方式WebService無法利用HTTP特徵
本質上WebAPI與傳統模式的WebService都是實現RPC，遠程服務；傳統的WebService只是利用了HTTP通道，進行獨立的交互，但是這個交互協議可以移植到其他協議下運作，而WebAPI天生與HTTP依賴無法移植
WebService與WebAPI在80埠下工作，都可以繞開默認的網路防火牆限制，因為默認下網路防火牆對系統級埠與協議下的內容是開放的
WebService與RESTfulWebAPI服務端都可以使用反射來實現自動化部署，只是前者更為容易，因為存在標準的規范，後者只是開發WebAPI的推薦風格，實現上需要自己來規范與描述，處理不兼容問題；WebAPI在無反射下的業務實現更為直觀接近MVC模式下的開發的應用，通用，性能更好、更為靈活，能夠直接利用HTTP的動態網頁技術開發介面與功能
WebAPI對於交互數據的格式沒有明確規定，使得其可以更好的使用在特定的軟體運行平台，但是需要開發者對各種格式的支持；傳統的WebService則要求使用服務的平台對數據格式強制適應，服務端的交互數據處理變得更加快捷容易，而增加了不同使用端的對服務交互困難度
④ WebAPIs基本操作
1、作用: 製作網頁特效和用戶交互
2、組成：
1）DOM：操作頁面元素；（document頂級對象）
2）BOM：操作瀏覽器。
1）優點：靈活， 所有CSS選擇器都可以使用；
2）獲取單個元素：document.querySelector('選擇器')，選擇器不存在的話，獲取結果為null，結果可以直接使用；
3）獲取多個同一類元素：document.querySelectorAll('選擇器')，拿到的結果: NodeList偽數組，通過遍歷數組獲取對應元素。
PS：偽數組：存在著length屬性，可以通過數組下標的方式進行每個元素的訪問，但是不能夠使用push等數組的方法。
1）getElementById('id值')： 獲取單個元素；
2）getElementsByTagName('標簽名')：獲取多個同一類元素；（偽數組）
3）getElementsByClassName('類名'): 獲取多個同一類元素。（偽數組）
1）a的href，img的src、alt、title等；
2）屬性: 可以訪問, 也可以修改
3）語法: 元素.屬性名 = 屬性值
1）innerText：針對文本: 不識別標簽；
2）innerHTML：針對所有: 包括標簽；（常用，innerHTML可實現innerText功能）
1）行內樣式：
適用於: 單行樣式修改；
語法：元素.style.樣式名 = 樣式值；
操作的只能是行內的樣式；
操作的結果要帶單位；
一定是小駝峰, 沒有中劃線；
2）類名操作：
語法：元素.classList；
元素.classList.add('類名') : 追加類；
元素.classList.remove('類名') : 移除類；
元素.classList.toggle('類名') : 切換類。
1）type: input標簽的password和text；
2）value: 所有表單屬性；
獲取值: 元素.value；
修改值: 元素.value = 新值；
3）checked: 選中；
true: 選中；
false: 不選中；
4）disabled: 禁用；
true: 禁用；
false: 不禁用。
⑤ webApi如何將一個頁面
第一步：新建項目後，找到Global.asax文件----找到GlobalConfiguration.Configure(WebApiConfig.Register)方法------按F12進入 WebApiConfig.Register方法中----添加內容紅框框
知識點：路由器注冊順序是由上往下的，會先從上面進行匹配。
路由器的名稱不能重名，否則報錯【CustomApi/DefaultApi】
第二步：設置webapi項目為啟動項，然後啟動，在網頁路徑上加api/values(控制器名稱不要Controller)
知識點：因為ValuesController是項目自帶的，那麼這一次的請求與 DefaultApi的路由規格是一致的。
⑥ WebService和Webapi的區別
Web Service特徵
1、它是基於SOAP協議的，數據格式是XML
2、只支持HTTP協議
3、它不是開源的，但可以被任意一個了解XML的人使用
4、它只能部署在IIS上
Web API特徵（紅色標記與WebService區別）
1、這是一個簡單的構建HTTP服務的新框架
2、在.net平台上Web API 是一個開源的、理想的、構建REST-ful 服務的技術
3、不像WCF REST Service.它可以使用HTTP的全部特點（比如URIs、request/response頭，緩存，版本控制，多種內容格式）
4、它也支持MVC的特徵，像路由、控制器、action、filter、模型綁定、控制反轉（IOC）或依賴注入（DI），單元測試。這些可以使程序更簡單、更健壯
5、它可以部署在應用程序和IIS上
6、這是一個輕量級的框架，並且對限制帶寬的設備，比如智能手機等支持的很好
7、Response可以被Web API的MediaTypeFormatter轉換成Json、XML 或者任何你想轉換的格式。
8、Web API非常適合構建移動客戶端服務
以下情況可以考慮用Web API
1、 需要Web Service但是不需要SOAP
2、 需要在已有的WCF服務基礎上建立non-soap-based http服務
3、 只想發布一些簡單的Http服務，不想使用相對復雜的WCF配置
4、 發布的服務可能會被帶寬受限的設備訪問
5、希望使用開源框架，關鍵時候可以自己調試或者自定義一下框架
6、如果服務需要在http協議上，並且希望利用http協議的各種功能
7、如果服務需要被各種客戶端(特別是移動客戶端)調用
小結（僅供參考）
總體來說，兩者都是服務，只是表現形式存在一些差異
webapi多用於基於http請求的服務應用,比如說移動服務端或者需要提供第三方API 服務的場景下
webservice也可以應用於webapi所在的場景，但是如果是我的選擇，我一般是做為內部服務的使用，好比如果一個系統我會用wcf/webservice作為內部子系統間的服務通信，而webapi用於外部服務的請求~
⑦ 如何使 WebAPI 自動生成漂亮又實用在線API文檔
1.1 SwaggerUI
SwaggerUI 是一個簡單的Restful API 測試和文檔工具。簡單、漂亮、易用（官方demo）。通過讀取JSON 配置顯示API. 項目本身僅僅也只依賴一些 html,css.js靜態文件. 你可以幾乎放在任何Web容器上使用。
1.2 Swashbuckle
Swashbuckle 是.NET類庫,可以將WebAPI所有開放的控制器方法生成對應SwaggerUI的JSON配置。再通過SwaggerUI 顯示出來。類庫中已經包含SwaggerUI 。所以不需要額外安裝。
2.快速開始
創建項目 OnlineAPI來封裝網路音樂服務(示例下載) ，通過API可以搜索、獲取音樂的信息和播放連接。
我盡量刪除一些我們demo中不會用到的一些文件，使其看上去比較簡潔。
WebAPI 安裝 Swashbuckle
Install-Package Swashbuckle
代碼注釋生成文檔說明。
Swashbuckle 是通過生成的XML文件來讀取注釋的，生成 SwaggerUI，JSON 配置中的說明的。
安裝時會在項目目錄 App_Start 文件夾下生成一個 SwaggerConfig.cs 配置文件，用於配置 SwaggerUI 相關展示行為的。如圖：
將配置文件大概99行注釋去掉並修改為
c.IncludeXmlComments(GetXmlCommentsPath(thisAssembly.GetName().Name));
並在當前類中添加一個方法
/// <summary>
/// </summary>
/// <param name="name"></param>
/// <returns></returns>
protected static string GetXmlCommentsPath(string name)
{
return string.Format(@"{0}\bin\{1}.XML", AppDomain.CurrentDomain.BaseDirectory, name);
}
緊接著你在此Web項目屬性生成選卡中勾選 「XML 文檔文件」，編譯過程中生成類庫的注釋文件
添加網路音樂 3個API
訪問 http://<youhost>/swagger/ui/index,最終顯示效果
我們通過API 測試API 是否成功運行
3.添加自定義HTTP Header
在開發移動端 API時常常需要驗證許可權，驗證參數放在Http請求頭中是再好不過了。WebAPI配合過濾器驗證許可權即可
首先我們需要創建一個 IOperationFilter 介面的類。IOperationFilter
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Http.Description;
using System.Web.Http.Filters;
using Swashbuckle.Swagger;
namespace OnlineAPI.Utility
{
public class HttpHeaderFilter : IOperationFilter
{
public void Apply(Operation operation, SchemaRegistry
schemaRegistry, ApiDescription apiDescription)
{
if (operation.parameters == null) operation.parameters = new
List<Parameter>();
var filterPipeline =
apiDescription.ActionDescriptor.GetFilterPipeline();
//判斷是否添加許可權過濾器
var isAuthorized = filterPipeline.Select(filterInfo =>
filterInfo.Instance).Any(filter => filter is IAuthorizationFilter);
//判斷是否允許匿名方法
var allowAnonymous =
apiDescription.ActionDescriptor.GetCustomAttributes<AllowAnonymousAttribute>().Any();
if (isAuthorized && !allowAnonymous)
{
operation.parameters.Add(new Parameter
{
name = "access-key",
@in = "header",
description = "用戶訪問Key",
required = false,
type = "string"
});
}
}
}
}
在 SwaggerConfig.cs 的 EnableSwagger 配置匿名方法類添加一行注冊代碼
c.OperationFilter<HttpHeaderFilter>();
添加Web許可權過濾器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Web;
using System.Web.Http;
using System.Web.Http.Controllers;
using Newtonsoft.Json;
namespace OnlineAPI.Utility
{
/// <summary>
///
/// </summary>
public class AccessKeyAttribute : AuthorizeAttribute
{
/// <summary>
/// 許可權驗證
/// </summary>
/// <param name="actionContext"></param>
/// <returns></returns>
protected override bool IsAuthorized(HttpActionContext actionContext)
{
var request = actionContext.Request;
if (request.Headers.Contains("access-key"))
{
var accessKey = request.Headers.GetValues("access-key").SingleOrDefault();
//TODO 驗證Key
return accessKey == "123456789";
}
return false;
}
/// <summary>
/// 處理未授權的請求
/// </summary>
/// <param name="actionContext"></param>
protected override void HandleUnauthorizedRequest(HttpActionContext actionContext)
{
var content = JsonConvert.SerializeObject(new {State = HttpStatusCode.Unauthorized});
actionContext.Response = new HttpResponseMessage
{
Content = new StringContent(content, Encoding.UTF8, "application/json"),
StatusCode = HttpStatusCode.Unauthorized
};
}
}
}
在你想要的ApiController 或者是 Action 添加過濾器
[AccessKey]
最終顯示效果
4.顯示上傳文件參數
SwaggerUI 有上傳文件的功能和添加自定義HTTP Header 做法類似，只是我們通過特殊的設置來標示API具有上傳文件的功能
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http.Description;
using Swashbuckle.Swagger;
namespace OnlineAPI.Utility
{
/// <summary>
///
/// </summary>
public class UploadFilter : IOperationFilter
{
/// <summary>
/// 文件上傳
/// </summary>
/// <param name="operation"></param>
/// <param name="schemaRegistry"></param>
/// <param name="apiDescription"></param>
public void Apply(Operation operation, SchemaRegistry schemaRegistry, ApiDescription apiDescription)
{
if (!string.IsNullOrWhiteSpace(operation.summary) && operation.summary.Contains("upload"))
{
operation.consumes.Add("application/form-data");
operation.parameters.Add(new Parameter
{
name = "file",
@in = "formData",
required = true,
type = "file"
});
}
}
}
}
在 SwaggerConfig.cs 的 EnableSwagger 配置匿名方法類添加一行注冊代碼
c.OperationFilter<UploadFilter>();
API 文檔展示效果
⑧ 怎樣操作WebAPI介面
先定義一個簡單的webapi，簡單到差不多直接用vs2010自動生成的webapi代碼。
其中的TestModle是一個簡單的class，如下
public class TestModle
{
public string a { get; set; }
public string b { get; set; }
public string c { get; set; }
}
前端頁面放四個代表get，post，put，delete的按鈕，在加一個div顯示返回值
前端代碼中載入jquery，在定義四個按鈕的click事件
get和post，我習慣用$.get和$.post，當然也能用$.ajax.
get直接返回webapi get的return值，post的話我就不在後端做處理了直接返回傳入的值，這里只做示範
put和delete，只能用$.ajax來處理。
put的話一般用於update某個id的數據信息
delete用於刪除某個id的數據，如下圖所示
點擊每個按鈕，可以在頁面上看到相應的效果
本回答由提問者推薦
評論
1 1
xzozxzb | 汽車顧問向TA咨詢
擅長： 汽車
其他回答
先定義一個簡單的webapi，簡單到差不多直接用vs2010自動生成的webapi代碼。
其中的TestModle是一個簡單的class，如下
public class TestModle
{
public string a { get; set; }
public string b { get; set; }
public string c { get; set; }
}
前端頁面放四個代表get，post，put，delete的按鈕，在加一個div顯示返回值
前端代碼中載入jquery，在定義四個按鈕的click事件
get和post，我習慣用$.get和$.post，當然也能用$.ajax.
get直接返回webapi get的return值，post的話我就不在後端做處理了直接返回傳入的值，這里只做示範
put和delete，只能用$.ajax來處理。
put的話一般用於update某個id的數據信息
delete用於刪除某個id的數據，如下圖所示
點擊每個按鈕，可以在頁面上看到相應的效果