Angular和ASP.NET MVC

我正在學習角度，而我正在使用ASP.NET MVC5。我無法通過角度從mvc控制器返回數據。Angular和ASP.NET MVC

路由應該是localhost/Product/Test，但是當角度get方法調用它時，url是locahost/Product/Product/Test。任何幫助appreacited。

我採取的方法也正確嗎？因爲我看過很多教程，他們只展示瞭如何返回視圖。但似乎無法找到如何返回視圖和數據。

截圖

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

角應用

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>

UPDATE

來源

2016-02-12 Haris

嘗試從索引視圖中的鏈接中拿取/產品。 –

你的控制器名稱是什麼？（包含您的測試操作的類 – CodeNotFound

@RickestRick在'/'應用程序中，我得到以下服務器錯誤，並且URL是http：// localhost：14634 /測試 – Haris

首先更換「產品/測試」與「/產品/測試」通知「/」開頭

您的操作將不會返回json數據，而是發送給您的Angular App的View（將是純HTML）。

您必須在Test操作中返回Json數據。通過這條線

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

：替換以下行

return Json(result.ToList());

您可能需要允許GET方法與AJAX請求，然後使用：

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 liek這樣的：

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/TestData')取代的$http.get('Product/Test')的URL。

來源

2016-02-12 20:10:37 CodeNotFound

我剛剛試過這個，它使我對json [{「ProductID」：1，「Description」：「Margarita」}，{「ProductID」：2，「Description」：「Pepperoni」}，{「產品ID「：3，」描述「：」漢堡「}] – Haris

它沒有效果，仍然得到相同的結果，我已更新的問題，幷包括一個屏幕截圖 – Haris

它不起作用，它只是返回什麼是我的屏幕截圖。在調試器中，我看不到任何通過單擊索引視圖中的href加載到頁面 – Haris

Angular和ASP.NET MVC

回答

相關問題