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课程。所以，虽然我的html代码中有animal.name，animal.habitat和animal.class，但我有以下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代码中的值。安静易于修复，但很难找到（对我而言）。谢谢大家！

Angular Form到MVC Entity Controller发布数据的方式？

2 个答案: