Question

我正在将Wcf Rest Service用于Angular JS Application。我试图通过Wcf Rest Service从Sql数据库中检索单个记录。 Wcf服务能够发布到Angular JS应用程序，但是当我点击网站中的提交按钮时，我没有在Angular js Application中找到记录。我在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));
        }

    }

以下是带有Angular JS Script代码的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: "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>

以下是我在网络标签上运行应用程序的结果。

Answer 1

我还没有真正在当地设置这个。但我建议的只是一个简单的更改，如下所示，只是在顶部添加 $ scope.Customers = []; 。

    <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>

Answer 2

如果我理解正确 - 服务正在返回数据，但UI没有呈现它。

我没有看到“客户”对象的定义。您还可以在“post.success”和“post.error”方法中添加“调试器”语句，以查看问题的确切位置。它清楚地显示了例外情况。

只需在浏览器中添加调试器语句和F12即可。希望能帮助您找出问题。

问候
Neelima

虽然Wcf Service

2 个答案: