使用来自 Angularjs ngResource 的 json 对象查询 Web Api答案

【问题标题】：Query WebApi with json object from Angular ngResource使用来自 Angularjs ngResource 的 json 对象查询 Web Api
【发布时间】：2015-01-26 20:46:19
【问题描述】：

我有一个简单的 WebApi，我想连接到一个 angularjs 应用程序

api 看起来像这样

public HttpResponseMessage GetSokAvtal(SokAvtalAdvanced sokAvtalAdvanced)
{
    if (sokAvtalAdvanced != null && sokAvtalAdvanced.IsValid())
    {
        try
        {
            var avtal = db.spSokAvtalAdvanced(
                limit: sokAvtalAdvanced.Limit,
                offset: sokAvtalAdvanced.Offset);

            return Request.CreateResponse(HttpStatusCode.OK, avtal);
        }
        catch (Exception ex)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, "Ett fel har inträffat");
        }
    }

    return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Felaktiga parametrar");
}

SokAvtalAdvanced 看起来像这样

public class SokAvtalAdvanced
{
    #region Properties

    private int _limit;
    public int Limit
    {
        get { return _limit > 0 && _limit < 50 ? _limit : 10; }
        set { _limit = value;  }
    }

    private int _offset;
    public int Offset
    {
        get { return _offset > 0 ? _offset : 0; }
        set { _offset = value; }
    }

    #endregion

    #region Methods

    /// <summary>
    /// Returns a valid modelstate
    /// </summary>
    /// <returns></returns>
    public bool IsValid()
    {
        return true;
    }

    #endregion

}

为了将其映射到 Angular，我到目前为止已经完成了这项工作，但没有任何运气

app.controller("SokAvtalController", ['$scope', 'SokApi', function ($scope, SokApi) {
    $scope.avtal = SokApi.query({ sokAvtalAdvanced: {
            "Limit": 10,
            "Offset": 0
    }});

    console.log($scope.avtal);

    $scope.SelectGroup = function (avtal) {

    };
}]);

angular.module('app.avtalsportalen', ['ngResource'])
    .factory('SokApi', ['$resource', function ($resource) {
        return $resource('/api/SokAvtal/:sokAvtalAdvanced');
    }]);

知道我的电话出了什么问题吗？每次调用 WebApi 中的 SokAvtalAdvanced sokAvtalAdvanced 为 null

谢谢

【问题讨论】：

你试过只使用 SokApi.query({ "Limit": 10, "Offset": 0 });
@WayneEllery 是的，结果相同

标签： json angularjs asp.net-web-api

【解决方案1】：

由于这是一个 GET 请求，您需要使用 [FromUri] 属性指示要从 url 读取的模型绑定器：

public HttpResponseMessage GetSokAvtal([FromUri] SokAvtalAdvanced sokAvtalAdvanced)
{
    ...
}

同样在您应该使用的客户端上：

$scope.avtal = SokApi.query({
    "Limit": 10,
    "Offset": 0
});

【讨论】：