http post not call the ASP.NET MVC action

Question

I am new to angular js. I am trying to pass form data to action but its not working, it doesn't give any error to me. please help me.

below is my js file

var aboutmeApp = angular.module('aboutmeApp', ['ui.router']);

var configFunction = function ($stateProvider, $httpProvider, $locationProvider) {
    $locationProvider.hashPrefix('!').html5Mode(true);

    $stateProvider
    .state('Default', {
        url: '/',
        views: {
                "aboutmeview": {
                templateUrl: 'Home/Home'
            }
        }
    })
    .state('Home', {
        url: '/Home',
        views: {
            "aboutmeview": {
                templateUrl:'/Home/Home'
            }
        }
    })

    .state('About', {
        url: '/About',
        views: {
            "aboutmeview": {
                templateUrl: '/Home/About'
            }
        }
    })
    .state('CV', {
        url: '/CV',
        views: {
            "aboutmeview": {
                templateUrl: '/Home/CV'
            }
        }
    })
    .state('Projects', {
        url: '/Projects',
        views: {
            "aboutmeview": {
                templateUrl: '/Home/Projects'
            }
        }
    })
    .state('Blog', {
        url: '/Blog',
        views: {
            "aboutmeview": {
                templateUrl: '/Home/Blog'
            }
        }
    })
     .state('Contact', {
         url: '/Contact',
         views: {
             "aboutmeview": {
                 templateUrl: '/Home/Contact'
             }
         }
     });

}
configFunction.$inject = ['$stateProvider', '$httpProvider', '$locationProvider'];
aboutmeApp.config(configFunction);

aboutmeApp.controller("ContactController", function ($scope,$http) {

    $scope.alphabet = /^[A-z]+$/;

   // $scope.emailaddress = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

    $scope.submitForm = function () {
debugger
        // check to make sure the form is completely valid
        $http({
            method: "POST",
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            url: "/Home/Sendmail"


        });



    };

});

cshtml file

html

<--form name="myForm"  ng-controller="ContactController" ng-class="{true:'error'}[submitted]" ng-submit="submitForm()">

        <p class=" username">
            <input type="text" name="user" ng-model="user" placeholder="NAME" required ng-pattern="alphabet" oninvalid="this.setCustomValidity('Please Enter UserName')" oninput="setCustomValidity('')" />
            <label for="name">Name</label>
            <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                <span ng-show="myForm.user.$error.required">Username is required.</span>
            </span>
            <span style="color:red" class="error" ng-show="myForm.user.$error.pattern">
                Alphabets only
            </span>
        </p><br />

        <p class="mails">
            <input type="email" name="email" id="email" ng-model="email" placeholder="EMAIL" required oninvalid="this.setCustomValidity('Please Enter Email')" oninput="setCustomValidity('')" style="background-color:white" />
            <label for="mails">Email</label>
            <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <span ng-show="myForm.email.$error.required">Email is required.</span>
                <span ng-show="myForm.email.$error.email">Invalid email address.</span>
            </span>
        </p><br />

        <p class="web">
            <input type="text" name="web" id="web" placeholder="SUBJECT" />
            <label for="web">Subject</label>
        </p><br />

        <p class="text">
            <textarea name="text" placeholder="WRITE SOMETHING TO ME" />
        </p><br />

        <p class="submit">
            <input type="submit" value="Send" ng-click="submitted=true" />
        </p>



    </form>

Answer 1

You are not passing any data to your post action, simply do pass it through the post, And for more better code I'll create one model object that will hold all the value of form, and post it to the server side action.

HTML

<form name="myForm" ng-controller="ContactController" ng-class="{true:'error'}[submitted]" ng-submit="submitForm(model)">
    <p class=" username">
        <input type="text" name="user" ng-model="model.user" placeholder="NAME" required ng-pattern="alphabet" oninvalid="this.setCustomValidity('Please Enter UserName')" oninput="setCustomValidity('')" />
        <label for="name">Name</label>
        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                <span ng-show="myForm.user.$error.required">Username is required.</span>
        </span>
        <span style="color:red" class="error" ng-show="myForm.user.$error.pattern">
                Alphabets only
            </span>
    </p>
    <br />
    <p class="mails">
        <input type="email" name="email" id="email" ng-model="model.email" placeholder="EMAIL" required oninvalid="this.setCustomValidity('Please Enter Email')" oninput="setCustomValidity('')" style="background-color:white" />
        <label for="mails">Email</label>
        <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <span ng-show="myForm.email.$error.required">Email is required.</span>
        <span ng-show="myForm.email.$error.email">Invalid email address.</span>
        </span>
    </p>
    <br />

    <p class="web">
        <input type="text" name="model.web" id="web" placeholder="SUBJECT" />
        <label for="web">Subject</label>
    </p>
    <br />

    <p class="text">
        <textarea name="text" ng-model="model.comment" placeholder="WRITE SOMETHING TO ME" />
    </p>
    <br />

    <p class="submit">
        <input type="submit" value="Send" ng-click="submitted=true" />
    </p>

</form>

Code

aboutmeApp.controller("ContactController", function($scope, $http) {
    $scope.alphabet = /^[A-z]+$/;
    $scope.model = {};
    // $scope.emailaddress = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
    $scope.submitForm = function(mdoel) {
        // check to make sure the form is completely valid
        $http({
            method: "POST",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            url: "/Home/Sendmail",
            data: {
                mdoel: mdoel
            }
        });
    };
});