Данные не отображаются с использованием ASP.NET MVC Angular - PullRequest
Новая
       12

Данные не отображаются с использованием ASP.NET MVC Angular

0 голосов
/ 10 января 2019

Я пытаюсь выучить Angular и имею основы для начала. Я успешно установил Angular в ASP.NET Core проект без использования шаблона по умолчанию в 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. Скажем, есть контроллер Панель управления и метод 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, чтобы вернуть данные так же, как указано выше: 

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

К сожалению, это не сработало, и когда я попытался выполнить отладку с помощью элемента проверки браузера, запрос, кажется, не работает. Я имею в виду, что он не может сделать http запрос с указанным URL - / 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>)

1 Ответ

0 голосов
/ 13 января 2019

Наконец-то отсортировано. По сути, моя проблема была в том, что я возвращал список C# объектов, которые служба Angular не смогла интерпретировать. Поэтому я просто преобразовал список в 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));
}
...