Angularjs空对象发送mvc控制器问题答案

【问题标题】：Angularjs null object problem to send mvc controllerAngularjs空对象发送mvc控制器问题
【发布时间】：2020-10-11 08:29:07
【问题描述】：

我正在使用 asp.net core 3.1 和 angular js 进行开发。我正在尝试将一个对象从 js 发送到 mvc 控制器，但另一方面它总是需要空对象，对象值出现在 console.log 中。我没有找到任何事情可做或我犯了什么错误。我现在该怎么办？提前致谢

HTML代码

<div class="row" ng-controller="EmployeeController as vm">
    <form method="post" class="form-horizontal" id="EmployeeSetupForm"
          name="EmployeeForm">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="bmd-label-floating">First Name</label>
                    <input type="text" class="form-control" required
                           ng-model="vm.eEmployee.FirstName" name="FirstName">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="bmd-label-floating">Middle Name</label>
                    <input type="text" class="form-control" required
                           ng-model="vm.eEmployee.MiddleName" name="MiddleName">
                </div>
            </div>
        </div>
        <div>
            <div class="col-lg-3 float-left ">
            </div>
            <div class="col-lg-9 ">
                <button type="button" class="btn btn-info"
                        ng-click="vm.SaveEmployee()">
                    <i class="glyphicon glyphicon-save"> Save</i>
                </button>
            </div>
        </div>
    </form>
</div>

js代码

以及mvc控制器和模型类

 [HttpPost]      
    public ActionResult SaveEmployee(Employee employee)
    {           
        var list = _empManager.Add(employee);
        return Json(new {data= list });
    }

db first 方法生成的模型类

public partial class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string MiddleName { get; set; }
}

【问题讨论】：

传递一个员工的 json 对象，例如 vm.Employee = {'Id':1,'FirstName':'A','MiddleName':'B'};
在这种格式模型中与视图页面绑定，但 MVC 控制器没有获取对象值

标签： javascript angularjs model-view-controller

【解决方案1】：

像下面这样添加标题

var post = $http({
                method: "POST",
                url: "/Employee/SaveEmployee",
                dataType: 'json',
                data: {'Id':1,'FirstName':'A','MiddleName':'B'},
                headers: { "Content-Type": "application/json" }
            });

【讨论】：

【解决方案2】：

我找不到 ng-module 在 html 中定义的位置。下面仅提供示例代码

<html  ng-app="Employeemanagement">
<head>
  
</head>

<body  ng-controller="EmployeeController as vm">
  <label>Name :</label><input type="text" ng-model="ctrl.name" placeholder="Enter your name"/><br/><br/>  
 
    <span ng-bind="vm.message"></span> <span ng-bind="ctrl.name"></span><br/><br/>  
 
    <button ng-click="vm.changeMessage()"> Change Message </button>  
    <button ng-click="vm.resetMessage()"> Reset Message </button>  
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
    </script>  
    <script>

      angular.module('Employeemanagement', [])
      .controller('EmployeeController', ['$http',function($http) {
          var vm = this;
          vm.name='';
          vm.message= 'Hello';
          vm.changeMessage = function() {
              vm.message = 'Bye';
          };
          vm.resetMessage = function() {
              vm.message = 'Hello';
          };
      vm.SaveEmployee = function(){
      alert('test');
        //here call $http.post method
     };
      vm.SaveEmployee();
      }]);
  </script>

  </body>
</html>

【讨论】：

_Layout.cshtml 页面中的 ng-module 并且还命中了 MVC 控制器