Angularjs – les actions du contrôleur ne fonctionnent pas

Désolé si je fais quelque chose de mal, je suis nouveau ici ^

Je travaille régulièrement sur un projet d'école en construisant un site Web utilisant MVC. J'ai essayé de charger des objets à partir d'une base de données en utilisant Json object et angularJS.

J'ai une action dans un contoller appelé "GetProductsByJson", il renvoie un objet Json contenant une liste de produits. C'est l'action:

public ActionResult GetProductsByJson() { HomeModel homeModel = new HomeModel(); DataLayer prodDal = new DataLayer(); homeModel.productList = prodDal.Products.ToList<Product>(); return Json(homeModel.productList,JsonRequestBehavior.AllowGet); }

L'action elle-même fonctionne bien (je l'ai testé individuellement) mais quand j'essaie de l'utiliser dans le script angulaire, il ne fonctionne que pas (il ne passe même pas dans la méthode).

C'est le script angulaire:

 <script> var app = angular.module("myProduct", []); app.controller("ProductViewModel", function ($scope,$http) { $scope.Product = { "prodName": "", "price": "", "amount": "", "serial": "", "lastUpdate": "", "pic": "" }; $scope.Products = {}; $scope.LoadProducts = function () { //load data from the server debugger $http({ method: "GET", url: "LoadProducts" }). success(function (data, status, headers, config) { $scope.Products = data; }); }; $scope.LoadProducts(); }); </script>

J'ai essayé de rouler l'action dans RouteConfig mais rien ne fonctionne.

Ok je suis vraiment désolé pour le problème de problème résolu.

J'ai dû insérer l'URL complète de l'action en appart.

Je pense que vous obtenez une erreur 404 lorsque votre code angulaire tente d'effectuer l'appel asynchrone dans votre méthode d'action car le chemin relatif que vous avez donné à la méthode d'action n'est pas correct.

Ce n'est pas une bonne idée de hardcore votre URL dans votre javascript comme celui-ci. Yo devrait utiliser les méthodes d'aide Url.Content() ou Url.RouteUrl() dans votre vue de rasoir pour générer l'URL relative à la racine de l'application. Il prendra soin de construire correctement l'URL indépendamment de votre page / chemin d'accès. Une fois que vous obtenez cette valeur, vous pouvez la transmettre à votre contrôleur angulaire à l'aide du fournisseur de value angulaires.

Donc, dans votre vue de rasoir (fichier de mise en page ou votre point de vue spécifique), vous pouvez le faire.

 <script> var myApp = myApp || {}; myApp.Urls = myApp.Urls || {}; myApp.Urls.baseUrl = '@Url.Content("~")'; </script> <script src="~/Scripts/AngularControllerForPage.js"></script> <script> var a = angular.module("myProduct").value("appSettings", myApp); </script>

Et dans vos contrôleurs angulaires ( dans le AngularControllerForPage.js file externe AngularControllerForPage.js file ), vous pouvez l'accéder comme,

 var app = angular.module("myProduct", []); var ctrl = function (appSettings,$http) { var vm = this; vm.products = []; vm.baseUrl = appSettings.Urls.baseUrl; //build other urls using the base url now var loadProductsUrl = vm.baseUrl + "YourControllerNameHere/GetProductsByJson"; console.log(loadProductsUrl); // now you can use loadProductsUrl to make the $http call $http.get(loadProductsUrl).then(function(response) { vm.products=response.data; } }; ctrl.inject=['$http']; app.controller("ProductViewModel", ctrl);

Vous pouvez voir que j'accepte la réponse dans l'événement then() du service $http . De plus, le code du contrôleur ci-dessus est écrit de manière à supporter le controller As syntaxe suggérée par john papa dans son guide de style angulaire . Donc, à votre avis, vous y accédez comme

 <div ng-app="myProduct" ng-controller="ProductViewModel as vm"> <h1>{{vm.products.length}} Items</h1> </div>