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

  • Question

  • User-698989805 posted

    Hello friends! I am trying to learn Angular and have basics to start with. I've successfully installed Angular in ASP.NET Core project without using the default template in visual studio 2017 and run the project with success as well. Here I used C# API to get data (The same thing I used to get database data that shows up perfectly), something as follow:

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

    Then finally in Angular, I did the below that worked perfectly:

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

    So my plan is to try the same thing in ASP.NET MVC project where again I was successful to install as well run the project. Unfortunately I am unable to return database data in the same way that I tried with API. Say there is a controller Dashboard and a method GetPersons(). So I wrote the below in the controller:

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

    In the front-end, I used Angular to return the data in the same way as above:

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

    Unfortunately this didn't work and when I tried to debug with the browser's inspect element, the request seems to be not working I mean it's unable to make http request with the url written - /Dashboard/GetPerons. So does it require anything else to make Angular work in the ASP.NET MVC project?

    N.B - In the front-end, I called the Angular API as follows:

    <tr *ngFor="let value of values">
      <td>{{ value.name }}</td>
    </tr>
    Friday, January 11, 2019 8:29 AM

Answers

  • User-698989805 posted

    Finally sorted. Basically my issue was - I was returning a C# list of objects that the Angular service was unable to interpret. So I just converted the list into jSon using jSon serialization as follows and finally made it work:

    [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: If any issue faced converting the list to jSon, just run this command to get the package installed from nuget -

    Install-Package Newtonsoft.Json


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 13, 2019 4:12 PM