Online: 7818
Online: 7818
Online: 7818
In the previous post, we learnt how to send data to server using HttpPost method. In this post, we shall learn how to update data on server by sending HttpPut method using AngularJS.
The syntax for $http service methods of AngularJS has changed since v1.4.8.
Syntax for AngularJS v1.3.20
$http.put(url, data, config)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
Parameters are
Syntax for AngularJS v1.4.8 + (v1.5.0)
$http.put(url, data, config)
.then(
function(response){
// success callback
},
function(response){
// failure callback
}
);
The response object has following properties
Important:
Please note that we will be using ASP.NET MVC Web API in order to send the data to the server side. We will also use jQuery to convert the JSON object to HTTP form data.
In below <script> block, we have created a function named "UpdateData" that gets the data from text boxes on the page and convert it into html form data by using $.param (jQuery function).
The way of sending data to server using $http.put method is little different than post or get, here we are sending the html form data as a querystring that is why we are appending the data variable with the url separated by "?". The .success and .error function remains as it is in the previous posts.
<script>
var myApp = angular.module("myApp", []);
myApp.controller("HttpPutController", function ($scope, $http) {
$scope.UpdateData = function () {
var data = $.param({
firstName: $scope.firstName,
lastName: $scope.lastName,
age: $scope.age
});
$http.put('/api/Default?'+ data)
.success(function (data, status, headers) {
$scope.ServerResponse = data;
})
.error(function (data, status, header, config) {
$scope.ServerResponse = htmlDecode("Data: " + data +
"\n\n\n\nstatus: " + status +
"\n\n\n\nheaders: " + header +
"\n\n\n\nconfig: " + config);
});
};
});
</script>
In the HTML block below, we have three text boxes with respective ng-model and a Submit button. Clicking on Submit button submits the data that calls "UpdateData()" function.
<div ng-app="myApp" ng-controller="HttpPutController">
<h2>AngularJS Put request </h2>
<form ng-submit="UpdateData()">
<p>First Name: <input type="text" name="firstName" ng-model="firstName" required /></p>
<p>Last Name: <input type="text" name="lastName" ng-model="lastName" required /></p>
<p>Age : <input type="number" name="age" ng-model="age" required /></p>
<input type="submit" value="Submit" />
<hr />
{{ ServerResponse }}
</form>
</div>
ASP.NET Web API Controller action method
In this action method, we simply receive all form data coming as querystring in the form of parameters of the method and creates a message that is returned along with the response.
public class DefaultController : ApiController
{
public HttpResponseMessage PutDataResponse(string firstName, string lastName, int age)
{
string msg = "Updated: First name: " + firstName +
" | Last name: " + lastName +
" | Age: " + age;
return Request.CreateResponse(HttpStatusCode.OK, msg);
}
The $http.put method sends "PUT" type of request on the server that matches the action method declared in the Web API controller (Notice that the method name starts with "Put...").
Output
Very Important
If you try to send the PUT request to ASP.NET MVC action method with [HttpPut] attribute, it doesn't work because by default ASP.NET MVC web.config doesn't allow HttpPut and HttpDelete request verb, to change that please use following code in web.config.
<system.webServer>
<modules>
<remove name="FormsAuthentication" />
</modules>
<handlers>
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
Notice the bold code snippet above. This allows all types of request verbs to the server hence this works.
