控制器操作不起作用

controller actions not working

本文关键字：不起作用 操作 控制器      更新时间：2023-09-26

对不起，如果我做错了什么，我在这里是新的'^^

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

我在一个名为"GetProductsByJson"的控制器中有一个操作，它返回一个包含产品列表的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中路由操作，但没有成功。

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

我不得不插入动作的完整网址。

我认为，当您的角度代码试图对您的操作方法进行异步调用时，会出现404错误，因为您给操作方法的相对路径不正确。

像这样在javascript中硬核url不是一个好主意。Yo应该在您的剃刀视图中使用Url.Content()或Url.RouteUrl()辅助方法来生成应用程序根的相对url。无论您当前的页面/路径如何，它都会负责正确构建url。一旦获得该值，您就可以使用angular 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);

您可以看到我正在访问$http服务的then()事件中的响应。此外，上面的控制器代码是以这种方式编写的，以支持john papa在他的angular styleguide中建议的controller As语法。所以在你看来，你会像一样访问它

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