Question

我的网页表单（使用Bootstrap 3和Angular.js 1.3构建）冗长且温和动态。换句话说，有一些表格排列的输入字段和其他常规输入字段与关联的＆＃34;添加另一个＆＃34;按钮，以及根据前面字段中的输入或选择切换（隐藏/显示）的一些输入字段。在控制器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 =＆gt;

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

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

Answer 1

首先，您可以使用post方法使用$ http（）提交$ scope.formData，然后在服务器端使用Newtonsoft https://www.nuget.org/packages/Newtonsoft.Json/

将您的请求数据反序列化

也许会做这样的事情

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 GenerForm {
    string username {get;set;};
    List<string> roles {get; set;};
    List<string> location {get; set;};
    // and so on
 }

如何处理从复杂的Angular.js Web表单提交数据

1 个答案: