使用AngularJS將表單數據發布到ASP.NET MVC應用程序中定義的ViewModel

Question

我想使用AngularJS收集一些數據並將其發布回我的ASP.NET WebAPI控制器。

我已經定義了我的業務對象（其目的只是記錄年度汽油總消耗量以及每月的消耗量）：

public class PetrolViewModel
{
    public double petrol_annual { get; set; }
    public int petrol_measure { get; set; }

    public List<Month> months { get; set; }

}

public class Month
{
    public double jan { get; set; }
    public double feb { get; set; }
}

在我的Angular代碼中，我有：

var app = angular.module('petrol', []);

app.controller('PetrolController', function ($scope, $http) {

$scope.petrol = {};

$scope.petrol.months = {};

$scope.sendForm = function() {
    $http({
        method: 'Post',
        url: 'api/values',
        data: $scope.petrol
    }).success(function (data, status, headers, config) {
        console.log(data);
        console.log(status);
        console.log(headers);
    }).error(function (data, status, headers, config) {
        console.log(data);
        console.log(status);
        console.log(headers);
    });
};

});

當我提交表單數據並離開WebApi控制器以接收匿名對象時，它似乎可以工作，並且我得到了表單數據：

但是，如果我更改此設置並嘗試傳入之前定義的ViewModel，則會傳入一個空對象：

我想充分利用ASP.NET功能來自動映射匹配的名稱，並向我提供一個填充的對象，然后可以在代碼中對其進行處理。 我不想將匿名對象映射到ViewModel。

因此，編程問題是：如何確保我的AngularJS對象可以與ViewModel匹配？

在教程中，我一直在觀察這似乎對其他所有人都“奏效”，因此他們往往不會對其進行詳細介紹。

根據Fiddler的說法，這是正在發送的JSON：

{"months":{"jan":"10","feb":"10","mar":"10","apr":"10","may":"10","jun":"10","jul":"10","aug":"10","sep":"5","oct":"5","nov":"20","dec":"10"},"petrol_annual":"120","petrol_measure":"1"}

Answer 1

我不確定為什么petrol_annual或petrol_measure沒有正確綁定模型，但是List<Month>必須改為Month ：

public class PetrolViewModel
{
    public double petrol_annual { get; set; }
    public int petrol_measure { get; set; }

    public Month months { get; set; }
}

這是因為JSON中的months是對象，而不是數組。 它應該與服務器上的Month類匹配。 Month班也應包括所有月的條目，但為簡潔起見，您可能已省略了這些條目。

Answer 2

下面的作品。 很好。 碼：

public class CatergoriesViewModel
{

    public string OrderSelected { get; set; }
    public string CatergoryName { get; set; }
}

var data = { catergoryName: "TestCat", orderSelected: "true" };
    $http.post("Category", data)
 .then(function (response) {
     $scope.test = response.data;
 }, function (error) {
     $scope.test = error;
 });