angularjs - 控制器动作不工作 [英] angularjs - controller actions not working

问题描述

抱歉，如果即时通讯做错了什么即时通讯新这里的^^

sorry if im doing something wrong im new here '^^

IM有curently工作的一个学校项目建设使用MVC网站。
我尝试加载使用JSON对象，并angularJS从数据库对象。

im curently working on a school project building a website using MVC. im trying to load objects from a database using Json object and angularJS.

我有一个名为GetProductsByJson它返回一个包含一个产品列表的JSON对象位指示操作。这是动作：

i have an action in a contoller called "GetProductsByJson" it returns a Json object containing a list of products. this is the action:

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

动作它自身良好的工作（我测试了它individualy），但是当我尝试在角脚本中使用它它只是不工作（它甚至犯规进入法）。

the action it self works good (i tested it individualy) but when im trying to use it in the angular script its just not working (it doesnt even go into the method).

这是角脚本：

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

我试图路由在RouteConfig行动但没有任何工程。

i tried routing the action in the RouteConfig but nothing works.

确定IM的麻烦问题，实在不好意思解决了。

ok im really sorry for the trouble problem solved.

我不得不apperntly插入动作的完整URL。

i had to insert the full url of the action apperntly.

推荐答案

我觉得你得到时，你的角度code正在努力使异步调用到你的动作方法的404错误，因为你给的相对路径操作方法是不正确的。

I think you are getting a 404 error when your angular code is trying to make the asynchronous call to your action method because the relative path you gave to the action method is not correct.

这不是铁杆您的网址在JavaScript这样一个好主意。呦应该使用 Url.Content（）或 Url.RouteUrl（） helper方法在你的Razor视图生成相对URL到应用程序根目录。它会照顾你的，无论当前页/ path.Once你得到这个值的正确建立的网址，您可以使用角值提供商将它传递给你的角度控制器。

It is not a good idea to hardcore your url in your javascript like this. Yo should use the Url.Content() or Url.RouteUrl() helper methods in your razor view to generate the relative url to the app root. It will take care of correctly building the url regardless of your current page/path.Once you get this value, you can pass it to your angular controller using the angular value provider.

因此​​，在您的Razor视图（版式文件或特定视图），可以做到这一点。

So in your razor view (Layout file or your specific view), you may do this.

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

在你的角度控制器

和（外部 AngularControllerForPage.js文件 的），您可以访问它像

And in your angular controllers(in the external AngularControllerForPage.js file), you can access it like,

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

您可以看到，我访问了的响应，那么（） $ HTTP 服务的事件。此外，上面的控制器code是用这样的方式来支持控制器语法在他的角风格指南。因此，在你看来，你将访问它像

You can see that i am accessing the response in the then() event of $http service. Also the above controller code is written in such a way to to support the controller As syntax as suggested by john papa in his angular styleguide. So in your view ,you will access it like

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

这篇关于angularjs - 控制器动作不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！