How to PUT Json Object to Webapi method using AngularJs and WebAPI?

Rajnilari2015
Posted by Rajnilari2015 under AngularJS category on | Points: 40 | Views : 241
index.html
-------------

<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js">
</script>
<script>
var app = angular.module("testApp", []);
app.controller("testCtrl", function ($scope, $http) {

$scope.sendJSonData = function () {

var album = {
AlbumName: "PowerAge",
Entered: "1/1/1977"
};

$http.put('http://localhost:22900/Album/AlbumRecords', album)
.success(function (data, status, headers, config) {
$scope.serverResponse = data;
})
.error(function (data, status, header, config) {
alert(status);
});
};

});
</script>

</head>

<body ng-app="testApp">
<div ng-controller="testCtrl">
<button ng-click="sendJSonData()">Submit</button>
<p>{{ serverResponse }}</p>
</div>
</body>
</html>


WebAPI
-------------

using System;
using System.Collections.Generic;
using System.Web.Http;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
[RoutePrefix("Album")]
public class AlbumController : ApiController
{
[Route("AlbumRecords")]
[HttpPut]
public string PostAlbumRecords([FromBody]Album album)
{
var record = album;
return "server response" + " AlbumName : " + record.AlbumName + " Entered: " + record.Entered;
}
}

public class Album
{
public string AlbumName { get; set; }
public DateTime Entered { get; set; }
}
}

Comments or Responses

Login to post response