CODEWITHSUNDEEP
angularjshttppostmodel-view-controller
Rui Martins
Rui Martins

Reputation: 2184

Http post in angularjs sends empty object

I'm learning AngularJS and I've been trying to send data from a controller using $http.post to a web api, but I keep getting empty data. Any idea why? Tks in advance

This is my angular code 

<!doctype html>
<html>
<head>
    <title>Product Add</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="ProductAdd">
    <script>
        var app = angular.module('ProductAdd', []);

        app.controller('ProductAddController', ['$scope', '$http', function ($scope, $http) {
            $scope.submit = function () {
                if ($scope.Name) {
                    var product = {
                        "Name": $scope.Name,
                        "Category": $scope.Category,
                        "Price": $scope.Price
                    }

                    $http.post('http://localhost:1110/api/product', JSON.stringify(product)).
                        success(function () {
                            alert('Product Added Successfully');
                        }).
                        error(function () {
                            alert("erro");
                        });
                }
            };
        }]);
    </script>
    <h2>Add New Product</h2>
    <form ng-submit="submit()" ng-controller="ProductAddController">
        <div>Name:<input type="text" ng-model="Name" required></div><br />
        <div>Category:<input type="text" ng-model="Category" required> </div> <br />
        <div>Price:<input type="text" ng-model="Price"> </div> <br />
        <div> <input type="submit" id="productsubmit" value="Submit" /></div> <br />
    </form>
</body>
</html>

This is my Web Api controller code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;
using Product_API.Models;

namespace Product_API.Controllers
{
    [EnableCors("http://localhost:3442", "*","*")]
    public class ProductController : ApiController
    {

        public static Lazy<List<Product>> Products = new Lazy<List<Product>>();//Static variable use only for demo, don’t use unless until require in project. 
        public static int PgaeLoadFlag = 1; // Page load count. 
        public static int ProductId = 4;
        public ProductController()
        {
            if (PgaeLoadFlag == 1) //use this only for first time page load
            {
                //Three product added to display the data
                Products.Value.Add(new Product { ID = 1, Name = "bus", Category = "Toy", Price = 200 });
                Products.Value.Add(new Product { ID = 2, Name = "Car", Category = "Toy", Price = 300 });
                Products.Value.Add(new Product { ID = 3, Name = "robot", Category = "Toy", Price = 3000 });
                PgaeLoadFlag++;
            }
        }

        // GET api/product
        public List<Product> GetAllProducts() //get method
        {
            //Instedd of static variable you can use database resource to get the data and return to API
            return Products.Value; //return all the product list data
        }

        // GET api/product/5
        public IHttpActionResult GetProduct(int id)
        {
            Product product = Products.Value.FirstOrDefault(p => p.ID == id);
            return product == null ? (IHttpActionResult) NotFound() : Ok(product);
        }

        **// POST api/product
       [AcceptVerbs("OPTIONS")]
        public void ProductAdd(Product product) //post method
        {
            product.ID = ProductId;
            Products.Value.Add(product); 
            ProductId++;
        }**
    }
}

and this is my model

namespace Product_API.Models
{
    public class Product
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public int Price { get; set; }
    }
}

Upvotes: 0

Views: 1378

Answers (1)

Alon Eitan
Alon Eitan

Reputation: 12025

Just don't stringify your object:

$http.post('http://localhost:1110/api/product', product)

Upvotes: 1

Related Questions