1
wcf Rest Serviceを使用してSQLデータベースからデータを表示しようとしています。私は複数のテーブルのレコードに参加するUnion関数を使用しています。入力フィールドにアカウントを入力し、送信ボタンをクリックするとアカウント情報がWebページに表示されますが、問題は必要なデータではありません。Angular Js webアプリケーションのデータバインドSQLデータベースからのデータの受け取りに失敗しました
ここにクラスがあります。
public class AccountTransaction
{
public int? Account_Number { get; set; }
public decimal? Deposit { get; set; }
public decimal? Withdrawal { get; set; }
public decimal? Account_Balance { get; set; }
public string Account_Type { get; set; }
public string Account_Holder_Tittle { get; set; }
public string Account_Holder_FirstName { get; set; }
public string Account_Holder_LastName { get; set; }
public string Date { get; set; }
}
ここにメソッド実装があります。
public string AccountDetails(string Account_Number)
{
var accountNumber = int.Parse(Account_Number);//It could be better to use TryParse
using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
{
var inOut = context.Current_Account_Deposit.Where(x => x.Account_Number == accountNumber).Select(w => new AccountTransaction
{
Account_Number = w.Account_Number,
Account_Balance = (decimal?)0M,
Deposit = (decimal?)w.Amount,
Withdrawal = (decimal?)null,
Date = w.Date,
Account_Type=null,
Account_Holder_Tittle = null,
Account_Holder_FirstName =null,
Account_Holder_LastName = null
}).Union(context.Current_Account_Withdraw.Where(x => x.Account_Number == accountNumber).Select(d => new AccountTransaction
{
Account_Number = d.Account_Number,
Account_Balance = (decimal?)0M,
Deposit = (decimal?)null,
Withdrawal = (decimal?)d.Amount,
Date = d.Date,
Account_Type = null,
Account_Holder_Tittle = null,
Account_Holder_FirstName = null,
Account_Holder_LastName = null
})).OrderBy(r => r.Date)
.Union(context.Current_Account_Details.Where(x => x.Account_Number == accountNumber).Select(e => new AccountTransaction
{
Account_Number = e.Account_Number,
Account_Balance = (decimal?)e.Account_Balance,
Deposit = (decimal?)0M,
Withdrawal = (decimal?)0M,
Date = e.Account_Creation_Date,
Account_Type=e.Account_Type,
Account_Holder_Tittle = null,
Account_Holder_FirstName =null,
Account_Holder_LastName = null
}))
.Union(context.Current_Account_Holder_Details.Where(x=>x.Account_Number ==accountNumber).Select(d=> new AccountTransaction
{
Account_Number = d.Account_Number,
Account_Balance = null,
Deposit =null,
Withdrawal = null,
Date = null,
Account_Type = null,
Account_Holder_Tittle =d.Tittle,
Account_Holder_FirstName=d.Account_Holder_First_Name,
Account_Holder_LastName=d.Account_Holder_Last_Name
}));
var js = new System.Web.Script.Serialization.JavaScriptSerializer();
return js.Serialize(inOut);
}
}
ここはAmgular JSコードです。
@{
Layout = null;
}
<!DOCTYPE html>
<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/AccountDetails/" + encodeURIComponent($scope.Account_Number),
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);
});
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
Account Number:
<input type="text" ng-model="Account_Number" />
<input type="button" value="Submit" ng-click="Search()" />
<hr />
<br />
**<label ng-view="m in Customers" ng-show="IsVisible" >Account Type:{{m.Account_Type}}</label ng-show="IsVisible"> // this line is failed**
<table style="border: solid 2px Green; padding: 5px;" ng-show="IsVisible">
@*<table cellpadding="0" cellspacing="0">*@
<tr style="height: 30px; background-color: skyblue; color: maroon;">
<th></th>
<th> Account Number</th>
<th> Money In</th>
<th>Date</th>
<th> Money Out</th>
<th>Date</th>
<th></th>
<th></th>
</tr>
<tbody ng-repeat="m in Customers">
<tr style="height: 30px; background-color: skyblue; color: maroon;">
<td></td>
<td><span>{{m.Account_Number}}</span></td>
<td><span>{{m.Deposit| currency:"£"}}</span></td>
<td><span>{{m.Date}}</span></td>
<td><span>{{m.Withdrawal | currency:"£"}}</span></td>
<td><span>{{m.Date}}</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ここでは、アプリケーションを実行するときのスクリーンショットを示します。 アカウントの種類のラベルは、ここにデータ
をキャッチしていないネットワーク]タブの画面では、アカウントラベルを表示しようとしているところ、私は見ることができない
**これらの列を表示している<ラベルNG-ビュー= "お客様でM" NG-ショー= "のisVisible">アカウントの種類：{{m.Account_Type}} //この行は失敗しました** – Mohammad
Account_Typeは応答しますか？ネットワーク通話を確認してください。 –
コードを確認してください – Mohammad