Angular Js web应用程序数据绑定无法从Sql数据库捕获数据

问题描述 投票：1回答：1

我正在使用wcf rest服务到angular js application.I我试图通过Wcf Rest Service显示来自sql数据库的数据。我正在使用Union函数来连接多表记录。我想将帐户信息显示到网页中，当我将帐户输入到输入字段并单击提交按钮但问题是它不是所需的数据..

这是班级。

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);
            }
        }

这是Angularjs代码。

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

这是我运行应用程序时的屏幕截图。帐户类型标签不会捕获数据

enter image description here

这是网络选项卡屏幕截图enter image description here

javascript angularjs wcf
1个回答
0
投票

我无法看到您在哪里显示帐户标签？您只显示这些列

            <th> Account Number</th>
            <th> Money In</th>
            <th>Date</th>
            <th> Money Out</th>
            <th>Date</th>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.