Post
Ask Question

Handling HTTP Post Request Method in AngularJS Frontend and C# Backend

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.


Similar Articles