Angular 和 ASP.NET MVC答案

【问题标题】：Angular and ASP.NET MVCAngular 和 ASP.NET MVC
【发布时间】：2016-02-12 19:49:28
【问题描述】：

我正在学习 Angular，我正在使用 ASP.NET MVC5。我无法通过角度从 mvc 控制器返回数据。

路由应该是 localhost/Product/Test，但是当 angular get 方法调用它时，url 是 locahost/Product/Product/Test。任何帮助都将不胜感激。

我采取的方法也正确吗？因为我看过很多教程，它们展示了如何只返回一个视图。但似乎找不到如何返回视图和数据。

截图

MVC 控制器

public ActionResult Test()
        {
            List<Product> products = new List<Product>();
            var db = new HotStuffPizzaContext();

            var result = (from p in db.Products
                          select p)
                          .Where(x => x.ProductID != 0)
                          .Select(a => new
                          {
                              ProductID = a.ProductID,
                              Description = a.Description
                          });
            return View("~/Views/Product/_Test.cshtml", result);
}

Angular 应用

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/Test', {
        url: '/Product',
        templateUrl: '../../Views/Product/_Test.cshtml',
        controller: 'testCtrl'
    }).otherwise({
        redirectTo: '/'
    });

}]);

myApp.controller('testCtrl', ['$scope', '$http',
  function ($scope, $http) {
      $http.get('Product/Test').success(function (data) {
          $scope.products = data;
      });
  }]);

局部视图

<html data-ng-app="myApp">
<head>
    <title></title>
    <script src="../../Scripts/angular.min.js"></script>
    <script src="../../Scripts/angular-route.js"></script>
    <script src="../../Scripts/App/app.js"></script>
</head>
<body data-ng-controller="testCtrl">
    <div>
        <table class="table table-striped">

            <tr data-ng-repeat="p in products">
                <th>id</th>
                <th>description</th>
            </tr>
            <tr>
                <td>{{p.productid}}</td>
                <td>{{p.description}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

索引视图

<h1>INDEX VIEW</h1>
<div data-ng-view=""></div>

<a href="/Product/Test">Test</a>

<script src="../../Scripts/angular.min.js"></script>
<script src="../../Scripts/angular-route.js"></script>
<script src="../../Scripts/App/app.js"></script>

更新

【问题讨论】：

尝试将 /Product 从您的索引视图中的链接中删除。
您的控制器名称是什么？（包含您的测试操作的类。
@RickestRick 我在“/”应用程序中收到以下服务器错误。网址是localhost:14634/Test
@CodeNotFound 产品控制器
在 $http.get('Product/Test') 中。

标签： c# asp.net angularjs asp.net-mvc

【解决方案1】：

首先将“Product/Test”替换为“/Product/Test”注意开头的“/”

您的操作不会返回一个 json 数据，而是一个视图（将是纯 HTML）发送到您的 Angular 应用程序。

您必须在测试操作中返回 Json 数据。替换以下行：

return View("~/Views/Product/_Test.cshtml");

通过这一行：

return Json(result.ToList());

您可能需要允许带有 AJAX 请求的 GET 方法，然后使用：

return Json(result.ToList(), JsonRequestBehavior.AllowGet);

不要忘记将[GET] 属性添加到您的测试操作中。

您必须考虑使用 ASP.Net Web API 而不是 ASP.Net MVC。

更新 1：基于此答案下方的评论：

通过像这样正确重命名您的匿名类型来替换 linq 查询：

var result = (from p in db.Products
               select p)
               .Where(x => x.ProductID != 0)
               .Select(a => new
                {
                    productid = a.ProductID,
                    description = a.Description
                });

请注意，匿名类型属性中没有大写字母。您必须像这样使用它，因为您的 AngularJS 应用程序需要它：

<tr>
     <td>{{p.productid}}</td>
     <td>{{p.description}}</td>
</tr>

更新 2：您需要有两个操作

返回您的视图测试
另一个获取您的数据的TestData

您的Test 将如下所示：

public ActionResult Test()
{
     return View("~/Views/Product/_Test.cshtml");
}

你的TestData 喜欢这个：

public ActionResult TestData()
{
        List<Product> products = new List<Product>();
        var db = new HotStuffPizzaContext();

        var result = (from p in db.Products
                      select p)
                      .Where(x => x.ProductID != 0)
                      .Select(a => new
                      {
                          productid= a.ProductID,
                          description = a.Description
                      });
        return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}

最后将$http.get('Product/Test')的url替换为$http.get('/Product/TestData')。

【讨论】：

我刚试过这个，它把我带到了 json [{"ProductID":1,"Description":"Margarita"},{"ProductID":2,"Description": "Pepperoni"},{"ProductID":3,"Description":"Burger"}]
它没有效果，仍然得到相同的结果，我已经更新了问题并包含了屏幕截图
它不起作用，它只是返回我的屏幕截图中的内容。在调试器中，我看不到任何加载到页面中的脚本
否，通过单击索引视图中的 href。产品控制器现在正在执行 return Json(result.ToList(), JsonRequestBehavior.AllowGet); （这就是导致这样做的原因）
我已经尝试过了，仍然得到相同的结果。 :z