使用 ASP.NET MVC Angular 不显示数据

Question

我正在努力学习 Angular 并且有基础知识可以开始。我在 ASP.NET Core 项目中成功安装了 Angular，而没有使用 visual studio 2017 中的默认模板，运行项目也成功安装。这里我使用了C# API来获取数据（和我用来获取数据库数据一样完美显示），如下：

public List<string> Get()
{
   return new List<string>() { "Hello World 1!", "Hello World 2!" }; 
}

然后终于在 Angular 中，我做了以下完美的工作：

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  public values: string[];

  constructor(private http: Http) {
    this.http.get('/api/values').subscribe(result => { //Calling the API here and values actually is the controller name
      this.values = result.json() as string[];
    }, error => console.error(error));
  }
}

所以我的计划是在 ASP.NET MVC 项目中尝试同样的事情，我再次成功地安装了运行项目。不幸的是，我无法像 API 那样尝试 return 数据库数据。假设有一个控制器 Dashboard 和一个方法 GetPersons()。所以我在控制器中写了以下内容：

public class Person
{
    public string name { get; set; }
    public string address { get; set; }
}

[HttpGet]
public List<Person> GetPersons()
{
    List<Person> aLst = new List<Person>()
    {
        new Person() { name = "John", address = "On Earth" },
        new Person() { name = "Jack", address = "On Earth" }
    };

    return aLst;
}

在前端，我用Angular转return数据，方法同上：

public values: object[];

constructor(private http: Http) {
    this.http.get('/Dashboard/GetPersons').subscribe(result => { //Calling the API here
      this.values = result.json() as object[];
   }, error => console.error(error));
}

不幸的是，这不起作用，当我尝试使用浏览器的检查元素进行调试时，请求似乎不起作用我的意思是它无法使用 url 编写的 http 请求- /Dashboard/GetPerons。那么，要使 Angular 在 ASP.NET MVC 项目中工作还需要其他任何东西吗？

N.B - 在前端，我调用 Angular API 如下：

<tr *ngFor="let value of values">
  <td>{{ value.name }}</td>
</tr>

更新 - 1 - 当我使用浏览器的检查元素进行调试时，我收到以下错误消息：

SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)

Answer 1

终于排序了。基本上我的问题是 - 我正在返回 Angular 服务无法解释的 C# 对象列表。所以我只是将列表转换为 jSon 使用 jSon 序列化如下，并最终使其工作：

[HttpGet]
public string GetPersons()
{
    List<Person> aLst = new List<Person>()
    {
        new Person() { name = "John", address = "On Earth" },
        new Person() { name = "Jack", address = "On Earth" }
    };

    return JsonConvert.SerializeObject(aLst);
}

N.B：如果将列表转换为 jSon 时遇到任何问题，只需运行此命令即可从 nuget 安装包-

Install-Package Newtonsoft.Json

当使用 ASP.NET Core 项目使用 API 控制器时，控制器中实际上不需要 jSon 转换，如下所示：

[Route("api/[controller]")]
public class ValuesController : Controller
{
    ECommerceContext db = new ECommerceContext(); //Db context

    // GET: api/<controller>
    [HttpGet]
    public List<Products> Get() //Here it didn't require to convert the C# list into jSon
    {
      return GetProducts(); //Get list of products from database
    }

    public List<Products> GetProducts()
    {
      List<Products> result = (from c in db.Products
                               select new Products
                               {
                                 ProductId = c.ProductId, ProductName = c.ProductName
                               }).ToList();

      return result;
    }
}

终于在 Angular 服务中，只使用了以下内容：

public values: object[];

constructor(private http: Http) {
  this.http.get('/api/values').subscribe(result => {
    this.values = result.json() as object[];
    }, error => console.error(error));
}

使用 ASP.NET MVC Angular 不显示数据

Data Doesn't Show Up Using ASP.NET MVC Angular

asp.net

asp.net-mvc

angular

angular7