Hello Guys, in this tutorial I am going to show you how to post data in angular js to ASP.NET MVC controller.

Introduction:

In this tutorial, we will learn how to post data using Angular Js. We will use $http.post method to achieve this task.

Post Data

Syntax for $http.post is:

$http.post(url, data, config)

            .success(function (data, status, headers, config) {

            })

            .error(function (data, status, header, config) {

            });

Let’s each parameter in detail:

url – url to send request to.

data – data that need to send with url.

config – configuration to use while sending data

The response object has following properties

data – it can be either string or an object (inserted object)

status – HTTP status code.

headers – header information

config – configuration that was used to send a request.

statusText – response of HTTP status text

Let’s create an example that will post data using $http.post method. I am using ASP.NET MVC for creating this application. Just follow the steps to learn how to post data using $http.post.

Step 1- Open Visual Studio and create an ASP.NET MVC application with name AngularPostOperation.

Post Data

Step 2- Choose an empty template and click OK.

Post Data

Your application will look like this.

Post Data

Step 3- Right Click on Controller folder and add Controller with the name Home.

Post Data

Your HomeController will look like this.

Post Data

Step 4- Right Click on Index action method and a View with the name Index.

Post Data

Click on “Add” button.

Post Data

Step 5- Add the Following method in HomeController.

public ContentResult PostDataAngular()
{
return Content("First name: " + Request.Form["fName"] +
" | Last name: " + Request.Form["lName"]);
}

Step 6- Write following code in Index View.

@{
ViewBag.Title = "Index";
}
<html>
<head>
<title>
Angular Js Post Data operation
</title>
</head>
<body>
<div ng-app="app" ng-controller="HttpPostController">
<p>First Name: <input type="text" name="firstName" ng-model="firstName" required /></p>
<p>First Name: <input type="text" name="lastName" ng-model="lastName" required /></p>
<button ng-click="PostData()">Submit</button>
<hr />
{{ PostDataResponse }}
</div>
</body>
</html>

Step 7- Add following references to head section.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Step 8- Add following script to head section.

var app = angular.module("app", []);
app.controller("HttpPostController", function ($scope, $http) {

$scope.PostData = function () {
// use $.param jQuery function to serialize data from JSON
var data = $.param({
fName: $scope.firstName,
lName: $scope.lastName
});

var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}

$http.post('/Home/PostDataResponse', data, config)
.success(function (data, status, headers, config) {
$scope.PostDataResponse = data;
})
.error(function (data, status, header, config) {
$scope.ResponseDetails = "Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + header +
"<hr />config: " + config;
});
};

});

Here is the full code for Index View.

<!DOCTYPE html>
<html>
<head>
<title>Angular Js Post Data operation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


</head>
<body>

<script>
var app = angular.module("app", []);
app.controller("HttpPostController", function ($scope, $http) {

$scope.PostData = function () {
// use $.param jQuery function to serialize data from JSON
var data = $.param({
fName: $scope.firstName,
lName: $scope.lastName
});

var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}

$http.post('/Home/PostDataResponse', data, config)
.success(function (data, status, headers, config) {
$scope.PostDataResponse = data;
})
.error(function (data, status, header, config) {
$scope.ResponseDetails = "Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + header +
"<hr />config: " + config;
});
};

});
</script>
<div ng-app="app" ng-controller="HttpPostController">
<p>First Name: <input type="text" name="firstName" ng-model="firstName" required /></p>
<p>First Name: <input type="text" name="lastName" ng-model="lastName" required /></p>
<button ng-click="PostData()">Submit</button>
<hr />
{{ PostDataResponse }}
</div>
</body>
</html>

Run the application.

Post Data

You can download the complete source code of the application from here.

Hope you loved this post about Post Data using $http.post method in angular js.

You must also read the related links:

Hello World Angular Js Application.

Thank You.

109 Comments