HttpPost数据没有过来

时间:2017-12-15 18:20:58

标签: javascript angularjs asp.net-web-api

我正在创建一个Angularjs应用程序,并且在获取和编辑消息时一切都运行良好。现在我想添加新功能和删除功能。

我有一个名为SkillsController的控制器:

[Authorize(Roles = "Admin")]
[RoutePrefix("api/skills")]
public class SkillsController : ApiControllerBase
{
    public SkillsController(IDataRepository dataRepository) : base(dataRepository)
    {
    }

    [HttpGet]
    [Route("get")]
    public HttpResponseMessage Get(HttpRequestMessage request)
    {
        return CreateHttpResponse(request, () =>
        {
            List<Skill> skills = DataRepository.GetSkills();
            return request.CreateResponse(HttpStatusCode.OK, skills);
        });
    }

    [HttpPost]
    [Route("update")]
    public HttpResponseMessage Update(HttpRequestMessage request, Skill skill)
    {
        return CreateHttpResponse(request, () =>
        {
            HttpResponseMessage response = null;

            if (!ModelState.IsValid)
            {
                response = request.CreateResponse(HttpStatusCode.BadRequest,
                    ModelState.Keys.SelectMany(k => ModelState[k].Errors)
                          .Select(m => m.ErrorMessage).ToArray());
            }
            else
            {
                DataRepository.UpdateSkill(skill);
                response = request.CreateResponse(HttpStatusCode.OK);
            }

            return response;
        });
    }

    [HttpPost]
    [Route("create")]
    public HttpResponseMessage Create(HttpRequestMessage request, Skill skill)
    {
        return CreateHttpResponse(request, () =>
        {
            HttpResponseMessage response = null;

            if (!ModelState.IsValid)
            {
                response = request.CreateResponse(HttpStatusCode.BadRequest,
                    ModelState.Keys.SelectMany(k => ModelState[k].Errors)
                          .Select(m => m.ErrorMessage).ToArray());
            }
            else
            {
                response = request.CreateResponse(HttpStatusCode.OK);
            }

            return response;
        });
    }
}
}

我有一个skillCtrl.js文件:

(function (app) {
'use strict';

app.controller('skillsCtrl', skillsCtrl);

skillsCtrl.$inject = ['$scope', '$modal', 'apiService', 'notificationService'];

function skillsCtrl($scope, $modal, apiService, notificationService) {
    $scope.pageClass = 'page-skills';
    $scope.loadingSkills = true;
    $scope.Skills = [];

    $scope.loadSkills = loadSkills;
    $scope.createSkill = createSkill;
    $scope.deleteSkill = deleteSkill;
    $scope.openEditDialog = openEditDialog;

    function loadSkills() {
        $scope.loadingLevels = true;

        apiService.get('/api/skills/get/', null,
            skillsLoadCompleted,
            skillsLoadFailed);
    }

    function createSkill() {
        $modal.open({
            templateUrl: 'scripts/spa/skills/newSkill.html',
            controller: 'skillNewCtrl',
            scope: $scope
        }).result.then(function ($scope) {
        }, function () {
        });
    }

    function openEditDialog(skill) {
        $scope.EditedSkill = skill;
        $modal.open({
            templateUrl: 'scripts/spa/skills/editSkill.html',
            controller: 'skillEditCtrl',
            scope: $scope
        }).result.then(function ($scope) {
        }, function () {
        });
    }

    function skillsLoadCompleted(result) {
        $scope.Skills = result.data;
        $scope.loadingSkills = false;
    }

    function skillsLoadFailed(response) {
        notificationService.displayError(response.data);
    }

    $scope.loadSkills();
}
})(angular.module('appSkills'));

然后我有一个skillEditCtrl.js文件,它完美地运行:

(function (app) {
'use strict';

app.controller('skillEditCtrl', skillEditCtrl);

skillEditCtrl.$inject = ['$scope', '$modalInstance', '$timeout', 'apiService', 'notificationService'];

function skillEditCtrl($scope, $modalInstance, $timeout, apiService, notificationService) {
    $scope.cancelEdit = cancelEdit;
    $scope.updateSkill = updateSkill;

    function updateSkill() {
        apiService.post('/api/skills/update/', $scope.EditedSkill,
            updateSkillCompleted,
            updateSkillLoadFailed);
    }

    function updateSkillCompleted(response) {
        notificationService.displaySuccess($scope.EditedSkill.SkillName + ' has been updated');
        $scope.EditedSkill = {};
        $modalInstance.dismiss();
    }

    function updateSkillLoadFailed(response) {
        notificationService.displayError(response.data);
    }

    function cancelEdit() {
        $scope.isEnabled = false;
        $modalInstance.dismiss();
    }
}
})(angular.module('appSkills'));

还有一个skillNewCtrl.js文件:

(function (app) {
'use strict';

app.controller('skillNewCtrl', skillNewCtrl);

skillNewCtrl.$inject = ['$scope', '$modalInstance', '$timeout', 'apiService', 'notificationService'];

function skillNewCtrl($scope, $modalInstance, $timeout, apiService, notificationService) {
    $scope.newSkill = { SkillId: 0, SkillName: "test" };
    $scope.cancelCreate = cancelCreate;
    $scope.createSkill = createSkill;

    function createSkill() {
        apiService.post('/api/skills/create/', $scope.newSkill,
            createSkillCompleted,
            createSkillLoadFailed);
    }

    function createSkillCompleted(response) {
        notificationService.displaySuccess($scope.newSkill.SkillName + ' has been updated');
        $modalInstance.dismiss();
    }

    function createSkillLoadFailed(response) {
        notificationService.displayError(response.data);
    }

    function cancelCreate() {
        $scope.isEnabled = false;
        $modalInstance.dismiss();
    }
}
})(angular.module('appSkills'));

这个调用工作正常,我在控制器的Update方法中得到一个正确形成的Skill对象:

            apiService.post('/api/skills/update/', $scope.EditedSkill,
            createSkillCompleted,
            createSkillLoadFailed);

Create方法调用得很好,但Skills对象为null:

            apiService.post('/api/skills/create/', $scope.newSkill,
            createSkillCompleted,
            createSkillLoadFailed);

我知道这要经历很多事情,但我一直在为这个问题敲打4个小时。我已经尝试了一切。

1 个答案:

答案 0 :(得分:0)

你可以改变:

public HttpResponseMessage Create(HttpRequestMessage request, Skill skill)

为:

public HttpResponseMessage Create(HttpRequestMessage request, [FromBody] Skill skill)