Angular js应用程序数据绑定无法加入记录
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular js应用程序数据绑定无法加入记录相关的知识,希望对你有一定的参考价值。
我正在将wcf rest服务用于angular js应用程序。我想检索两个表记录并使用帐号合并它。我想连接这两个表属性并将其显示到角度js应用程序中。但问题是当我在输入字段中输入帐号时未显示预期记录且未能合并它。
这是界面。
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/TranscationDetails/{Account_Number}")]
string TranscationDetails(string Account_Number);
这是实施。
public string TranscationDetails(string Account_Number)
{
using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
{
var CombinedQuery = (from x in context.Current_Account_Deposit
join y in context.Current_Account_Withdraw
on x.Account_Number equals y.Account_Number
where x.Account_Number ==(y.Account_Number)
select new
{
x.Account_Number,
x.Account_Holder_Name,
x.Transcation_Type,
x.Amount,
Transcation_Type1=y.Transcation_Type,
Amount1=y.Amount,
// put other properties here
}).ToList();
var js = new System.Web.Script.Serialization.javascriptSerializer();
return js.Serialize(CombinedQuery); // return JSON string
}
}
这是Angular代码。
@{
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/TranscationDetails/" + 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 />
<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>Account Holder Name</th>
<th> Amount</th>
<th> Deposit </th>
<th> Amount</th>
<th> Withdraw</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.Account_Holder_Name}}</span></td>
<td><span>+{{m.Amount}}</span></td>
<td><span>{{m.Transcation_Type}}</span></td>
<td><span>-{{m.Amount}}</span></td>
<td><span>{{m.Transcation_Type}}</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这是我运行应用程序并单击带有帐号的提交按钮时的屏幕截图。它应显示帐号1的记录并合并两个表记录,但它也显示记录的其余部分以及
答案
Linq to Entities无法将Convert.ToInt32
视为IQueryable
。因为Linq to Entities从您的代码构建SQL查询,而Convert.ToInt32
无法转换为查询。所以,你应该改变它;
where x.Account_Number == Convert.ToInt32(y.Account_Number)
至
where x.Account_Number == y.Account_Number
如果y.Account_Number
是一个字符串类型,我建议你将它转换为SQL Server和EF实体中的整数。
编辑;
另外,where子句条件错误。您没有过滤从客户端发布的Account_Number
。
var accountNumber = int.Parse(Account_Number);//It could be better to use TryParse
using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
{
var CombinedQuery = (from x in context.Current_Account_Deposit
join y in context.Current_Account_Withdraw
on x.Account_Number equals y.Account_Number
where x.Account_Number == accountNumber //Modify it
select new
{
x.Account_Number,
x.Account_Holder_Name,
x.Transcation_Type,
x.Amount,
Transcation_Type1=y.Transcation_Type,
Amount1=y.Amount,
// put other properties here
}).ToList();
var js = new System.Web.Script.Serialization.JavaScriptSerializer();
return js.Serialize(CombinedQuery); // return JSON string
}
以上是关于Angular js应用程序数据绑定无法加入记录的主要内容,如果未能解决你的问题,请参考以下文章
在 Angular JS 中检索 Iframe 内的数据绑定值
Angular.Js 性能、大型数据集、ng-repeat、带有过滤器和双向绑定的 html 表