通过AngularJS推送多个条目并保存到数据库中

通过AngularJS推送多个条目并保存到数据库中,angularjs,asp.net-mvc,entity-framework-6,Angularjs,Asp.net Mvc,Entity Framework 6,我无法将“$scope.arr”中推入的多行保存到SQL Server数据库中。下面是我的代码,它工作正常,但当我通过按“添加人”按钮添加/按下某些条目后单击“保存到数据库”按钮时,它会将一行空值传递到SQL Server数据库。请指导我在哪里犯错误: 我也听说过使用angular.forEach循环,但我也对使用它感到困惑 我在这里有我的模型类“TestModel.cs”: 我的MVC控制器名为TestController的Add方法: [HttpPost] public string Add

我无法将“$scope.arr”中推入的多行保存到SQL Server数据库中。下面是我的代码,它工作正常,但当我通过按“添加人”按钮添加/按下某些条目后单击“保存到数据库”按钮时,它会将一行空值传递到SQL Server数据库。请指导我在哪里犯错误:

我也听说过使用angular.forEach循环,但我也对使用它感到困惑

我在这里有我的模型类“TestModel.cs”:

我的MVC控制器名为TestController的Add方法:

[HttpPost]
public string AddPerson(TestModel test)
            using (TestContext db = new TestContext())
            {
                if (test != null)
                {
                    db.TestModels.Add(test);
                    db.SaveChanges();
                    return "Successful";
                }
                else
                {
                    return "Failed";
                }
            }
        }
我的AngularJS脚本如下:

var app = angular.module("TestApp", []);

app.controller("TestCtrl", function ($scope, TestService) {

    $scope.arr = [];

    $scope.addPerson = function () {
        var myobj = {
            FirstName: $scope.firstname,
            LastName: $scope.lastname
        }
        $scope.arr.push(myobj);
    };

    $scope.savePerson = function () {
        var TestData = TestService.AddPer($scope.arr);
        TestData.then(function (msg) {
            alert(msg.data);
        }, function () {
            alert('Error In Adding Person');
        });
    };

});

app.service("TestService", function ($http) {

    this.AddPer = function (person) {
        var response = $http({
            method: "post",
            url: "/Test/AddPerson",
            data: JSON.stringify(person),
            dataType: "json",
        });
        console.log(response);
        return response;
    }
});
以及我的Index.cshtml文件:

<div ng-controller="TestCtrl">
    <form>
        FirstName: <input class="form-control" ng-model="firstname" /><br />
        LastName: <input class="form-control" ng-model="lastname" /><br />
        <button class="btn btn-success" ng-click="addPerson()">Add Person</button>
        <button class="btn btn-success" ng-click="savePerson()">Save To DB</button>

        <table class="table table-bordered">
            <tr>
                <th>S. No</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr ng-repeat="a in arr">
                <td>{{$index+1}}</td>
                <td>{{a.FirstName}}</td>
                <td>{{a.LastName}}</td>
            </tr>
        </table>
    </form>
</div>

<script src="~/Scripts/MyAngular/Module.js"></script>

名字:
姓氏:
添加人 保存到数据库 美国号 名字 姓 {{$index+1}} {{a.FirstName}} {{a.LastName}

谢谢你的帮助。谢谢

那么服务器端操作应该期望收集
TestModel
,您可以在那里列出
列表。如果在参数之前
[FromBody]
,则在将数据发布到服务器之前不需要
字符串化

代码

[HttpPost]
public string AddPerson([FromBody] List<TestModel> test)
  using(TestContext db = new TestContext()) {
    test.forEach(t=> {
      if (t != null) {
          db.TestModels.Add(t);
          return "Successful";
      } else {
          return "Failed";
      }
    });
    db.SaveChanges(); //save context at the end, when no error occurs
  }
}
[HttpPost]
公共字符串AddPerson([FromBody]列表测试)
使用(TestContext db=newtestcontext()){
test.forEach(t=>{
如果(t!=null){
db.TestModels.Add(t);
返回“成功”;
}否则{
返回“失败”;
}
});
db.SaveChanges();//在没有错误发生时,在末尾保存上下文
}
}

问题出在我的服务器端代码中,即我的C#控制器,此方法有效:

[HttpPost]
        public void AddPerson(List<TestModel> test)
        {
            using (TestContext db = new TestContext())
            {
                foreach(var t in test) 
                {
                    if (t != null)
                    {
                        db.TestModels.Add(t);
                        Console.WriteLine("Success");
                    }
                }
                db.SaveChanges(); //save context at the end, when no error occurs
            }
        }
[HttpPost]
公共人员(列表测试)
{
使用(TestContext db=newtestcontext())
{
foreach(测试中的var t)
{
如果(t!=null)
{
db.TestModels.Add(t);
Console.WriteLine(“成功”);
}
}
db.SaveChanges();//在没有错误发生时,在末尾保存上下文
}
}

这项技术不起作用,但与此非常接近的一种方法起作用了,我这样做:[HttpPost]public void AddPerson(List test){使用(TestContext db=new TestContext()){foreach(var t in test){if(t!=null){db.TestModels.Add(t);Console.WriteLine(“Success”);}}}db.SaveChanges();//最后保存上下文,当没有错误发生时}您只更改了。forEach lambda改为simple forEach..我看不到其他更改..我认为我的答案是正确的..即使您写了您的:DYour的答案是完美的@Pankaj Parkar。但是我的Visual Studio没有加载程序集我不知道为什么:/反正感谢您的帮助:)我现在投票并接受了它。很抱歉迟到了!:D@RehanSiddiqui不问题。很高兴能帮助您。谢谢:-)
[HttpPost]
        public void AddPerson(List<TestModel> test)
        {
            using (TestContext db = new TestContext())
            {
                foreach(var t in test) 
                {
                    if (t != null)
                    {
                        db.TestModels.Add(t);
                        Console.WriteLine("Success");
                    }
                }
                db.SaveChanges(); //save context at the end, when no error occurs
            }
        }