使用Web API 2和AngularJS检索数据的最佳方法是什么

时间:2016-03-31 09:09:10

标签: angularjs asp.net-web-api

我正在学习如何使用带有角度的Web API,但我在检索数据时遇到了一些问题,如果有人可以帮助我,我将不胜感激。

我有一个名为GetUserController的控制器,其中包含以下方法。

 public class GetUserController : ApiController
    {
        [HttpGet]
        public string GetUserName()
        {
            var user = "John Doe"
            return user;
        }


        [HttpGet]
        public string GetUserName2()
        {
            string user = "Jane Doe";
            return user;
        }

    }

//Angular side of things 
     function getUser() {
            return $http.get('/api/GetUser').then(function (data) {
                return data;

            });
        }

上面的代码工作正常,并从控制器返回第一个用户。但是当我尝试使用下面的角度代码来获得第二个时:

 function getUser() {
        return $http.get('/api/GetUser/GetUserName2').then(function (data) {
            return data;

        });
    }

由于某些原因,它无法找到GetUserName2方法。我错过了什么吗?请帮帮忙?

编辑:我得到的错误是:找到了与请求匹配的多个操作

2 个答案:

答案 0 :(得分:2)

正如@shammelburg指出的那样,这是因为Web.API无法将您的请求与控制器/方法相匹配。

并不是说它不是RESTful,与你正在使用的动词无关......只是找不到合适的路线图。

根据接受的答案,您可以添加另一个通用路由映射以启用您正在尝试的访问方法,但是使用属性路由存在更具体的选项: -

public class GetUserController : ApiController
{
    [Route("api/getuser")]
    [HttpGet]
    public string GetUserName()
    {
        var user = "John Doe"
        return user;
    }

    [Route("api/getuser/getusername2")]
    [HttpGet]
    public string GetUserName2()
    {
        string user = "Jane Doe";
        return user;
    }
}

要启用属性路由,请将其添加到WebApiConfig类: -

config.MapHttpAttributeRoutes();

此方法允许您在单个方法级别设置控制器/方法的URL的特定自定义映射,而无需在以后制作可能与应用程序中的其他内容冲突的全局路由映射。

您可以找到有关属性路由here

的更多信息

虽然上述内容将解决您遇到的具体问题,但实际上会有一种不同的方式来实现您提供的示例: -

public class GetUserController : ApiController
{
    [Route("api/user/{id}")]
    [HttpGet]
    public string GetUserName(int id)
    {
        // this would be replaced with some sort of data lookup...
        var user = "unknown";

        if (id == 1) {
            user = "John Doe";
        } else if (id == 2) {
            user = "Jane Doe";
        } // and so on...

        return user;
    }
}

在上面,网址为api/user/x,其中x是数字,例如api/user/1将匹配GetUserName的{​​{1}}方法,并将该数字作为参数传递给方法。

这可以在Angular中使用类似的方式访问: -

GetUserController

答案 1 :(得分:1)

这是因为它不是真正的RESTful调用,它使用HTTP动词,GET,POST,PUT,DELETE。

让代码工作的方法是更改​​WebApiConfig.cs文件。

自:

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

要:

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

正如您所看到的,我们已将{action}添加到routeTemplate,这使其非常像MVC控制器。

这允许您调用您的API方法(GetUserName& GetUserName2)名称,就像您在角度$ http函数中尝试一样。

示例:

return $http.get('/api/GetUser/GetUserName')
return $http.get('/api/GetUser/GetUserName2')