ASP.NET - Controller无法从数据库中检索数据

时间:2014-12-26 13:38:50

标签: c# asp.net angularjs

我使用数据库为我的angularJS应用程序自动生成了ADO.NET实体数据库模型,如下所示:

Database model

我在显示数据库的所有结果时遇到问题。当我调用函数从数据库获取所有数据时,我得到了这个结果(这让我很困惑):

这是AJAX请求的结果(我不知道HTML页面/模板的结果和原因)......:

 <!DOCTYPE html>
<html ng-app="contactsManager">
<head>
    <title>Contacts</title>
</head>
<body>
    <div class="navbar navbar-top">
        <link href="/Content/bootstrap.min.css" rel="stylesheet" />
        <link href="/Content/custom.css" rel="stylesheet" />

        <div class="navbar-inner">
            <div class="container">
                <h2>Contacts</h2>
            </div>
        </div>
    </div>
    <div ng-view class="example-animate-container"
         ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-route.js"></script>
    <script src="/Scripts/application/application.js"></script>
    <script src="/Scripts/application/controllers.js"></script>
    <script src="/Scripts/application/contactsService.js"></script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"855308fe8e4849c09afe6746e4d4fab6"}
</script>
<script type="text/javascript" src="http://localhost:53083/9ef1ca62e8c144c68814e88ffffbd4a7/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

有人知道为什么我会收到此输出以及为什么我丢失数据库中的数据?

以下是我使用的代码:

ContactsController.cs

public class ContactsController : ApiController
    {
        ContactsEntities db = new ContactsEntities();
        //get all
        [HttpGet]
        public IEnumerable<Contact> Get()
        {
            return db.Contacts.AsEnumerable();
        }

        //get customer by id
        public Contact Get(int id)
        {
            Contact contacts = db.Contacts.Find(id);
            if (contacts == null)
            {
                throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));

            }
            return contacts;
        }
        //update
        public HttpResponseMessage Put(int id, Contact contact)
        {
            if (!ModelState.IsValid)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
            }
            if (id != contact.id)
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest);
            }
            db.Entry(contact).State = EntityState.Modified;
            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
            }
            return Request.CreateResponse(HttpStatusCode.OK);
        }

        //insert
        public HttpResponseMessage Post(Contact contact)
        {
            if (ModelState.IsValid)
            {
                db.Contacts.Add(contact);
                db.SaveChanges();
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, contact);
                response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = contact.id }));
                return response;
            }
            else
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
            }
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }

    }

这里是应用程序前端的angularJS控制器:

app.controller('ContactsController', [
    '$scope', '$http', '$location', 'contactsService',
    function ($scope, $http, $location, contactsService) {
        $http.get('/#/contacts/').success(function (data) {
            console.log(data);
            $scope.contacts = data;
           // $scope.loading = false;
        })
        .error(function () {
            alert ("An Error has occured while loading posts!");
           // $scope.loading = false;
        });
        $scope.editContact = function (id) {
            $location.path('/edit-contact/' + id);
        };

        $scope.displayContact = function (id) {
            $location.path('/display-contact/' + id);
        };


        $scope.showDetails = function (id) {
            var el = angular.element(document.getElementById('#ct-details-' + id));
            el.toggleClass('details-hidden');
        }

    }
]);

1 个答案:

答案 0 :(得分:2)

我认为,下面是返回html的行

&#13;
&#13;
$http.get('/#/contacts/').success(function (data) {
&#13;
&#13;
&#13;

你不应该在url中使用这个/#/ contacts /,因为它正在呈现联系人视图的html,而你必须使用你实现的其余api服务的url。像这样的东西

&#13;
&#13;
$http.get('http://localhost:1234/contacts').success(function (data) {
&#13;
&#13;
&#13;