如何从angular2中的组件http.post方法调用web api2控制器方法

【问题标题】：how to call to web api2 controller method from component http.post method in angular2如何从angular2中的组件http.post方法调用web api2控制器方法
【发布时间】：2017-10-10 09:49:59
【问题描述】：

组件.ts

TableHeader(Id: any) {       
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });
  let body = JSON.stringify(Id);
  var sub = this.http.post('api/Customers/GetColumnNames/', body, options)
    .map((res: Response) => res.json());
}

WebApiController

[AcceptVerbs("Post")]
[ActionName("GetColumnNames")]
public DataSet GetColumnNames(String id) {
  DataSet ds = new DataSet();
  if (Convert.ToInt32(id) > 0) {
    //AccountingMethods objAcc = new AccountingMethods();
    //return ds = objAcc.GetColumnsNames("GetColumns", id);
  }
  return new DataSet();
}

当调用 webapi 控制器动作名称时。我没有被击中

【问题讨论】：

你能不能把id ad查询字符串传过来试试看。
显示配置路由的 WebApiConfig

标签： asp.net angular asp.net-web-api

【解决方案1】：

我们需要一些额外的信息：

我假设你有以下 WebApiConfig

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Attribute routing.
        config.MapHttpAttributeRoutes();

        // Convention-based routing.
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

我也想试试

[Route("api/Customers/GetColumnNames")]
[HttpPost]

如果所有其他方法都失败，请尝试将调用更改为

var sub = this.http.post('api/Customers/GetColumnNames', body, options)
.map((res: Response) => res.json());

尾部斜杠不应该影响调用，但过去曾将其作为一个问题提到过，因此尝试一下可能很有价值。

从浏览器添加错误对您有很大帮助（在 chrome 中，工具和网络是 F12 以查看调用。

【讨论】：