Question

对不起，如果我做错了我新来的＆＃39; ^^

我正在努力开发一个使用MVC构建网站的学校项目。我试图使用Json对象和angularJS从数据库加载对象。

我在一个名为＆＃34; GetProductsByJson＆＃34;的控制器中有一个动作。它返回一个包含产品列表的Json对象。这就是行动：

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

它自己运作良好的动作（我单独测试）但是当我试图在角度脚本中使用它时它只是不起作用（它甚至没有进入方法）。

这是角度脚本：

<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中路由动作，但没有任何作用。

好的我真的很抱歉解决了麻烦问题。

我必须大量插入动作的完整网址。

Answer 1

我认为当您的角度代码尝试对您的操作方法进行异步调用时，您会收到404错误，因为您为action方法提供的相对路径不正确。

在这样的javascript中硬编你的网址不是一个好主意。你应该在你的剃刀视图中使用Url.Content()或Url.RouteUrl()帮助器方法来生成应用程序根目录的相对URL。无论您当前的页面/路径如何，它都会正确构建网址。一旦获得此值，您就可以使用角度value提供程序将其传递给角度控制器。

因此，在您的剃刀视图（布局文件或您的特定视图）中，您可以执行此操作。

<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 file 中的）中，您可以像访问

一样访问它
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);

您可以看到我正在访问then() $http次controller As事件中的回复。此外，上述控制器代码的编写方式是为了支持john papa在angular styleguide中建议的<div ng-app="myProduct" ng-controller="ProductViewModel as vm"> <h1>{{vm.products.length}} Items</h1> </div>语法。因此，在您看来，您将像
一样访问它
{{1}}

angularjs - 控制器动作不起作用

1 个答案: