MVCエンティティコントローラへの角型データの投稿方法

Question

データベースに格納するために、角型からc＃エンティティコントローラにデータを渡そうとしています。 Entity Frameworkを使用している間にそれ自身で作成されたC＃コントローラ。

var formapp = angular.module("formapp", []); 
formapp.controller("formctrl", function ($scope) { 
    $scope.getFormData = function (animal) { 
     $scope.animalData = angular.copy(animal); 
     console.log($scope.animal) 
    }; 
}); 

、これは（エンティティを使用して）私のC＃のコントローラである：これは、これまでのところ、私の角度コードである

public async Task<ActionResult> Create([Bind(Include = "animalID,animalName,animalHabitat,animalClass")] Animal animal) 
{ 
    if (ModelState.IsValid) 
    { 
     db.Animals.Add(animal); 
     await db.SaveChangesAsync(); 
     return RedirectToAction("Index"); 
    } 

    return View(animal); 
} 

とも私のhtmlコード：

<div ng-app="formapp" class="container" ng-controller="formctrl"> 
    <div class="form-group"> 
     <label for="name" class="col-md-3 text-align-right"><strong>Name</strong></label> 
     <input name="name" 
       id="name" 
       type="text" 
       maxlength="80" 
       ng-model="animal.name" 
       required 
       placeholder={{name}} 
       data-ng-change="getFormData(animal)"> 
    </div> 

    <div class="form-group"> 
     <label for="habitat" class="col-md-3 text-align-right"><strong>Habitat</strong></label> 
     <input name="habitat" 
       id="habitat" 
       type="text" 
       ng-model="animal.habitat" 
       required 
       data-ng-change="getFormData(animal)"> 
    </div> 

    <div class="form-group"> 
     <label for="class" class="col-md-3 text-align-right"><strong>Class</strong></label> 
     <input name="class" 
       id="class" 
       type="text" 
       ng-model="animal.class" 
       required 
       data-ng-change="getFormData(animal)"> 
    </div> 

私に教えてくださいC＃コントローラに角度データを渡す方法（私はこれに非常に新しいです）。

ご協力いただきありがとうございます。

Answer 1

は、この完全なコードは解決される問題、あなた

@{ 
    ViewBag.Title = "SendDataStackOverFlow"; 
} 
<script src="~/Scripts/AngularJs/angular.min.js"></script> 
<h2>SendDataStackOverFlow</h2> 

<div class="row"> 
    <div ng-app="formapp" class="container" ng-controller="formctrl"> 
     <div class="form-group"> 
      <label for="name" class="col-md-3 text-align-right"><strong>Name</strong></label> 
      <input name="name" 
        id="name" 
        type="text" 
        maxlength="80" 
        ng-model="animal.name" 
        required 
        placeholder={{name}} 
        data-ng-change="getFormData(animal)"> 
     </div> 

     <div class="form-group"> 
      <label for="habitat" class="col-md-3 text-align-right"><strong>Habitat</strong></label> 
      <input name="habitat" 
        id="habitat" 
        type="text" 
        ng-model="animal.habitat" 
        required 
        data-ng-change="getFormData(animal)"> 
     </div> 

     <div class="form-group"> 
      <label for="class" class="col-md-3 text-align-right"><strong>Class</strong></label> 
      <input name="class" 
        id="class" 
        type="text" 
        ng-model="animal.animalclass" 
        required 
        data-ng-change="getFormData(animal)"> 
     </div> 
     <button ng-click="submitFormAngular()">Calculate</button> 
    </div> 
</div> 
<script> 
    var app = angular.module('formapp', []); 
    app.controller('formctrl', function ($scope, $http) { 
     $scope.name = 'MyName'; 
     $scope.submitFormAngular = function() { 
      var animal = $scope.animal; 

      //var data = { 'id': 10 }; 
      var url = '/AngularJs/SendDataStackOverFlow'; 
      $http({ 
       method: 'POST', 
       url: url, 
       data: animal, //forms user object 
       // headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
      }).success(function (data) { 
       console.log(data); 
      }); 


     }; 

    }); 
</script> 

とバックエンド・コントローラー

public class Animal 
     { 
      public String name { get; set; } 
      public String habitat { get; set; } 
      //changed class to aninmalclass it is a reserved keyword 
      public String animalclass { get; set; } 
     } 
     [HttpPost] 
     public JsonResult SendDataStackOverFlow(Animal animal) 
     { 
      return Json(new { foo = "bar", baz = "Blech" }); 
     } 

Answer 2

を助けるかもしれないように。シンプルで静かでしたが、私はDTOクラスを提供しなかったのであなたを混乱させました。

public class Animal 

    { 
    [Key] 
    public int animalID { get; set; } 
    public string animalName { get; set; } 
    public string animalHabitat { get; set; } 
    public string animalClass { get; set; } 

} 

だから、私はhtmlコード内の値の名前を変更する必要がありました：私は私のhtmlコードでanimal.name、animal.habitatとanimal.classを持っていながら、そう、私は次のDTOを持っています。 静かで簡単に修正できますが、（私にとっては）見つけるのが非常に難しいです。皆さん、ありがとうございました！