HTML/AngularJS Frontend
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>POST Request Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<h1>POST Request Example</h1>
<form ng-submit="postData()">
<label for="name">Name:</label>
<input type="text" id="name" ng-model="formData.name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" ng-model="formData.email" required>
<br><br>
<button type="submit">Submit</button>
</form>
<p ng-if="response">{{ response }}</p>
</div>
</body>
</html>
AngularJS Frontend (JavaScript)
angular.module('myApp', [])
.controller('myController', function ($scope, $http) {
$scope.formData = {};
$scope.postData = function () {
$http.post('https://HttpMethods/api/postdata', $scope.formData)
.then(function (response) {
$scope.response = "Data sent successfully!";
})
.catch(function (error) {
console.error('Error:', error);
});
};
});
C# Backend (Controller using ASP.NET Web API)
using System.Web.Http;
namespace HttpMethods.Controllers
{
public class DataController : ApiController
{
[Route("api/postdata")]
[HttpPost]
public IHttpActionResult PostData([FromBody] FormData formData)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
try
{
var newData = new FormData
{
Name = formData.Name,
Email = formData.Email
};
db.FormDatas.Add(newData);
db.SaveChanges();
return Ok("Data saved to the database successfully!");
}
catch (Exception ex)
{
return InternalServerError(ex);
}
}
}
public class FormData
{
public string Name { get; set; }
public string Email { get; set; }
}
}
Conclusion
In this scenario, the demonstration showcased the utilization of the POST method in an AngularJS frontend and a C# backend using ASP.NET Web API. The AngularJS application constructed a form to collect user data, which was then sent as a POST request to the C# backend API endpoint. The C# backend, configured with Entity Framework for database operations, received the incoming data, processed it, and stored it in a corresponding database table.