使用angular将表单发布到ASP.NET MVC ActionMethod
Use angular to post form to ASP.NET MVC ActionMethod
我正在尝试使用angularjs将ASP.NET MVC表单自动发布回服务器。当一个字段达到特定的字符数并得到验证时,表单将自动发回我创建的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>
}
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>
相关文章:
- 借助asp.net验证或java脚本对多个文本进行验证
- 将Javascript数组发送到控制器ASP.NET MVC
- ASP.NET通过单击JavaScript按钮触发c#事件
- 文本框不是从Javascript/Asp.net中的对话框中打印出来的
- 从javascript调用asp.net codebehind函数
- 使用javascript的Asp.net内容占位符
- 获取ASP.NET Ajax Timer状态
- ASP.NET网络摄像头显示
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 如何将乳胶配方奶粉图像保存到Asp.net中的文件夹中
- asp.net,包括iss上的javascript slow
- 选择不在GridView-ASP.NET中激发
- 什么'是在asp.net MVC中将本地化的resources.resx文件转换为javascript文件的有效
- 使用ASP.NET将谷歌地图添加到项目中,并从数据库中检索位置
- 有什么“;错误的”;将javascript放在asp.net表单上,而不是放在单独的文件中
- 将Javascript日期转换为ASP.NET日期格式
- C#asp.net mvc Set CheckBoxFor已检查的具有Model Value的属性
- 在asp.net中确认是或否消息
- ASP.NET MVC 3-在ajax调用后,重定向到新页面或生成页面刷新
- asp.net中的验证工具