AngularJS Anwendung ruft nicht die richtige Webapi-Methode und nicht die richtige HTML-Seite anzeigen

Question

Hallo Ich bin im Grunde erstellen eine AngularJS-Anwendung, die WebAPI-Aufrufe macht. Ich habe einen Bildschirm erstellt, der alle Produkte mit Hilfe von WebApi Call auflistet. Ich habe eine Hyperlink-Spalte erstellt, wenn Sie auf die Detailseite klicken. Immer wenn ich auf den Hyperlink klicke, wird die ursprüngliche WebAPI-Get-Methode aufgerufen und nicht diejenige, die idealerweise für die Detailseite aufgerufen werden soll. Ich bin mir nicht sicher, was das Problem ist. Mein Routing ist absolut in Ordnung. Alle meine Routenzustände sind richtig definiert. Unten ist der Code.

Code in app.js. Dies ist die Datei, in der meine Routenzustände definiert sind.

.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; 
           } 
          } 
         }); 

Die productResource.js Datei

(function() { 

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

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

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

Die WebAPI Methoden in ProductController.cs Datei

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; 
     } 
    } 

Könnte mir jemand sagen, was das Problem ist? Idealerweise benötige ich, wenn der Benutzer auf die Hyperlinkspalte klickt, der Status productDetails sollte in Kraft treten und productDetailView.html sollte angezeigt werden. Außerdem sollte die öffentliche WebApi-Methode Get (int id) aufgerufen werden.

Answer 1

Ihre Route Parameter wie id definiert:

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

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

aber Sie übergeben ein Objekt mit productId als Schlüssel

productResource.get({ productId: productId }) 

Objekt ändern sich die Parameter dazu:

productResource.get({ id: productId }) 

Denken Sie daran, Ihre Browser-Konsole immer auf HTTP zu überprüfen sponse Fehler, wenn Sie URI-Probleme debuggen müssen.