Angular JS提交获取输入文本值而不发布到Wcf服务

时间:2017-10-16 19:30:32

标签: javascript angularjs wcf

我试图将输入文本值捕获到Angular JS Application中。我使用javaScript将当前日期和时间显示到文本字段中,文本框能够获取当前的获取和时间。我在点击提交按钮时尝试将输入值发布到wcfr服务,但问题是它无法将日期和时间发布到wcf服务。我在控制台窗口中检查了Google Chrome,并且没有发布当前日期和时间...

这是我的HTML代码:

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app="WebClientModule">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/RegistrationScript/CreateCurrentAccount.js"></script>
    <script>
    function myFunction() {
        document.getElementById('account_creation_date').placeholder= Date();
    }
    </script>
</head>

<body onload="myFunction()">

    <table id="tblContainer" data-ng-controller="Web_Client_Controller">
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>
                <table style="border: solid 4px Red; padding: 2px;">

                    <tr>
                        <td></td>
                        <td>
                            <span>Account Creation Date</span>
                        </td>
                        <td>
                            <input type="text" id="account_creation_date" placeholder=" " data-ng-model="Account_Creation_Date" required="" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Account Type</span>
                        </td>
                        <td>
                            <input type="text" id="account_type" required data-ng-model="Account_Type" require="" />
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <span>Branch Sort Code</span>
                        </td>
                        <td>
                            <input type="text" id="branch_sort_code" data-ng-model="Branch_Sort_Code" required="" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Account Fee</span>
                        </td>
                        <td>
                            <input type="text" id="account_fee" required data-ng-model="Account_Fee" require="" />
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <span>Account Balance</span>
                        </td>
                        <td>
                            <input type="text" id="account_balance" data-ng-model="Account_Balance" required="" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span> Over Draft Limit</span>
                        </td>
                        <td>
                            <input type="text" id="over_draft_limit" required data-ng-model="Over_Draft_Limit" require="" />
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <span> Account Holder Id</span>
                        </td>
                        <td>
                            <input type="text" id="account_holder_id" required data-ng-model="Account_Holder_Id" require="" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="button" id="Login" value="Login" data-ng-click="login()" />
                        </td>
                    </tr>
                </table>
                <div style="color: red;">{{msg}}</div>

            </td>
        </tr>
    </table>
    </body>
</html>
<script src="~/RegistrationScript/CreateCurrentAccount.js"></script>

这是脚本文件代码。

///// <reference path="../angular.min.js" />  



var app = angular.module("WebClientModule", [])

    .controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {

        $scope.OperType = 1;

        //1 Mean New Entry  

        //To Clear all input controls.  
        function ClearModels() {

            $scope.OperType = 1;
            $scope.Account_Creation_Date = "";
            $scope.Account_Type = "";
            $scope.Branch_Sort_Code = "";
            $scope.Account_Fee = "";
            $scope.Account_Balance = "";
            $scope.Over_Draft_Limit = "";
            $scope.Account_Holder_Id = "";

        }
        $scope.login = function () {
            var User = {
                Account_Creation_Date: $scope.Account_Creation_Date,
                Account_Type: $scope.Account_Type,
                Branch_Sort_Code: $scope.Branch_Sort_Code,
                Account_Fee: $scope.Account_Fee,
                Account_Balance: $scope.Account_Balance,
                Over_Draft_Limit: $scope.Over_Draft_Limit,
                Account_Holder_Id: $scope.Account_Holder_Id 
            };
            myService.AuthenticateUser(User).then(function (pl) {
                console.log(pl.data)
                if (pl.data) {
                    $scope.msg = "Account Created Successfully";
                    window.location.href = "/Register/Index";
                }
                else {
                    $scope.msg = "Account is not Created !";
                    console.log("Some error Occured" + err);
                }
            }, function (err) {
                $scope.msg = "Account is not Created !";
                console.log("Some error Occured" + err);
            });
        };



    }]);



app.service("myService", function ($http) {



    this.AuthenticateUser = function (User) {
        return $http.post("http://localhost:52098/HalifaxIISService.svc/CreateCurrentAccountDetail", JSON.stringify(User));
    }
})

以下是网络选项卡中隐藏的值。

{"Account_Type":"Business","Branch_Sort_Code":"11-00-11","Account_Fee":"12.0","Account_Balance":"12300","Over_Draft_Limit":"123000","Account_Holder_Id":"2"}

这是运行应用程序时的屏幕截图..

Click here to see the result

0 个答案:

没有答案