gpt4 book ai didi

javascript - 如何处理来自复杂 Angular.js Web 表单的提交数据

转载 作者:行者123 更新时间:2023-11-28 00:25:24 25 4
gpt4 key购买 nike

我的 Web 表单(使用 Bootstrap 3 和 Angular.js 1.3 构建)很长且稍微动态。换句话说,有一些表格排列的输入字段和其他常规输入字段具有关联的“添加另一个”按钮的情况,以及一些根据前面字段中的输入或选择进行切换(隐藏/显示)的输入字段。在 Controller 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 对象。

最佳答案

首先,您可以使用 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
}

关于javascript - 如何处理来自复杂 Angular.js Web 表单的提交数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29569350/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com