[英]Use angular to post form to ASP.NET MVC ActionMethod
我正在尝试获取一个ASP.NET MVC表单,以使用angularjs自动回发到服务器。 当字段达到特定数量的字符并经过验证时,该表单将自动发送回我创建的ActionResult方法。
问题:是否可以通过角度将表单过帐发送到“接收”方法,并在表单被验证后自动发送? 我可以使用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>
}
Java脚本
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.