AngularJS – A Simple Form Submission

HTML Part –

        <form ng-submit="processForm()">
            <input type="text" name="loginName" ng-model="formData.loginName" />
            <input type="password" name="loginPassword" ng-model="formData.loginPassword" />
            <input type="submit" class="button" value="Submit" />
        </form>

JavaScript Part-

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
   var formApp = angular.module('formApp', []);
   function formController($scope, $http) {
      // create a blank object to hold our form information
      // $scope will allow this to pass between controller and view
      $scope.formData = {};

      // process the form
      $scope.processForm = function () {
      $http({
           method: 'POST',
           url: '/Admin/ProcessLogin',
           data: $.param($scope.formData),  // pass in data as strings
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
            })
            .success(function (response) {
                 console.log(response);
                 if (response.result=="success") {
                      if (response.loginresult == "failed") {
                          alert(response.message);
                      }
                      else {
                            window.location = response.redirecturl;
                      }
                 }

                });
            };
        }

    </script>

Server-side Part-

public JsonResult ProcessLogin(String loginName, String loginPassword)
{
    return Json(new { result = "success", loginresult = "success", redirecturl = "/Admin/AdminHome"}, JsonRequestBehavior.AllowGet);
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s