ASP.NET Webforms and AngularJS

Question

I'm still struggling to get my first ASP.NET WebApi / AngularJS app up and running...

I'm trying to query a WebAPI service (which I've written and verified using Fiddler that it works just fine) from Angular, and I'm trying to show the data returned on my ASP.NET Webforms page. I studied a great many tutorials and Pluralsight courses, and really thought I knew how to do it - but Angular doesn't agree with me :-(

I have my Angular app/controller here:

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

app.controller('MyCtrl', function ($scope, $http) {
    $scope.model = [];

    //Call to web API
    var Url = 'http://localhost:13811/api/v1/mydata';

    $http({
            method: 'GET',
            url: Url
    }).success(function (MyList) {
            $scope.model = MyList;
    }).error(function () {

    });
});

My (very limited) JS/Angular understanding is that this defines an Angular app and a controller, and that if I add this controller to a DOM element on my ASPX page, the controller will be invoked, will make that call out to my WebAPI service (and I do see that this is happening), and then stores the results (a list of some data objects from the database) into the $scope.model variable.

So I was assuming that I would be able to integrate this into a blank ASPX something like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoAngular.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">   
<head runat="server">
    <title>Angular Demo</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/app/plz-controller.js"></script>
</head>
<body  ng-app="MyApp">
    <form id="form1" runat="server">
    <div ng-controller="MyCtrl">
        <span>Angular says: {{1+2}} </span>

        <div class="list-group" data-ng-repeat="x in model">
            <div class="list-group-item">
                <span>{{x.Field1}}</span><br/>
                <span>{{x.Field2}}</span><br/>
            </div>     
        </div>    
    </div>
    </form>
</body>
</html>

I was assuming that adding the ng-app="MyApp" directive to the <body> tag would link the ASPX page to the Angular app, and adding the ng-controller="MyCtrl" to that <div> would then instantiate the Angular controller (and thus make the WebAPI call - this it does, I see that in the F12 developer tools).

I was also expecting that by using the data-ng-repeat="x in model" directive, I would be able to iterate over the list of data elements returned from the WebAPI call, and using the {{....}} syntax, I was hoping to be able to access the individual fields of those objects and display them.

ALAS: I do see Angular says: 3 at the top of my page, so Angular appears to be "there" and active, and I do see the WebAPI call in the F12 developer tools (and I can verify that the expected number of data elements is being returned) - yet no matter what I try, I cannot find any way to actually SHOW that data having been retrieved from WebAPI on my ASPX page......

Any ideas? What am I missing? Must be something really stupid - I'm sure - but I just don't see the forest for the trees anymore........

does your success function ever get called? What do you get if you log out `MyList`? — rob, Apr 27 '16 at 19:36
@rob: yes, the "success" function is in fact called - and inspecting the `MyList` showed my error - this is not a flat list of data, but a structure - it contains a few fields, and an `Items` collection. When I use `MyList.Items`, I get the list of data rows to display - **THANKS!** — marc_s, Apr 27 '16 at 20:52

score 1 · Accepted Answer · answered Apr 27 '16 at 20:37

Fire up the debugger and put a breakpoint on the $scope.model = MyList line. Chances are that you're getting an http response object back here and you need to change it to something like $scope.model = MyList.data. Examining the object in the debugger will tell you for sure if this is the case.

ASP.NET Webforms and AngularJS

1 Answers1