AngularJS ngResource POST對象在C＃Web API中為Null

Question

我的問題是，當我向Web API控制器發送完整的Javascript對象時，我總是得到空值。 即使我有一個完整的對象，也需要指定每個屬性和值，如下所示。 如何使Web API接受現成的Javascript對象並正確綁定它？

C＃Web Api控制器：

[Route("addcredentials/{salesId}")]
[HttpPost]
public IHttpActionResult AddCredentials([FromUri] int salesId, [FromBody] ScriveCredentials credentials)
{
    return Ok(credentials);
}

C＃憑證對象：

public class Credentials
{
    public string ClientIdentifier { get; set; }

    public string ClientSecret { get; set; }

    public string TokenIdentifier { get; set; }

    public string TokenSecret { get; set; }
}

傳遞給資源的Javascript對象，另存為“結果”：

{ClientIdentifier: "a", ClientSecret: "b", TokenIdentifier: "c", TokenSecret: "d"}

資源方式：

addCredentials: {
    method: 'POST',
    url: 'api/addcredentials/:userSalesId'
}

導致空值的用法：

userResource.addCredentials({ userSalesId: user.SalesId }, { credentials: result}).$promise.then(function (data) {
    console.log(data);
});

此請求的有效負載：

{"credentials":{"ClientIdentifier":"a","ClientSecret":"b","TokenIdentifier":"c","TokenSecret":"d"}}

用法可行，但看起來過於復雜：

userResource.addCredentials({ userSalesId: user.SalesId }, { ClientIdentifier: result.ClientIdentifier, ClientSecret: result.ClientSecret, TokenIdentifier: result.TokenIdentifier, TokenSecret: result.TokenSecret }).$promise.then(function (data) {
    console.log(data);
});

請求有效負載：

{"ClientIdentifier":"a","ClientSecret":"b","TokenIdentifier":"c","TokenSecret":"d"}

更新資料

嘗試了以下操作，但也不起作用，所有值均為null：

addScriveCredentials: {
    method: 'POST',
    url: 'api/addcredentials/'

result.SalesId = user.SalesId;
userResource.addCredentials({}, { credentials: result }).$promise.then(function (data) {
    console.log(data);
});

C＃：

[Route("addcredentials")]
[HttpPost]
public IHttpActionResult Addcredentials(Credentials credentials)
{
    return Ok(credentials);
}

Answer 1

我之前做了一個示例，希望下面的代碼能幫助您理解。

該模型。

using System.ComponentModel.DataAnnotations;

public class ProductModel
{
    public ProductModel(int id, string name, string category, decimal price)
    {
        Id = id;
        Name = name;
        Category = category;
        Price = price;
    }

    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Required]
    public string Category { get; set; }

    [Required]
    public decimal Price { get; set; }
}

ApiController。

using Models;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web.Hosting;
using System.Web.Http;

public class ProductsController : ApiController
{
    // other code omitted for brevity.

    [HttpPost]
    public IHttpActionResult PostProduct(ProductModel product)
    {
        try
        {
            if (product == null)
            {
                throw new ArgumentNullException("Product parameter cannot be null");
            }

            if (ModelState.IsValid)
            {
                // code omitted for brevity.

                return this.Ok();
            }
            else
            {
                throw new Exception("Product is invalid");
            }
        }
        catch (Exception ex)
        {
            return InternalServerError(ex);
        }
    }

    [HttpPut]
    public IHttpActionResult PutProduct(ProductModel product)
    {
        try
        {
            if (product == null)
            {
                throw new ArgumentNullException("Product parameter cannot be null");
            }

            if (ModelState.IsValid && product.Id > 0)
            {
                // code omitted for brevity.

                return this.Ok();
            }
            else
            {
                throw new Exception("Product is invalid");
            }
        }
        catch (Exception ex)
        {
            return InternalServerError(ex);
        }
    }

    // other code omitted for brevity.

}

Angular服務。

// products.js

(function () {
    "use strict";

    angular
        .module("exampleApp")
        .constant("baseUrl", "http://localhost:53631/api/products/")
        .factory("productsResource", productsResource);

    productsResource.$inject = ["$resource", "baseUrl"];

    function productsResource($resource, baseUrl) {
        return $resource(baseUrl + ":id",
            {
                id: "@id"
            },
            {
                create: {
                    method: "POST"
                },
                save: {
                    method: "PUT"
                }
            });
    }
})();

Angular控制器。 專注於下面的createProduct和updateProduct函數

// edit.controller.js

(function () {
    "use strict";

    angular
        .module("exampleApp")
        .controller("EditController", EditController);

    EditController.$inject = ["$routeParams", "$location", "productsResource"];

    function EditController($routeParams, $location, productsResource) {
        var vm = this;
        vm.currentProduct = null;
        vm.createProduct = createProduct;
        vm.updateProduct = updateProduct;
        vm.saveEdit = saveEdit;
        vm.cancelEdit = cancelEdit;

        if ($location.path().indexOf("/edit/") === 0) {
            var id = $routeParams.id;
            productsResource.get({ id: id }, function (data) {
                vm.currentProduct = data;
            });
        }

        function cancelEdit() {
            $location.path("/list");
        }

        function updateProduct(product) {
            product.$save().then(function () {
                $location.path("/list");
            });
        }

        function saveEdit(product) {
            if (angular.isDefined(product.id)) {
                vm.updateProduct(product);
            } else {
                vm.createProduct(product);
            }

            vm.currentProduct = {};
        }

        function createProduct(product) {
            new productsResource(product).$create().then(function (newProduct) {
                $location.path("/list");
            });
        }
    }
})();

Answer 2

您可以改為傳遞一個對象作為發布消息的正文。

添加這樣的課程

public class addCredentialObj
{
    public int salesId { get; set; }
    public Credentials credentials { get; set; }
}

像這樣修改您的控制器（FromBody的用法可以在這里閱讀）

[Route("addcredentials")]
[HttpPost]
public IHttpActionResult AddCredentials([FromBody]addCredentialObj obj)
{
    return Ok(credentials);
}

在客戶端中，您需要為addCredentialObj類創建一個匹配的json對象。

var yourCredentials = {"ClientIdentifier":"a","ClientSecret":"b","TokenIdentifier":"c","TokenSecret":"d"};
var jsonData = {
    salesId: yourId,
    credentials: yourCredentials
};

然后在對控制器的$ http請求中，將json對象字符串化

$http({
    method: 'POST',
    url: 'api/addcredentials',
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
    },
    data: JSON.stringify(jsonData),
});