如何处理来自复杂 Angular.js 网络表单的提交数据

Question

我的网络表单（使用 Bootstrap 3 和 Angular.js 1.3 构建）冗长且略显动态。换句话说，有一些表格排列的输入字段和其他带有关联 "Add another" 按钮的常规输入字段，以及一些根据输入或选择切换 (hide/show) 的输入字段在前面的字段中。在控制器 JS 中，我在范围内设置了一个对象来保存所有表单数据，如下所示：

// Angular.js controller function
$scope.formData = {};

在表单的 HTML 中，我支持所有字段 ng-model 如下：

<html data-ng-app="formApp">
  <body>
    <form class="form form-horizontal" data-ng-controller="formController">
      <div class="form-group">
        <label class="control-label" for="username">Username</label>
        <input type="text" name="username" data-ng-model="formData.username" class="form-control" data-ng-minlength="3" data-ng-maxlength="8" required>
      </div>
    </form>
  </body>
</html>

所以在填写表格时，$scope.formData 将具有以下结构：

$scope.formData =>

  { "username": "jdoe",
    "roles": [
      "Employee", "Lead Engineer", "Coordinator"
    ],
    "location": "Palo Alo, CA",
    "and so": "on..."
  }

我想使用 $http 将数据异步 post 到 ASP.NET 通用 HTTP 处理程序，它将处理表单提交并以 JSON 格式回复。 post 数据的推荐方法是什么？当我使用 JSON.parse($scope.formData) 时，对象被分解为单独的请求参数，而不是作为单个对象提交。如果我确实将对象作为单个对象处理，我该如何处理表单提交的数据？理想情况下，我想将整个 formData 对象转换为我可以在服务器端使用的 C# DTO 对象。

Answer 1

首先，您可以使用 post 方法提交您的 $scope.formData，就像使用 $http() 一样，然后在服务器端，您可以使用 Newtonsoft [=13] 反序列化您的请求数据=]

也许会做这样的事情

fromData =  JSON.stringify($scope.formData)

$http.post('/someUrl', {fromData:  fromData})
.success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

服务器会是这样的

public HttpResponseMessage Post(string jsonstring)
{
     GenerForm frm = JsonConvert.DeserializeObject<GenerForm>(json);
     string username = frm.username;      
}

//你需要定义class

class GenerForm {
    string username {get;set;};
    List<string> roles {get; set;};
    List<string> location {get; set;};
    // and so on
 }

如何处理来自复杂 Angular.js 网络表单的提交数据

How to process submit data from complex Angular.js web form

javascript

jquery

ajax

angularjs

form-submit