CODEWITHSUNDEEP
angularjsasp.net-mvc-4asp.net-web-api
Tom
Tom

Reputation: 8681

AngularJS application not calling the right webapi method and not displaying the right html page

Hi I am basically creating an AngularJS application that is making WebAPI calls. I have created a screen that lists all the products with help of WebApi Call. I have created a hyperlink column , when clicked should lead to details page. Whenever I click the hyperlink the original WebAPI Get method is called and not the one that should be ideally called for the details page. I am not sure what the problem is . My routing is absolutely fine. All my route states are defined properly.Below is the code.

Code in app.js. This is the file where my route states are defined.

  .state("productList", {
                            url: "/products",
                            templateUrl: "/products/productListView.html",
                            controller: "ProductListCtrl as vm"
                        })

 .state("productDetail", {
                            url: "/products/:Id",
                            templateUrl: "/products/productDetailView.html",
                            controller: "ProductDetailCtrl as vm",
                            resolve: {
                                productResource: "productResource",
                                product: function(productResource, $stateParams) {
                                    var productId = $stateParams.Id;
                                    return productResource.get({ productId: productId }).$promise;
                                }
                            }
                        });

The productResource.js file

(function () {

    angular
        .module("common.services")
        .factory("productResource",
        ["$resource", productResource]);

    function productResource($resource) {
        return $resource("/api/products/:id",
            {

                query: {
                    method: 'GET',
                    isArray: true
                }
            });
    }
}());

The webAPI methods in ProductController.cs file

 public class ProductsController : ApiController
    {
        private IProductProvider _productProvider;

        public ProductsController(IProductProvider productProvider)
        {
            this._productProvider = productProvider;
        }

        // GET: Porducts
        public IEnumerable<Products> Get()
        {
           return _productProvider.GetProductData();
        }

        public Products Get(int id)
        {
            var product = _productProvider.GetProductData();

            var products = product.FirstOrDefault((p) => p.Id == id);
            return products;
        }
    }

Could somebody tell me what the problem is ? Ideally what I need is when the user clicks the hyperlink column, the productDetails state should come into force and productDetailView.html should be displayed. Also the public Products Get(int id) WebApi method should be called.

Upvotes: 1

Views: 500

Answers (1)

Federico Dipuma
Federico Dipuma

Reputation: 18265

Your route parameter is defined as id:

$resource("/api/products/:id",
        {

            query: {
                method: 'GET',
                isArray: true
            }
        });

but you are passing an object with productId as key

productResource.get({ productId: productId })

Change the parameters object to this:

productResource.get({ id: productId })

Remember to always check your browser console for any HTTP response error if you need to debug URI related issues.

Upvotes: 2

Related Questions