AngularJS not showing Entity Framework data

Question

{{project.ProjectName}} is not showing any data in my browser. I have data in the db, I have the needed script files ref'd in my _Layout, and ng-app="myApp" in the body. Debugging the controller does return 1 row of data. Not sure what I am doing wrong. It should show 1 row with the ProjectName.

Controller:

 public ActionResult Index()
        {
            return View();
        }

    public JsonResult GetAllProjects()
    {
        EEDBEntities db = new EEDBEntities();
        var result = db.Projects.ToList();
        return Json(result, JsonRequestBehavior.AllowGet);
    }

App.js:

var myApp = angular.module('myApp', []);

myApp.controller('mainController', function($scope, $http) {
    $http.get('/home/GetAllProjects')
        .success(function(result) {
            $scope.projects = result;
        })
        .error(function(data) {
            console.log(data);
        });
});

Index.cshtml:

<h3>
    All Projects
</h3>
<div ng-controller="mainController">
    <table class="table table-striped">
        <tr ng-repeat="project in projects">
            <td>{{project.ProjectName}}</td>
            <td class="text-right">
                <button class="btn-danger">X</button>
            </td>
        </tr>
    </table>
</div>

could you try putting `{{projects}}` on view to check `projects` has been loaded or not.? — Pankaj Parkar, Aug 19 '15 at 21:18
debugging the console i do see: A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.Project_83750B92BCA5CE51EC420CEFFEAF12AA8B672E61DCC85D715490C55AF863FA22'. — S C, Aug 19 '15 at 21:24
well i added this.Configuration.ProxyCreationEnabled = false; to my Entities context constructor and that worked. Not sure if there are any downfalls to this? — S C, Aug 19 '15 at 21:32
Yes there are downsides to turning this of as you can see in the answer of this question : http://stackoverflow.com/a/4596787/3459760 — cverb, Aug 20 '15 at 06:16

score 1 · Accepted Answer · answered Aug 19 '15 at 21:34

1

Try putting this in your EF DbContext constructor

base.Configuration.ProxyCreationEnabled = false;

Assuming you are doing EF Code first.

public YourDbContext()
            : base("name=ConnectionString")
        {
            base.Configuration.ProxyCreationEnabled = false;
        }

answered Aug 19 '15 at 21:34

Laurence

7,633
21
78
129

yep, thats what i did to get it to work. I'll give ya credit for that one. – S C Aug 19 '15 at 21:40

score 0 · Answer 2 · answered Aug 20 '15 at 06:14

It can be fixed if you use a ViewModel instead of sending your Entity Framework data to your View.

Like in your example, you only seem to need the ProjectName property, that would look something like this :

public JsonResult GetAllProjects()
{
    EEDBEntities db = new EEDBEntities();
    var result = db.Projects.Select(p => new {
        p.ProjectName
        //add other properties if you need to
    }).ToList();
    return Json(result, JsonRequestBehavior.AllowGet);
}

The example given is with an anonymous object, but you could also use a real ViewModel, just change the Select() to the following :

    var result = db.Projects.Select(p => new ProjectViewModel {
        ProjectName = p.ProjectName
        //add other properties if you need to
    }).ToList();

AngularJS not showing Entity Framework data

2 Answers2