angularjs http在使用獲取數據列表時不能在mvc中工作

我想使用角度js獲取項目列表。我使用角碼並使用$ http。但它不起作用。我點擊操作方法並嘗試返回json。但是當我嘗試它。它返回完整的JSON視圖。angularjs http在使用獲取數據列表時不能在mvc中工作

@section scripts{ 
 
    
 
    <script src="~/Scripts/ang.js"></script> 
 
} 
 

 
<div ng-app="StudentApp" class="container"> 
 
    <br/> 
 
    <br/> 
 
    <input type="text" placeholder="Search Student" ng-model="searchStudent" /> 
 
    <br /> 
 
    <div ng-controller="StudentController"> 
 
     <table class="table" ng-init="initData()"> 
 
      <tr ng-repeat="r in data | filter : searchStudent" > 
 
       <td>{{ r.Col_Title }}</td> 
 
       <td>{{ r.Col_Descrp }}</td> 
 
       
 
      </tr> 
 
     <table> 
 
    </div> 
 
</div>

public ActionResult GetCollections() 
    { 
     var lst = eShoppingEntitiesContetxt.Collections.Where(s => s.IsActive == true).ToList(); 
     var result = JsonConvert.SerializeObject(lst, new JsonSerializerSettings 
       { 
        ReferenceLoopHandling = ReferenceLoopHandling.Ignore 
       }); 
     return Json(result, JsonRequestBehavior.AllowGet); 
     // return View(); 
    }

var myApp = angular.module('StudentApp', []); 
    myApp.controller('StudentController', function ($scope, $http) { 

    $http.get('/User/GetCollections') // added an '/' along with deleting Controller portion 
     .then(function (response) { 

      $scope.data = response.data 
     })})

<div ng-app="StudentApp" class="container"> 
    <br/> 
    <br/> 
    <input type="text" placeholder="Search Student" ng-model="searchStudent" /> 
    <br /> 
    <div ng-controller="StudentController"> 
     <table class="table"> 
      <tr ng-repeat="r in data | filter : searchStudent" > 
       <td>{{ r.name }}</td> 
       <td>{{ r.country }}</td> 

      </tr> 
     <table> 
    </div> 
</div>

來源

2017-04-05 Deftsoft Dotnet

能告訴你這是返回的JSON？ – Kamo

向我們顯示您的控制器，控制器應該返回'JsonResult'而不是'ActionResult'。 –

查看我的控制器方法 –

試試這個：

var myApp = angular.module('StudentApp', []); 
myApp.controller('StudentController', function($scope, $http) { 
    $scope.initData = function() { 
     $http.get('/User/GetCollections') // added an '/' along with deleting Controller portion 
      .then(function(response) { 
       $scope.data = response.data; 
      }); 
    } 
});

在您看來（請注意在表中的ng-init="initData()"）

<div ng-app="StudentApp" class="container"> 
<br/> 
<br/> 
<input type="text" placeholder="Search Student" ng-model="searchStudent" /> 
<br /> 
<div ng-controller="StudentController"> 
    <table class="table" ng-init="initData()"> 
     <tr ng-repeat="r in data | filter : searchStudent" > 
      <td>{{ r.name }}</td> 
      <td>{{ r.country }}</td> 

     </tr> 
    <table> 
</div>

來源

2017-04-05 10:29:00

當我的命中控制器方法時，它只返回在瀏覽器上以json形式顯示數據。我認爲控制器方法存在問題，請檢查我的上述問題。我把我的輸出內容的圖像 –

我知道爲什麼，但你需要顯示你的完整視圖代碼。現在你只顯示一小段角色和cshtml片段，問題出現在那個文件中。粘貼您的整個cshtml文件。 –

看到我用我的整個代碼更新 –

正如你的問題所說：it return full json on view...。

所以我希望你忘了把你的stringfy json轉換成對象。像：

$scope.data = angular.fromJson(response.data);

更新

你不調用REST API方法，而MVC控制器，這將ofcourse渲染視圖使用JSON。

您需要創建一個REST API方法。如：

[Route("User/GetCollections")] 
public JsonResult GetCollections() 
{ 
    // compute your data. 

    return new Json(data, JsonRequestBehavior.AllowGet); 
}

並從html中刪除ng-init="initData()"。由於你的控制器將綁定$ scope.data。

來源

2017-04-05 09:01:30 anoop

我嘗試它，但在我的操作方法，它只返回視圖上的json內容。 –

那麼請添加\顯示你的json數據結構？ – anoop

''/ User/GetCollections''，這不是一個REST api方法，而是MVC控制器。你需要創建'REST'控制器。我將編輯我的答案 – anoop

angularjs http在使用獲取數據列表時不能在mvc中工作

回答

相關問題