如何處理來自復雜 Angular.js Web 表單的提交數據

Question

我的 Web 表單（使用 Bootstrap 3 和 Angular.js 1.3 構建）冗長且動態。 換句話說，有一些表格排列的輸入字段和其他帶有關聯“添加另一個”按鈕的常規輸入字段的情況，以及一些根據前面字段中的輸入或選擇切換（隱藏/顯示）的輸入字段. 在控制器 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將數據異步發布到 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 個解決方案

解決方案1
1 已采納 2015-04-10 19:39:36

如何處理來自復雜 Angular.js Web 表單的提交數據

問題描述

1 個解決方案

解決方案1 1 已采納 2015-04-10 19:39:36

解決方案1
1 已采納 2015-04-10 19:39:36