Angular JS Application wcf rest service로 데이터를 표시 할 수 없습니다.

각도 js 응용 프로그램으로 wcf 서비스를 사용하고 있습니다. 각도 js 응용 프로그램에서 단일 레코드를 검색하려고합니다. 그러나 문제는 데이터를 표시하지 않는 것입니다. 나는 응용 프로그램을 디버깅하고 중단 점을 넣습니다. 내가 입력 된 텍스트에 유효한 텍스트를 입력했지만 그것은 SQL 데이터 리더 라인 코드를 때리는되지 않습니다. 그것은 항상 connection .close 메소드를 실행한다.Angular JS Application wcf rest service로 데이터를 표시 할 수 없습니다.

다음은 인터페이스입니다.

[OperationContract] 

     [WebInvoke(Method = "POST", 
     RequestFormat = WebMessageFormat.Json, 
     ResponseFormat = WebMessageFormat.Json, 
     UriTemplate = "/GetCustomers/{prefix}")] 
     string GetCustomers(string prefix);

다음은 구현입니다.

public string GetCustomers(string prefix) 
     { 

      List<object> customers = new List<object>(); 
      string sql = "SELECT * FROM Current_Account_Holder_Details WHERE Account_Holder_Last_Name LIKE @prefix + '%'"; 
      using (SqlConnection conn = new SqlConnection()) 
      { 
       conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; 
       using (SqlCommand cmd = new SqlCommand(sql)) 
       { 
        cmd.Parameters.AddWithValue("@prefix", prefix); 
        cmd.Connection = conn; 
        conn.Open(); 
        using (SqlDataReader sdr = cmd.ExecuteReader())// Hit on this line 
        { 
         while (sdr.Read())// Not hitting this line 
         { 

          customers.Add(new 
          { 
           Tittle = sdr["Tittle"], 
           Account_Holder_First_Name = sdr["Account_Holder_First_Name"], 
           Account_Holder_Last_Name = sdr["Account_Holder_Last_Name"], 
           Account_Holder_DOB = sdr["Account_Holder_DOB"], 
           Account_Holder_House_No = sdr["Account_Holder_House_No"], 
           Account_Holder_Street_Name = sdr["Account_Holder_Street_Name"], 
           Account_Holder_Post_Code = sdr["Account_Holder_Post_Code"], 

           Account_Holder_Occupation = sdr["Account_Holder_Occupation"], 
           Account_Number = sdr["Account_Number"] 



          }); 
         } 
        } 
        conn.Close();// After reader hit this line 
       } 

       return (new JavaScriptSerializer().Serialize(customers)); 
      } 

     }

다음은 HTML 코드입니다.

@{ 
    Layout = null; 
} 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
    <script type="text/javascript"> 
     var app = angular.module('MyApp', []) 
     app.controller('MyController', function ($scope, $http, $window) { 
      $scope.IsVisible = false; 
      $scope.Search = function() { 
       var post = $http({ 
        method: "POST", 
        url: "http://localhost:52098/HalifaxIISService.svc/GetCustomers/{prefix}", 
        dataType: 'json', 
        data: { prefix: $scope.Prefix }, 
        headers: { "Content-Type": "application/json" } 
       }); 

       post.success(function (data, status) { 
        $scope.Customers = eval(data.d); 
        $scope.IsVisible = true; 
       }); 

       post.error(function (data, status) { 
        $window.alert(data.Message); 
       }); 
      } 
     }); 
    </script> 
    <div ng-app="MyApp" ng-controller="MyController"> 
     Name: 
     <input type="text" ng-model="Prefix" /> 
     <input type="button" value="Submit" ng-click="Search()" /> 
     <hr /> 
     <table cellpadding="0" cellspacing="0" ng-show="IsVisible"> 
      <tr style="height: 30px; background-color: skyblue; color: maroon;"> 
       <th> Account Number</th> 
       <th>Account Creation date</th> 
       <th>Account Type</th> 
       <th> Sort code</th> 
       <th>Account Fee</th> 
       <th>Account Balance</th> 
       <th>Overdraft Limit</th> 


      </tr> 
      <tbody ng-repeat="m in Customers"> 
       <tr> 
        <td>{{m.Tittle}}</td> 
        <td>{{m.Account_Holder_First_Name}}</td> 
        <td>{{m.Account_Holder_Last_Name}}</td> 

        <td>{{m.Account_Holder_DOB}}</td> 
        <td>{{m.Account_Holder_House_No}}</td> 
        <td>{{m.Account_Holder_Street_Name}}</td> 
        <td>{{m.Account_Holder_Post_Code}}</td> 

        <td>{{m.Account_Holder_Occupation}}</td> 
        <td>{{m.Account_Number}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html>

여기에 응용 프로그램의 결과가 나와 있습니다. 이것에

출처

2017-12-05 Mohammad

에 "http : // localhost를 : 52098/HalifaxIISService.svc/GetCustomers"당신의 방법은 POST 때문에, NOT GET –

데이터에 대한 네트워크 요청의 응답 표시 일반적으로 예기치 않은 경우 <는 JSON 대신 HTML을 반환합니다 (네트워크 탭에서 요청을 클릭 한 다음 오른쪽의 응답 탭을 클릭하여 응답을 확인하십시오) – shaunhusain

제거 할 솔루션은 무엇입니까? 이 <기호 – Mohammad

변경을 : URL :이 링크는 매개 변수없이해야

var post = $http({ 
    method: "POST", 
    url: "localhost:52098/HalifaxIISService.svc/GetCustomers", 
    //dataType: 'json', 
    data: { prefix: $scope.Prefix }, 
    //headers: { "Content-Type": "application/json" } 
    headers: { 
       'Accept': 'application/json, text/javascript, */*; q=0.01', 
       'Content-Type': 'application/json; charset=utf-8' 
      } 
    });

출처

2017-12-05 03:29:20

Tht의 그것이 어떻게 작동합니까 –

Angular JS Application wcf rest service로 데이터를 표시 할 수 없습니다.

답변

관련 문제