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.
I am really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you modify it yourself? Anyway keep up the nice quality writing, it is rare to see a great blog like this one nowadays..
When I initially commented I clicked the -Notify me when new feedback are added- checkbox and now every time a remark is added I get 4 emails with the identical comment. Is there any method you can take away me from that service? Thanks!