Угловой и ASP.NET MVC

Я изучаю угловой, и я использую ASP.NET MVC5. Я не могу вернуть данные из контроллера mvc через угловые.Угловой и ASP.NET MVC

Маршрут должен быть localhost/Product/Test, но когда метод углового приема вызывает его, 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); 
}

Угловая приложение

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

Часть IAL Посмотреть

<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>

Index Просмотр

<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/Test – Haris

Сначала заменить "Продукт/Тест" с "/ Product/Test" Обратите внимание на "/"в начале

Ваше действие не будет реализовано, чтобы вернуть данные json, но View (который будет простым HTML), отправленный в ваше приложение Angular.

Вы должны вернуть данные 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.

Update 1: На основе комментариев ниже этого ответа:

Replace 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 App нужно:

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

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

Наконец заменить URL из $http.get('Product/Test') с $http.get('/Product/TestData').

источник

2016-02-12 20:10:37 CodeNotFound

Я просто попробовал это, и это привело меня к результату json [{«ProductID»: 1, «Описание»: «Маргарита»}, {«ProductID»: 2, «Описание»: «Pepperoni»}, { ProductID ": 3," Описание ":" Burger "}] – Haris

Это не повлияло, все равно получите тот же результат, я обновил вопрос и включил экранный снимок – Haris

Он не работает, он просто возвращает то, что находится в моем Скриншот. в отладчике я не вижу никаких скриптов, загруженных на страницу – Haris

Угловой и ASP.NET MVC

ответ

Смежные вопросы