Question

这可能是一个愚蠢的问题，但我无法做到。我已经搜索了所有关于stackoverflow的问题，当然还有google。

所以，我在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);
}

我的angularJS控制器

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);
        });
    }
})

我的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控制器上创建了一个断点，它命中但我传递的模型是null。这是我的webapi控制器返回的数据：

Object {data: Object, status: 200, config: Object, statusText: "OK"}
config: Object    
data: Object       
headers: Object    
method: "POST"    
transformRequest: Array[1]
transformResponse : Array[1]
url : "http://localhost:1142/api/values"
__proto__ :
    Object: data
    Object:
        id: 0
        task: null
__proto__ :
    Object
    headers: function(name)
    status: 200
    statusText: "OK"
__proto__ :
    Object

这是我尝试过的列表：

使用或删除我的webapi控制器上的[FromBody]标签
在将数据发送到webapi控制器之前，在我的angularJS控制器上使用或删除JSON.stringify
更改＆＃34;公共HttpResponseMessage帖子＆＃34; to＆＃34; public TaskList Post＆＃34;
console.log从我的angularJS控制器发送的数据：{＆＃34; task＆＃34;：＆＃34; testTask＆＃34;，＆＃34; id＆＃34;：＆＃34; 1＆＃34; }

为什么它没有正确发送到我的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，感谢您注意到＆＃39;数据＆＃39;这是不必要的。（这是一个愚蠢的错误）

注意@Mahesh Chand：在我的情况下，我们确实需要ng-model而不是ng-bind。如果我使用ng-bind，我将无法获得从视图中传递的值。

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

Answer 1

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

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

只是为了一个好的做法，在Api Controller上使用RoutePrefix属性，在Action上使用Route属性，如下所述：

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

请求自动序列化。因此，您必须删除Json.Stringify。您应该在控制器中使用model的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);
        });
    }
})

您的Angular服务也需要进行一项更改。您应该使用$ http中的post功能，如下所述：

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>

将一个模型从angularJS发布到WEBAPI

1 个答案: