Question

我在角度控制器中创建数组如下（示例）。

contacts: [{
   id: 1,
   name: "Ben",
   age: 28
}]

我想将此数组传递给表单提交上的MVC操作。任何人都可以让我知道如何做到这一点。示例将更有帮助。

Answer 1

如果你创建了这个你希望传递给控制器中后端的数组，这意味着在角度代码中，在表单提交上发送它并没有多大意义，我宁愿使用它进行AJAX调用$ http对象。

但是，如果您想要添加一些数据，请执行以下操作：

<script>
  angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', '$http', function($scope, $http) {
     var contacts = [{
                  id: 1,
                  name: "Ben",
                  age: 28
                }];
      $scope.submit = function() {
        $http.post("/route/to/your/controller/action", 
                   {
                         contacts: contacts
                   }).success(function(data, status) {
               // handle result
         })
      };
    }]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
</form>

Answer 2

您可以使用$http服务进行ajax调用以发送数据。如果要重定向到新视图，可以使用$window对象。

var myCtrl = function ($scope, $http, $window) {

    var vm = this;

    vm.saveItem = function () {

        var contacts = [{ id: 1, name: "Ben", age: 28 }];

        $http.post("../Contacts/Save", contacts)
        .then(function (res) {
            var r = res.data;           
            if (r.status === "success") {
                $window.location.href = r.newUrl;
            }
            else {
                alert("Some error");
            }
        });
    };


};
myCtrl.inject = ['$scope', '$http'];
angular.module("MyApp", []).controller("myCtrl", myCtrl);

假设你是从

这样的页面调用它

<div  ng-app="MyApp" ng-controller="myCtrlas vm">
    <button type="button" ng-click="vm.saveItem()">Save</button>
</div>

确保返回一个具有success和newUrl属性的JSON对象，我们的客户端代码将查找这些属性，

[HttpPost]
public ActionResult Save(IEnumerable<UserViewModel> users)
{
   // to do  :Do something with the posted data.
    var url = new UrlHelper(HttpContext.Request.RequestContext);
    var t =url.Action("Success", "Contacts");
    var res = new { status = "success", newUrl = t };
    return Json(res);
}

UserViewModel看起来像

public class UserViewModel
{
    public int Id { set; get; }
    public string Name { set; get; }
    public int Age { set; get; }
}

这是一个有效的解决方案。但您可以考虑将服务器调用代码移动到角度data service并将其注入控制器，而不是直接在控制器中使用$http。

看看angular style guide。接下来将使您的角度代码清洁和高效，

将数据从Angular控制器传递到提交按钮上的MVC操作

2 个答案: