current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 0 down vote favorite

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" [email protected] 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){
            });
        };
    }]);
share|improve this question
    
Cool, what is your question? :) – devqon Jan 12 at 15:44
up vote 0 down vote accepted

I think this will help

angular.module('formExample', [])
  .controller('FormController', ['$scope',
    function($scope) {
      $scope.userType = 'samo';
      $scope.email = "[email protected]"
      $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>

share|improve this answer
    
It worked thank you. – RuffWuff Jan 15 at 16:14
    
you are welcome – CodeBean Jan 16 at 5:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.