C# 将模型从angularJS发布到WEBAPI

这也许是一个愚蠢的问题，但我不能正确回答。我搜索了所有关于stackoverflow的问题，当然还有谷歌

所以，我在我的webapi上得到了这个类

public partial class TaskList
{
    public int id { get; set; }
    public string task { get; set; }
}

然后是我的webapi控制器

[HttpPost]
public HttpResponseMessage Post([FromBody] TaskList tasklistModel)
{
    return Request.CreateResponse(HttpStatusCode.OK, tasklistModel);
}

angular.module('ReminderDude.controllers', [])

.controller('HomeController', function($scope, dudeService) {
    $scope.CreateNewTask = function(tasklistModel){
        tasklistModel.id = '1';

        dudeService.store({
            data: JSON.stringify(tasklistModel)
        }).then(function(resp) {
            console.log(resp);
         },function(err) {
            console.error('Controller: Error', err);
        });
    }
})

 [Route("save"), HttpPost]
 public HttpResponseMessage Post(TaskList tasklistModel)

我的angularJS控制器

[HttpPost]
public HttpResponseMessage Post([FromBody] TaskList tasklistModel)
{
    return Request.CreateResponse(HttpStatusCode.OK, tasklistModel);
}

angular.module('ReminderDude.controllers', [])

.controller('HomeController', function($scope, dudeService) {
    $scope.CreateNewTask = function(tasklistModel){
        tasklistModel.id = '1';

        dudeService.store({
            data: JSON.stringify(tasklistModel)
        }).then(function(resp) {
            console.log(resp);
         },function(err) {
            console.error('Controller: Error', err);
        });
    }
})

 [Route("save"), HttpPost]
 public HttpResponseMessage Post(TaskList tasklistModel)

我的angularJS服务

angular.module('ReminderDude.services', [])

.factory('dudeService', function($http) {
    var baseUrl = 'http://localhost:1142/api/values';
    return {
        store: function (tasklistModel){
            return $http({  
                        url: baseUrl,
                        method: 'POST',  
                        data: tasklistModel,  
                        headers: {  
                            "Content-Type": "application/json"  
                        }  
                    });
        }
    };
})

最后是HTML

<ion-view view-title="Reminder Dude">
    <ion-content class="padding">
        <form ng-Submit="CreateNewTask(model)">
            <div class="list card">
                <div class="item item-divider">Hello! Please input your task below</div>
                <div class="item item-input">
                    <input type="text" ng-model="model.task" placeholder="Write Here" />
                </div>
            </div>
            <center>
                <button type="submit" class="button button-positive button-large">Save</button>
            </center>
        </form>
    </ion-content>
</ion-view>

以下是我尝试过的内容列表：

• 在我的webapi控制器上使用或删除[FromBody]标记
• 在将数据发送到webapi控制器之前，在angularJS控制器上使用或删除JSON.stringify
• 将“public HttpResponseMessage Post”更改为“public TaskList Post”
• console.log从我的angularJS控制器发送的数据：{“task”：“testTask”，“id”：“1”}

为什么它不能正确地发送到我的webapi？ 任何答案和帮助都将不胜感激

仅供参考：我认为CORS不是问题，我已经启用了它。因为如果没有启用CORS，它就不会到达断点，不是吗？如果是与CORS相关的问题，请纠正我

多谢各位

更新：

在与@Mahesh Chand进行了长时间的讨论之后，我成功地将数据发送到了我的webapi控制器。以下是我所做的：

将angularjs控制器更改为：

angular.module('ReminderDude.controllers', [])

.controller('HomeController', function($scope, dudeService) {   
    $scope.CreateNewTask = function(tasklistModel){
        tasklistModel.id = 1;

        //before
        dudeService.store({
            data: tasklistModel
        }).then(function(resp) {
        console.log('response from api:'))
        console.log(resp);

        //after
        dudeService.store(tasklistModel).then(function(resp) {
            console.log('response from api:');
            console.log(resp);
            //ignore the console.log, it just my code to test the response from the api

非常感谢@Mahesh Chand，感谢您注意到不必要的“数据”。（那是一个愚蠢的错误）

@Mahesh Chand注意：在我的例子中，我们确实需要ng模型而不是ng绑定。如果使用ng bind，我将无法获取从视图传递的值

---

希望这将帮助其他与我有相同问题的人。

[FromBody]仅在post请求包含表单数据时使用，但在您的情况下，您仅在请求中提交数据。因此，您必须在API控制器的操作中删除[FromBody]

[HttpPost]
public HttpResponseMessage Post([FromBody] TaskList tasklistModel)
{
    return Request.CreateResponse(HttpStatusCode.OK, tasklistModel);
}

angular.module('ReminderDude.controllers', [])

.controller('HomeController', function($scope, dudeService) {
    $scope.CreateNewTask = function(tasklistModel){
        tasklistModel.id = '1';

        dudeService.store({
            data: JSON.stringify(tasklistModel)
        }).then(function(resp) {
            console.log(resp);
         },function(err) {
            console.error('Controller: Error', err);
        });
    }
})

 [Route("save"), HttpPost]
 public HttpResponseMessage Post(TaskList tasklistModel)

为了获得良好的实践效果，请在Api控制器上使用RoutePrefix属性，并在操作上使用Route属性，如下所述：

 [RoutePrefix("api/my")]
 public class MyController : ApiController
 {
    [Route("save")]
    [HttpPost]
    public HttpResponseMessage Post(TaskList tasklistModel)
    {
       //Your code here
    }
 }

angular.module('ReminderDude.services', [])

.factory('dudeService', function($http) {
    var baseUrl = 'http://localhost:1142/api/values';
    return {
        store: function (tasklistModel){
            //url will be baseUrl + api controller route prefix + action route
            console.log(tasklistModel)
            return $http.post(baseUrl+'api/my/save',tasklistModel);
        }
    };
})

请求将自动序列化。因此，您必须删除Json.Stringify。 您应该将控制器中模型的id用作整数，而不是字符/字符串

angular.module('ReminderDude.controllers', [])
.controller('HomeController', function($scope, dudeService) {
    //initialize the model here
    $scope.tasklistModel = {};
    //No need to pass it in parameter since it is directly accessible to View
    $scope.CreateNewTask = function(){
         $scope.tasklistModel.id = 1;

        dudeService.store($scope.tasklistModel).then(function(resp) {
            console.log(resp);
         },function(err) {
            console.error('Controller: Error', err);
        });
    }
})

你的角度服务也需要一个改变。您应该在$http中使用post函数Available，如下所述：

 [RoutePrefix("api/my")]
 public class MyController : ApiController
 {
    [Route("save")]
    [HttpPost]
    public HttpResponseMessage Post(TaskList tasklistModel)
    {
       //Your code here
    }
 }

angular.module('ReminderDude.services', [])

.factory('dudeService', function($http) {
    var baseUrl = 'http://localhost:1142/api/values';
    return {
        store: function (tasklistModel){
            //url will be baseUrl + api controller route prefix + action route
            console.log(tasklistModel)
            return $http.post(baseUrl+'api/my/save',tasklistModel);
        }
    };
})

尝试ng bind，您的HTML将

<ion-view view-title="Reminder Dude">
    <ion-content class="padding">
        <form ng-Submit="CreateNewTask()">
            <div class="list card">
                <div class="item item-divider">Hello! Please input your task below</div>
                <div class="item item-input">
                    <input type="text" ng-bind="tasklistModel.task" placeholder="Write Here" />
                </div>
            </div>
            <center>
                <button type="submit" class="button button-positive button-large">Save</button>
            </center>
        </form>
    </ion-content>
</ion-view>

你好请在下面输入您的任务
拯救

嘿，谢谢你的回答，我已经做了你推荐的更改。但是在[HttpPost]之前添加[Route（“save”）]之后，它给出了一个错误405（不允许使用方法）attribute@William我更新了我的答案，在控制器和HTML中做了更多的更改。有一个问题，你的api控制器操作被调用了吗？完整的Url将是域名+控制器的RoutePrefix+操作的Route，也就是说，对于我的回答，你所说的调用是什么意思？如果通过给定断点并在调用它时命中，那么是的。在web api的操作中该参数仍然为null吗？