c# - I am trying to make AngularJS/MVC Asp.Net app and I stuck while trying to get JSON data from controller -

task make web aplication mp3 file managment.

list of functionalities application should have:

• adding, editing , deleting mp3 parameters (song name , author ...)

• adding, editing , deleting playlists

• adding mp3 files in numbers of playlists

• searching files name, author , playlist (search should done on server)

• view of each entry should able bookmark(add favorites) in browser

• back , forward buttons should work on whole application in browser

technical requirements:

• application should made single page web application fetches data using ajax calls

• angularjs should used on client side , asp.net mvc on server side

• data should stored in persisten storage

• upon first start application should able add test data in database

---

so far have made mvc asp.net application , added sql database model first approach. has 2 tables 'playlist' , 'song' (one many relationship). later on have auto generated songcontroller , playlistcontroller (mvc 5 controller views,using entity framework).now have make angularjs on client fetches json data song , playlist controllers.

---

my main goal make this:https://imgur.com/a/mms2o

with functionalities respecting request

• angularjs should used on client side , asp.net mvc on server side

---

now trying show playlist view inside song view (i woud list playlists under song list in same page)

1. i have initialzed ng-app , ng-controller , other must actions when adding angular app

   2. trying json data playlist controller , part stuck

---

this code inside playlistcontroller.cs

public class playlistcontroller : controller {     private managermodelcontainer db = new managermodelcontainer();      // get: /playlist/     public actionresult index()     {         return view(db.playlistset.tolist());     } 

and have added

// get: /playlist/plget     public jsonresult plget()     {         return json(db.playlistset.tolist(),jsonrequestbehavior.allowget);     } 

---

the thing when go /song/plget error: https://imgur.com/iximm8x

i have tried adding this: context.configuration.proxycreationenabled = false; context nothing changes.

<#=accessibility.fortype(container)#> partial class <#=code.escape(container)#> : dbcontext {     public <#=code.escape(container)#>()         : base("name=<#=container.name#>")     { <# if (!loader.islazyloadingenabled(container)) { #>               context.configuration.proxycreationenabled = false;   // have tried write managermodel insted of context because name of context still doesnt work :/         this.configuration.lazyloadingenabled = false; <# } 

---

so please can u give me advice on should do? maybe trying on again, using framework or maybe ssolution problem.

edit:

these models:

namespace konacno.models {     using system;     using system.collections.generic;      public partial class playlist     {         public playlist()         {             this.song = new hashset<song>();         }          public int id { get; set; }         public string playlistname { get; set; }          public virtual icollection<song> song { get; set; }     } } 

---

namespace konacno.models {     using system;     using system.collections.generic;      public partial class song     {         public int id { get; set; }         public string name { get; set; }         public string singer { get; set; }         public string year { get; set; }         public int playlistid { get; set; }          public virtual playlist playlist { get; set; }     } } 

you playlistname model contains property list<song> , song contains property playlistname, circular reference error generataed default javascriptserializer. can use alternatives such json.net has optional settings handling these errors. solved passing data need client, either using view model or passing collection of anonymous objects

var data = playlistset.select(x => new {     id = x.id,     playlistname = x.playlistname,     songs = x.song.select(y => new     {         id => y.id,         name => y.name,         singer => y.singer,         year => y.year     }) }); return json(data, jsonrequestbehavior.allowget); 

or , create view model(s) properties needed in view

public class playlistvm {     public int id { get; set; }     public string playlistname { get; set; }     public ienumerable<songvm> songs { get; set; } } public class songvm {     public int id { get; set; }     public string name { get; set; }     public string singer { get; set; }     public string year { get; set; } } 

and above query becomes

var data = playlistset.select(x => new playlistvm() {     ....     songs = x.song.select(y => new songvm()     {         ....     }) });