Zugriff auf fest codierte Daten in MVC-Controller mit Angularjs

Question

Ich habe etwas Wissen über Angularjs, aber ich bin neu in ASP.NET MVC. Also folgte ich diesem Tutorial https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api. Aber ich habe ein Problem, da es Jquery verwendet. Ich möchte auf die hartcodierten Daten im unteren Controller mit Angular zugreifen.

using ProductsApp.Models; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Web.Http; 

namespace ProductsApp.Controllers 
{ 
    public class ProductsController : ApiController 
    { 
     Product[] products = new Product[] 
     { 
      new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
      new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
      new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
     }; 

     public IEnumerable<Product> GetAllProducts() 
     { 
      return products; 
     } 

     public IHttpActionResult GetProduct(int id) 
     { 
      var product = products.FirstOrDefault((p) => p.Id == id); 
      if (product == null) 
      { 
       return NotFound(); 
      } 
      return Ok(product); 
     } 
    } 
} 

Ich möchte nur die Methode auf die Daten zugreifen.

Kann mir jemand dabei helfen. Danke

Answer 1

Verwenden Sie $http in Ihrem Dienst oder Controller von AngularJS für den Zugriff auf Daten von Ihrem Web-API. Zum Beispiel:

$http.get("http://localhost:8080/api/products/getallproducts") 
    .then(function(response) { 
     console.log(response.data); 
    }); 

Answer 2

Wenn das Schreiben WebAPI Anwendung dann müssen Sie den IHttpActionResult Namen ändern zu bekommen. und versuchen Sie diese URL:

localhost:8080/api/products/{id} 

* {id} ist optional.

Wenn Sie die Route verwenden möchten, sollten Sie WebApiConfig.cs im App_Start-Ordner ändern.

Answer 3

Werfen Sie einen Blick auf angularjs $http Dienst, der verwendet wird, um die Kommunikation mit dem http-Server in einer Situation wie Ihnen herzustellen.

GetAllProducts() aufzurufen, die $http, verwenden Sie die Route "api/products" wie diese

$http.get("api/products") 
    .then(function(response) { 
     console.log(response); 
}); 

Und GetProduct() die Strecke "api/products/1" wenn Ihr Produkt 1 gefällt dieses

$http.get("api/products/1") 
    .then(function(response) { 
     console.log(response); 
});