I am exploring how to make an ASP.NET MVC form automatically post back to the server using angularjs. The idea is that when a field reaches a certain number of characters and passes validation, the form will automatically submit the ActionResult method that I have set up.
Question: Can I utilize angular to send a form post to the receiving method and automatically submit the form after validation? Is it possible to incorporate MVC helpers for validation?
@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" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d3c4c9d0c098e5f7c0d6cad0d7c6c0d68bf7c0c6c0ccd3c0">[email protected]</a> 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){
});
};
}]);