Angular 表单到 C# MVC 实体控制器空值答案

【问题标题】：Angular Form to C# MVC Entity Controller null valuesAngular 表单到 C# MVC 实体控制器空值
【发布时间】：2016-09-29 01:27:58
【问题描述】：

尝试将数据从 angularjs 发送到 C# mvc 控制器。虽然数据收集得很好（我在 console.log 中看到它们），但它们在 C# 控制器中接收效果不佳，因此空值存储在数据库中。这是我的 Angular 代码：

 var formapp = angular.module("formapp", []);
       formapp.controller("formctrl", function ($scope, $http) {
                      $scope.submitFormAngular = function () {
                var animal = $scope.animal;
                var url = '/Home/AngularData';
                $http({
                    method: 'POST',
                    url: url,
                    data: animal,
                }).success(function (data) {
                    console.log($scope.animal);
                    console.log("worked");
                           })
                            .error(function (error) {
                                console.log("not worked");
                            });
            }
           });

这是我的 C# 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; }

}

最后这是我的 C# 控制器：

public JsonResult AngularData(Animal animal)
{
    db.Animals.Add(animal);
    db.SaveChanges();
    return Json(new { foo = "bar", baz = "Blech" });
}

再次重申：即使值存储在 UI 中，它们也不会传递给 C# 代码。我是 Angular 等的新手。欢迎任何帮助。

这是我的表单html代码：

<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="write a 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
               placeholder="write a habitat" />
              <!-- 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
                placeholder="write a class" />
              <!-- data-ng-change="getFormData(animal)">-->
    </div>

【问题讨论】：

它传递给控制器的数据是什么，在开发者工具的网络选项卡中查看数据
是 webApiController 还是 MVC 控制器？
@GANI 它是一个 C# MVC 控制器。我很好地看到了“网络”选项卡中的数据。我不知道为什么没有从 C# 控制器收到它们
在action方法上添加[HttpPost]
你的控制器功能被击中了吗？

标签： c# angularjs asp.net-mvc asp.net-mvc-4

【解决方案1】：

与 GeorgeD 合作，发现他的角形模型定义为

ng-model='animal.name'

而不是

ng-model='animal.animalName'

更改此修复它。

【讨论】：

【解决方案2】：

尝试将您的控制器功能更改为：

public Task<ActionResult> AngularData(Animal animal)
{
    db.Animals.Add(animal);
    db.SaveChanges();
    return Json(new { foo = "bar", baz = "Blech" });
}

然后在提交到数据库之前检查“动物”中是否有任何内容。

【讨论】：

我在“Json(new { foo = "bar", baz = "Blech" });" 上收到错误无法将类型“System.Web.Mvc.JsonResult”隐式转换为“System.Threading.Tasks.Task”
任务在这里无关紧要。如果要使用 Task，则需要等待。
@Scottie 我很确定你只需要等待公共异步任务。
@RaniRadcliff 哦，是的，你是对的！但是，Task 在接受模型方面没有任何区别。仅在返回的内容上。
好的，请发布您的 HTML 表单，以便我们了解模型是如何应用的。 “animal”需要有animal.animalID、animal.animalName等。模型必须完全匹配。