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; }
}
}