我正在将 wcf rest 服务消耗到 angular js 应用程序中。我正在尝试根据帐户持有人姓氏在 Angular js 应用程序中显示单个记录，参数类型为 string 。方法类型是 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 服务的屏幕截图。
这是 Google chrome 网络选项卡的屏幕截图，能够捕获数据，网页不显示数据。
最佳答案
就目前而言，正如我从您的 Chrome 开发工具屏幕截图中看到的那样，您实际上收到的是包含 JSON 而不是 JSON 的字符串，这是一种相当奇怪的做法。另外响应字符串中JSON的根对象实际上是Array。由于字符串不包含属性 d，我假设您应该更改代码:
$scope.Customers = eval(data.d);
到
$scope.Customers = JSON.parse(data);
此外，我不知道 .success(，但是对于 $http() 返回的 promise ，成功回调接收整个响应对象(包括状态、数据、 header 等)，而不仅仅是响应数据作为第一个参数。
提示:
顺便说一下，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);
});
}
现场演示
关于c# - Angular Web 应用程序数据绑定(bind)不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47817037/