Опубликовать модель от angularJS до WEBAPI

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, он поражает, но модель я передал равна нулю. Вот возвращаемые данные из моего 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 

Вот список того, что я пробовал:

• использование или удалить [FromBody] бирку на мой контроллер WebAPI
• использование или удалить JSON.stringify на моем контроллере angularJS перед отправкой моих данных в контроллер webapi
• изменить «общедоступную публикацию HttpResponseMessage» на «публикацию публичного сообщения TaskList»
• console.log данные, отправленные с моего angularJS controller: {"task": "testTask", "id": "1"}

Почему это неправильно отправлено на мой webapi? Любые ответы и помощь будут оценены.

FYI: CORS не проблема, на мой взгляд, я включил ее. Потому что, если CORS не включен, он не попадет в точку останова, не так ли? Если это проблема, связанная с CORS, пожалуйста, исправьте меня.

Спасибо

UPDATE:

После довольно длительного обсуждения с @Mahesh Чанд, я уже успешно отправить данные на мой контроллер 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 Чанд, спасибо за замечая «данных», который был ненужный. (это была чертовски глупая ошибка)

Примечание для @Mahesh Chand: в моем случае нам действительно нужна ng-модель вместо ng-bind. если я использую ng-bind, я не получу значение, которое я передал из представления.

Надеюсь, это поможет другим, у кого будет такая же проблема, как и я.

Answer 1

[FromBody] используется только в том случае, если почтовый запрос имеет данные формы, но в вашем случае вы отправляете данные только в запросе. Таким образом, вы, чтобы удалить [FromBody] в действии контроллера

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

API Просто для хорошей практики, используйте атрибут RoutePrefix на Апи Controller и Маршрута атрибут действий, как указано ниже:

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

Запросы сериализуются автоматически. Таким образом, вы должны удалить 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, как указано ниже:

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

Try нг-привязки и ваш 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>