2014-12-26 3 views
-2

나는 자동차 내 AngularJS와 대한 ADO.NET 엔터티 데이터베이스 모델을 생성 된 응용 프로그램 사용하여 데이터베이스를 넣고 보여 주었다 :ASP.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'); 
     } 

    } 
]); 
+0

같은 뭔가 당신은 컨트롤러에서 JSON 데이터를 기대하고 있습니까? 그렇다면 반환 유형으로 지정해야 할 수도 있습니다. – Dan

+0

튜토리얼을 따라 왔으며 교사는 JSON 데이터에 대해 언급하지 않았습니다. 요청 데이터를 표시 할 때 HTML 출력 마녀가 연결되어 있습니다. – jureispro

답변

2

, 아래에 돌려 줄입니다 너 html

$http.get('/#/contacts/').success(function (data) {
,

당신이를 사용하지 말아야합니다/#/연락처 /가 연락처보기의 HTML 렌더링 될 때 URL에, 대신 당신은 당신이 구현 나머지 API 서비스의 URL을 사용해야합니다. 이

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

+0

코드를 사용할 때 HTTP 404 오류가 발생했습니다. – jureispro

+1

URL http : // localhost : 1234/contacts를 그대로 사용하지 마십시오. 거기에 나머지 API URL을 사용해야합니다. 나는 당신에게 모범을 보였습니다. 희망이 의미가 있습니다. – marulasiddappa

+0

내가 변경 : 포트 1234 일치하는 asp.net 링크 내 URL – jureispro

관련 문제