Question

我正在将wcf rest服务用于angular js应用程序。我试图在角度js应用程序中显示基于帐户持有人姓氏的单个记录，参数类型是字符串。方法类型是GET。当将值发布到wcf服务并且它接收值时。它检查ado.net代码中的值，无论值是有效还是无效。它能够在Google Chrome网络点击响应部分中检索帐户持有人信息。但问题是没有在网页中显示任何内容。

这是界面。

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

这是实施。

 public string GetCustomers(string Account_Holder_Last_Name)
        {

            List<object> customers = new List<object>();
            string sql = "SELECT * FROM Current_Account_Holder_Details WHERE Account_Holder_Last_Name =@Account_Holder_Last_Name";
            using (SqlConnection conn = new SqlConnection())
            {
                conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
                using (SqlCommand cmd = new SqlCommand(sql))
                {
                    cmd.Parameters.AddWithValue("@Account_Holder_Last_Name", Account_Holder_Last_Name);
                    cmd.Connection = conn;
                    conn.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        if (sdr.HasRows)
                        {
                            while (sdr.Read())
                            {

                                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();
                }

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

        }

这是脚本代码。

@{
    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.Customers = [];
          $scope.Search = function () {
              var post = $http({
                  method: "GET",
                  url: "http://localhost:52098/HalifaxIISService.svc/GetCustomers/" + encodeURIComponent($scope.Account_Holder_Last_Name),
                  dataType: 'json',
                  headers: {
                      'Accept': 'application/json, text/javascript, */*; q=0.01',
                      'Content-Type': 'application/json; charset=utf-8'
                  }
              });

              post.success(function (data, status) {
                  $scope.Customers = eval(data.d);
                  $scope.IsVisible = true;
              },
                  function (err) {
                      console.log("Some Error Occured." + err);
                  }
              );

              post.error(function (data, status) {
                  $window.alert(data.Message);
              });
          }
      });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        Name:
        <input type="text" ng-model="Account_Holder_Last_Name" />
        <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> Tittle</th>
                <th>First Name</th>
                <th> Last Name</th>
                <th>  DOB </th>
                <th> House No</th>
                <th> Street Name</th>
                <th>Post Code</th>
                <th> Occupation</th>
                <th>Account Number</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>

以下是接收值的wcf服务的屏幕截图。

这是屏幕截图谷歌Chrome网络选项卡能够捕获数据和网页不显示数据。

Answer 1

到目前为止，正如我从您的Chrome开发工具屏幕截图中看到的那样，您实际上正在接收包含JSON而不是JSON的字符串，这是相当奇怪的做法。响应字符串中JSON的根对象实际上也是Array。由于字符串不包含属性d，我假设您应该更改代码：

$scope.Customers = eval(data.d);

到

$scope.Customers = JSON.parse(data);

另外，我不知道.success(，但对于$http()返回的承诺，成功回调会收到整个响应对象（包括状态，数据，标题等），而不是只将响应数据作为第一个参数。

<强> 提示：的

顺便说一句，做eval(...)不仅在AngularJS中是一种非常糟糕的做法，而且在JavaScript中也是如此。您应该考虑从服务器返回纯JSON，而不是像现在一样用字符串包装它。

编辑（最终代码示例）：

您的搜索功能可能如下所示：

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

          post.then(function (response) { // .success(function(data => .then(function(response
              var data = response.data; // extract data from resposne
              $scope.Customers = JSON.parse(data); // eval(data.d) => JSON.parse(data)
              $scope.IsVisible = true;
          }, function (err) {
              $window.alert(err);
          });
}

现场演示

https://plnkr.co/edit/0pkO8NWP2A7XerLc2NhO?p=preview

角度Web应用程序数据绑定不起作用

1 个答案: