刚找到一个项目叫:ProxyApi
ProxyApi 是一个自动为您的 ASP.NET MVC 和 WebApi 控制器创建 JavaScript 代理对象的库。
GitHub:https ://github.com/stevegreatrex/ProxyApi
博客:http: //blog.greatrexpectations.com/2012/11/06/proxyapi-automatic-javascript-proxies-for-webapi-and-mvc/
ProxyApi 为我的解决方案生成了无效的 JavaScript,其中包含一百多个单独的 WebAPI 操作。这可能是因为 ProxyApi 没有涵盖所有 WebApi 功能,例如自定义 ActionName 属性。此外,ProxyApi 库对我来说有点笨重。必须有一种更有效的方法来做到这一点......
所以我决定看一下 ASP.NET WebAPI 源代码,结果发现 WebAPI 内置了自描述功能。您可以在 ASP.NET 解决方案中的任何位置使用以下代码来访问 WebAPI 元数据:
var apiExplorer = GlobalConfiguration.Configuration.Services.GetApiExplorer();
根据 的输出apiExplorer.ApiDescriptions
,我推出了自己的元数据提供程序:
public class MetadataController : Controller
{
public virtual PartialViewResult WebApiDescription()
{
var apiExplorer = GlobalConfiguration.Configuration.Services.GetApiExplorer();
var apiMethods = apiExplorer.ApiDescriptions.Select(ad => new ApiMethodModel(ad)).ToList();
return PartialView(apiMethods);
}
public class ApiMethodModel
{
public string Method { get; set; }
public string Url { get; set; }
public string ControllerName { get; set; }
public string ActionName { get; set; }
public IEnumerable<ApiParameterModel> Parameters { get; set; }
public ApiMethodModel(ApiDescription apiDescription)
{
Method = apiDescription.HttpMethod.Method;
Url = apiDescription.RelativePath;
ControllerName = apiDescription.ActionDescriptor.ControllerDescriptor.ControllerName;
ActionName = apiDescription.ActionDescriptor.ActionName;
Parameters = apiDescription.ParameterDescriptions.Select(pd => new ApiParameterModel(pd));
}
}
public class ApiParameterModel
{
public string Name { get; set; }
public bool IsUriParameter { get; set; }
public ApiParameterModel(ApiParameterDescription apiParameterDescription)
{
Name = apiParameterDescription.Name;
IsUriParameter = apiParameterDescription.Source == ApiParameterSource.FromUri;
}
}
}
将此控制器与以下视图结合使用:
@model IEnumerable<Awesome.Controllers.MetadataController.ApiMethodModel>
<script type="text/javascript">
var awesome = awesome || {};
awesome.api = {
metadata: @Html.Raw(Json.Encode(Model))
};
$.each(awesome.api.metadata, function (i, action) {
if (!awesome.api[action.ControllerName]) {
awesome.api[action.ControllerName] = {};
}
awesome.api[action.ControllerName][action.ActionName] = function (parameters) {
var url = '/' + action.Url;
var data;
$.each(action.Parameters, function (j, parameter) {
if (parameters[parameter.Name] === undefined) {
console.log('Missing parameter: ' + parameter.Name + ' for API: ' + action.ControllerName + '/' + action.ActionName);
} else if (parameter.IsUriParameter) {
url = url.replace("{" + parameter.Name + "}", parameters[parameter.Name]);
} else if (data === undefined) {
data = parameters[parameter.Name];
} else {
console.log('Detected multiple body-parameters for API: ' + action.ControllerName + '/' + action.ActionName);
}
});
return $.ajax({
type: action.Method,
url: url,
data: data,
contentType: 'application/json'
});
};
});
</script>
控制器将使用ApiExplorer
生成有关所有可用 WebAPI 操作的元数据。该视图会将这些数据呈现为 JSON,然后执行一些 JavaScript 以将此数据转换为实际的可执行 JavaScript 函数。
要使用这个小魔法,请在您的 jQuery 引用之后在布局页面的头部插入以下行。
@Html.Action(MVC.Metadata.WebApiDescription())
从现在开始,您可以使您的 WebAPI 调用如下所示:
// GET: /Api/Notes?id={id}
awesome.api.Notes.Get({ id: id }).done(function () {
// .. do something cool
});
// POST: /Api/Notes
awesome.api.Notes.Post({ form: formData }).done(function () {
// .. do something cool
});
这个简单的代理会自动区分查询字符串参数和请求正文参数。缺少参数或多个主体参数将生成错误,以防止拼写错误或其他常见的 WebAPI 开发错误。