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

Question

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.

Federico Dipuma · Accepted Answer · 2016-04-12 18:10:58Z

2

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.

answered Apr 12, 2016 at 18:10

Federico Dipuma

18.4k4 gold badges44 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Over a year ago

Though I not getting an error now, the route is still redirecting me to original web api get method. When I click the hyper link column , I need to actually trigger the Get (int) webapi method instead.

Tom Over a year ago

I changed the url: "/products/:Id" to url: "/products/:id" in the state declaration and it gets fired now. But both are getting called. First the Get(int i ) gets called and then the Get()

Tom Over a year ago

Do I need to add an additiional function in my productResource.js file

Federico Dipuma Over a year ago

It's impossible to help you further with just the code you posted. There could be an issue with your controllers or with your views.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related