如何在 javascript 中使用 RoutePrefix 获取 Web API 方法的有效 url答案

【问题标题】：How to get valid url for Web API method with RoutePrefix in the javascript如何在 javascript 中使用 RoutePrefix 获取 Web API 方法的有效 url
【发布时间】：2015-12-10 17:04:18
【问题描述】：

WebApiConfig

'...
config.Routes.MapHttpRoute(
      name:="DefaultApi",
      routeTemplate:="api/{controller}/{id}",
      defaults:=New With {.id = RouteParameter.Optional}
)
'...

全球.asax

Protected Sub Application_Start(sender As Object, e As EventArgs)
    AreaRegistration.RegisterAllAreas()
    GlobalConfiguration.Configure(AddressOf WebApiConfig.Register)
    RouteConfig.RegisterRoutes(RouteTable.Routes)
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
    BundleConfig.RegisterBundles(BundleTable.Bundles)
End Sub

Web API 控制器

<Authorize()>
<RoutePrefix("api/customer")>
Public Class CustomerController
   Inherits ApiController

    <Route("saveName")>
    <HttpPost>
    Public Function saveName(value As MyTypeOfValues) As IHttpActionResult
        'Do some staff
    End Function

End Class

请求方法：

  var actionurl = "api/customer/saveName";
  $.ajax(actionurl,
  {
     dataType: "JSON",
     data: customerdata,
     type: "POST",
     contentType: "application/json; charset=utf-8",
     error: function() { alert('error');}
  }).done(function (result) { alert(result);});

带有网址 = api/customer/saveName 请求已发送至http://localhost/MySiteName/Customer/ShowCustomer/api/customer/saveName
并得到错误 404

带有网址 = /api/customer/saveName 请求已发送至http://localhost/api/customer/saveName
并得到错误 404

带有网址 = http://localhost/MySiteName/api/customer/saveName 我手动创建并由 Fiddler 发送 - 工作正常。

在相关问题的不同答案中，建议的网址在我的情况下不起作用

问题：如何在 javascript/typescript 中为 Web API 请求生成有效的 url？

【问题讨论】：

标签： javascript asp.net-web-api typescript

【解决方案1】：

因为你想要http://localhost/MySiteName/api/customer/saveName，所以你需要在主机名之后的任何东西......从尾部斜杠开始：

url = /MySiteName/api/customer/saveName

注意：我强烈建议您查看生成打字稿代码来调用这些代码，而不是在服务器上手动键入这些代码并在客户端上复制 .只是一个你真正可以不用的故障点。

【讨论】：

问题是 MySiteName 是我的开发站点名称。它将在生产现场发生变化。
那你可以尝试从window.location解析出来（拆分/取1）

【解决方案2】：

我在 Razor 视图 (MyView.vbhtml) 中使用 .NET 代码找到了解决方案

var baseUrl: string = "@Url.Content("~/")";

这个变量传递给视图模型（打字稿）的构造函数
并且可以使用该值生成 Web API url

var actionUrl: string = this._baseurl + "api/customer/saveName";

【讨论】：

【解决方案3】：

您应该使用Url.Content("~/") 在主页中准确存储baseUrl，例如_LayoutMain。

<script type="text/javascript">
    function resolveClientUrl(relativeUrl) {
        return '@Url.Content("~/")' + relativeUrl;
    }
</script>

之后，您可以像下面这样解析relativeUrl：

var url = resolveClientUrl("api/customer/saveName");

【讨论】：