Angular表单到MVC实体控制器的方式来发布数据

Question

我试图将数据从角形式传递到c#实体控制器，以便存储到数据库。使用实体框架时自己创建的c#控制器。这是到目前为止我的angular代码:

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类。所以，当我有animal。name, animal。在我的html代码中，我有以下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代码中重命名值。很容易修复，但很难找到(对我来说)。谢谢大家!