使用WEB API和SPA，使用Code第一种方法的angularJs

Question

我们正在使用SPA模板，代码第一种方法（实体框架），服务的Web API和DataBind的Angular.js。我们能够连接我们的数据库来执行CRUD操作。但问题是数据不是显示在Web Page.Below是代码片段： 标记脚本： -

<table id="example" class="table table-bordered table-hover" style="border:1px solid lightgray">
    <thead>
        <tr>
            <th>ProgramID</th>
            <th>ProgramName</th>
            <th>SiteID</th>
        </tr>
    </thead>
    <tbody id="tableBody">
        <tr data-ng-show="addMode">
            <td></td>
            <td><input type="text" data-ng-model="newStatusDTO.ProgramID" /></td>
            <td><input type="text" data-ng-model="newStatusDTO.ProgramName" /></td>
            <td><input type="text" data-ng-model="newStatusDTO.SiteID" /></td>
            <td>
                <p><a data-ng-click="add(newStatusDTO)" href="javascript:;">Save</a> | <a data-ng-click="toggleAdd()" href="javascript:;">Cancel</a></p>
            </td>
        </tr>
        <tr data-ng-repeat="StatusD in sgvm.gridData">
            <td data-ng-model="StatusD.ProgramName">{{StatusD.ProgramName}}</td>
            <td>
                <p data-ng-hide="StatusD.editMode">{{ StatusD.ProgramName }}</p>
                <input data-ng-show="StatusD.editMode" type="text" data-ng-model="StatusD.ProgramName" />
            </td>
            <td>
                <p data-ng-hide="StatusD.editMode">{{ StatusD.SiteID }}</p>
                <input data-ng-show="StatusD.editMode" type="text" data-ng-model="StatusD.SiteID" />
            </td>
            <td>
                <p data-ng-hide="StatusD.editMode"><a data-ng-click="toggleEdit(StatusD)" href="javascript:;">Edit</a> | <a data-ng-click="deleteStatusDTO(StatusD)" href="javascript:;">Delete</a></p>
                <p data-ng-show="StatusD.editMode"><a data-ng-click="save(StatusD)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(StatusD)" href="javascript:;">Cancel</a></p>
            </td>
        </tr>
    </tbody>
</table>

Angular Code：

angular.module('PPCRApp', [
    'PPCRSearchController'
]);


function PPCRSearchController($scope, $http) {
    $scope.loading = true;
    $scope.addMode = false;

    //Used to display the data  
    $http.get('/api/PPCRSearch/GetProgram').success(function(data) {

            $scope.sgvm = data;
            $scope.loading = false;
        })
        .error(function() {
            $scope.error = "An Error has occured while loading posts!";
            $scope.loading = false;
        });

    $scope.toggleEdit = function() {
        this.StatusD.editMode = !this.StatusD.editMode;
    };
    $scope.toggleAdd = function() {
        $scope.addMode = !$scope.addMode;
    };

    //Used to save a record after edit  
    $scope.save = function() {


        $scope.loading = true;
        var abc = this.StatusD;

        $http.put('/api/PPCRSearch/UpdateStatus/', abc).success(function(data) {

            alert("Saved Successfully!!");
            abc.editMode = false;
            $scope.loading = false;
        }).error(function(data) {
            $scope.error = "An Error has occured while Saving Friend! " + data;
            $scope.loading = false;

        });
    };

    //Used to add a new record  
    $scope.add = function() {

        $scope.loading = true;
        $http.post('/api/PPCRSearch/PostStatus/', this.newStatusDTO).success(function(data) {
            alert("Added Successfully!!");
            $scope.addMode = false;
            $scope.sgvm.gridData.push(data);
            $scope.loading = false;
        }).error(function(data) {
            $scope.error = "An Error has occured while Adding Friend! " + data;
            $scope.loading = false;

        });
    };

    //Used to edit a record  
    $scope.deleteStatusDTO = function() {

        debugger;
        $scope.loading = true;
        var prgid = this.StatusD.programID;

        $http.delete('/api/PPCRSearch/DeleteProgram/' + prgid).success(function(data) {

            debugger;
            alert("Deleted Successfully!!");

            $.each($scope.sgvm.gridData, function(i) {
                if ($scope.sgvm.gridData[i].programID == prgid) {
                    $scope.sgvm.gridData.splice(i, 1);
                    return false;
                }
            });
            $scope.loading = false;
        }).error(function(err) {
            debugger;
            $scope.error = "An Error has occured while deleting Friend! " + err.val();
            $scope.loading = false;

        });
    };
}

GetProgram功能：

public class PPCRSearchController: ApiController {
    private DataContext db = new DataContext();
    static readonly IPPCRRepository repository = new ProgramRepository();

    [HttpGet]
    public SearchGridViewModel GetProgram() {

        var b = repository.GetProgram(1, 10);
        return b;
    }
}

ProgramRepository：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SPAwithAngular.Models {
    public class ProgramRepository: IPPCRRepository {

        public SearchGridViewModel GetProgram(int page, int pagesize) {
            using(DataContext dbcontext = new DataContext()) {
                SearchGridViewModel ddl = new SearchGridViewModel();

                var lstProgram = from r in dbcontext.Program select r;
                var a = Converter.LProgramDTO(lstProgram.ToList());

                ddl.gridData = (0 == page ? null : a.Skip((page - 1) * pagesize).Take(pagesize).ToList());
                // calculated number of pages and ceil the value 
                ddl.NumberOfPages = ((int) Math.Ceiling((double) a.Count / pagesize));
                return ddl;

            }
        }
    }
}

SearchGridViewModel函数：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SPAwithAngular.Models {
    public class SearchGridViewModel {
        public List < ProgramDTO > gridData {
            get;
            set;
        }

        public int NumberOfPages {
            get;
            set;
        }
    }
}

ProgramDTO：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SPAwithAngular.Models {
    public class ProgramDTO {
        public int ProgramID {
            get;
            set;
        }
        public string ProgramName {
            get;
            set;
        }
        public int SiteID {
            get;
            set;
        }
    }
}

记录在数据库中成功保存。但是在尝试获取记录时不会显示。