Angular js应用程序数据绑定无法加入记录_Angular_Entity Framework_Linq_Wcf

Angular js应用程序数据绑定无法加入记录

angular entity-framework linq wcf

Angular js应用程序数据绑定无法加入记录,angular,entity-framework,linq,wcf,Angular,Entity Framework,Linq,Wcf,我正在将wcf rest服务消费到angular js应用程序中。我想检索两个表记录并使用帐号将其合并。我想连接这两个表属性并将其显示到angular js应用程序中。但问题是，当我在输入字段中输入帐号时，并没有显示预期的记录，并且未能合并它这里是界面 [OperationContract] [WebInvoke(Method = "GET", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.J

我正在将wcf rest服务消费到angular js应用程序中。我想检索两个表记录并使用帐号将其合并。我想连接这两个表属性并将其显示到angular 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
    }
}

这是角度代码

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

@{
布局=空；
}
var app=angular.module（'MyApp'，[]）
app.controller（'MyController'，函数（$scope，$http，$window）{
$scope.IsVisible=false；
$scope.Search=函数（）{
var post=$http({
方法：“获取”，
url:“http://localhost:52098/HalifaxIISService.svc/TranscationDetails/“+encodeURIComponent（$scope.Account_Number），
数据类型：“json”，
标题：{
“接受”：“应用程序/json，文本/javascript，*/*；q=0.01”，
“内容类型”：“应用程序/json；字符集=utf-8”
}
});
post.then（函数（响应）{//.success（函数（数据=>）.then（函数（响应
var data=response.data；//从response提取数据
$scope.Customers=JSON.parse（数据）；//eval（data.d）=>JSON.parse（数据）
$scope.IsVisible=true；
}，函数（err）{
$window.alert（错误）；
});
}
});
账号：

@**@
帐号
帐户持有人姓名
数量
押金
数量
撤退
{{m.Account_Number}
{{m.帐户\持有人\姓名}
+{{m.Amount}}
{{m.transaction_Type}
-{{m.Amount}}
{{m.transaction_Type}

这是我运行应用程序并单击带有帐号的submit按钮时的屏幕截图。它应该显示帐号1的记录并合并两个表记录，但它也显示了记录的其余部分

这是数据库记录，其中我有所有账号为的记录。Linq to Entities无法识别

Convert.ToInt32

为

IQueryable

。因为Linq to Entities从您的代码生成SQL查询，并且

Convert.ToInt32

无法转换为查询。因此，您应该更改它

where x.Account_Number == Convert.ToInt32(y.Account_Number)

到

如果

y.Account\u Number

是字符串类型，我建议您在SQL Server和EF entity中将其转换为整数

编辑；

此外，where子句条件错误。您没有筛选从客户端发布的

帐号
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
}

为什么要手动序列化响应。不要这样做。Wcf应该执行它。对于angular js应用程序和Wcf服务，请求的响应是什么？它是否会意外返回？正如您所看到的，我希望连接两个表记录并将其显示到angular js应用程序中。返回是记录列表，响应格式是JSONI am询问您返回的数据是什么？
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
}