使用angular将表单发布到ASP.NET MVC ActionMethod(Use angular to post form to ASP.NET MVC ActionMethod)
我正在尝试使用angularjs将ASP.NET MVC表单自动发回服务器。 当字段达到特定数量的字符并经过验证时，表单将自动发回我创建的ActionResult方法。
问题：是否可以使用angular发送表单帖子到Receiving方法并在验证后自动发送表单？ 我可以使用MVC帮助程序进行验证。
@model model.example @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal" ng-app="receiveApp" data-ng-submit="sendForm()" , data-ng-controller="breakDownController"> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Id, new { @class = "control-label col-xs-12 col-sm-2" }) <div class="col-sm-10"> @Html.EditorFor(model => model.PId, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Uid, new { @class = "control-label col-xs-12 col-sm-2" }) <div class="col-sm-10"> @Html.EditorFor(model => model.Uid, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Uid, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.LId, new { @class = "control-label col-xs-12 col-sm-2" }) <div class="col-sm-10"> @Html.EditorFor(model => model.LId, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.LId, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" value=@Resources.Receive class="btn btn-default" /> @Html.ActionLink(Resources.ClearButton, "Receive", null, new { @class = "btn btn-default" }) </div> </div> </div> }使用Javascript
var App = angular.module('App', []); App.controller('testController', ['$scope', '$http', function ($scope, $http) { $scope.model = {}; $scope.sendForm = function () { $http({ method: 'POST', url: '@Url.Action("Receive")', data: $scope.model }).success(function(data,status,headers,config){ }).error(function(data,status,headers,config){ }); }; }]);I'm trying to get an ASP.NET MVC form to auto post back to the server using angularjs. When a field reaches a specific amount of characters and is validated, the form will auto send back the ActionResult method I created.
Question: Is it possible to send a form post to the Receiving method with angular and auto send the form after it has been validated? Can I use the MVC helpers to validate.
@model model.example @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal" ng-app="receiveApp" data-ng-submit="sendForm()" , data-ng-controller="breakDownController"> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.Id, new { @class = "control-label col-xs-12 col-sm-2" }) <div class="col-sm-10"> @Html.EditorFor(model => model.PId, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Uid, new { @class = "control-label col-xs-12 col-sm-2" }) <div class="col-sm-10"> @Html.EditorFor(model => model.Uid, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Uid, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.LId, new { @class = "control-label col-xs-12 col-sm-2" }) <div class="col-sm-10"> @Html.EditorFor(model => model.LId, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.LId, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" value=@Resources.Receive class="btn btn-default" /> @Html.ActionLink(Resources.ClearButton, "Receive", null, new { @class = "btn btn-default" }) </div> </div> </div> }Javascript
var App = angular.module('App', []); App.controller('testController', ['$scope', '$http', function ($scope, $http) { $scope.model = {}; $scope.sendForm = function () { $http({ method: 'POST', url: '@Url.Action("Receive")', data: $scope.model }).success(function(data,status,headers,config){ }).error(function(data,status,headers,config){ }); }; }]);最满意答案
我认为这会有所帮助
angular.module('formExample', [])
.controller('FormController', ['$scope',
function($scope) {
$scope.userType = 'samo';
$scope.email = "samo@gmail.com"
$scope.$watch(function() {
if ($scope.myForm.$valid) {
submitted()
}
});
function submitted() {
console.log("Form submited");
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body ng-app="formExample">
<form name="myForm" ng-controller="FormController" class="my-form">
userType:
<input name="input" ng-model="userType" required>
<input type="email" ng-model="email" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span>
<br>
</form>
</body>
</html>
I think this will help
angular.module('formExample', [])
.controller('FormController', ['$scope',
function($scope) {
$scope.userType = 'samo';
$scope.email = "samo@gmail.com"
$scope.$watch(function() {
if ($scope.myForm.$valid) {
submitted()
}
});
function submitted() {
console.log("Form submited");
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body ng-app="formExample">
<form name="myForm" ng-controller="FormController" class="my-form">
userType:
<input name="input" ng-model="userType" required>
<input type="email" ng-model="email" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span>
<br>
</form>
</body>
</html>
更多推荐
发布评论