HttpPostデータが届かない

Question

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

をそして私はskillsCtrl.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メソッドで適切に形成されたスキルオブジェクトを取得正常に動作します：Createメソッドがうまく呼び出さ

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

が、スキルのオブジェクトがnullの場合：

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

私はこのことがたくさんあることを知っていますが、私はこの問題に対して4時間頭を打っています。私はすべてを試しました。

Answer 1

あなたが変更することができます。

public HttpResponseMessage Create(HttpRequestMessage request, Skill skill) 

に：

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