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.
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.
Step 2- Choose an empty template and click OK.
Your application will look like this.
Step 3- Right Click on Controller folder and add Controller with the name Home.
Your HomeController will look like this.
Step 4- Right Click on Index action method and a View with the name Index.
Click on “Add” button.
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.
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.