【问题标题】:Wcf Rest Post Method Failed to Received Parameters From Angular JS ApplicationWcf Rest Post 方法无法从 Angular JS 应用程序接收参数
【发布时间】:2018-05-26 19:48:08
【问题描述】:

我正在将 wcf rest 服务用于 angular js 应用程序。我正在尝试根据从 angular js 应用程序发布的帐号检索单个记录。但问题是当我单击提交按钮并将值发布到 wcf 服务时,我收到以下错误..

服务器在处理请求时遇到错误。异常消息是“参数化查询 '(@Account_Number nvarchar(4000))SELECT * FROM Current_Account_De' 需要参数 '@Account_Number',但未提供该参数。”。有关更多详细信息,请参阅服务器日志。异常堆栈跟踪是:

我调试应用程序,将鼠标悬停在方法上,接收的值为 NULL。

这是界面。

  [OperationContract]
       [WebInvoke(Method = "POST",
       RequestFormat = WebMessageFormat.Json,
       ResponseFormat = WebMessageFormat.Json,
       UriTemplate = "/GetAccountDetails")]
        string  GetAccountDetails(string Account_Number);

这是实现。

  public string GetAccountDetails(string Account_Number)
        {
                //Convert.ToInt32(Account_Number);
            List<object> customers = new List<object>();
            string sql = "SELECT * FROM Current_Account_Details WHERE Account_Number=@Account_Number";
            using (SqlConnection conn = new SqlConnection())
            {
                conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
                using (SqlCommand cmd = new SqlCommand(sql))
                {
                    cmd.Parameters.AddWithValue("@Account_Number",Account_Number);
                    cmd.Connection = conn;
                    conn.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {

                            customers.Add(new
                            {
                                Account_Number = sdr["Account_Number"],
                                Account_Creation_Date = sdr["Account_Creation_Date"],
                                Account_Type = sdr["Account_Type"],
                                Branch_Sort_Code = sdr["Branch_Sort_Code"],
                                Account_Fees = sdr["Account_Fees"],
                                Account_Balance = sdr["Account_Balance"],
                                Over_Draft_Limit = sdr["Over_Draft_Limit"],




                            });
                        }
                    }
                    conn.Close();
                }

                return (new JavaScriptSerializer().Serialize(customers));
            }

        }

这是脚本代码。

var app = angular.module("WebClientModule", [])
    .controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {
        var Account_Number = $scope.Account_Number;
        $scope.search = function (Account_Number) {
            var promisePostSingle = myService.postbyAccount_Number(Account_Number);

            promisePostSingle.then(function (pl) {
                var res = pl.data;
                $scope.Account_Number = res.Account_Number;
                $scope.Account_Creation_Date = res.Account_Creation_Date;
                $scope.Account_Type = res.Account_Type;
                $scope.Branch_Sort_Code = res.Branch_Sort_Code;
                $scope.Account_Fees = res.Account_Fees;
                $scope.Account_Balance = res.Account_Balance;
                $scope.Over_Draft_Limit = res.Over_Draft_Limit;

                //   $scope.IsNewRecord = 0;
            },
                function (errorPl) {
                    console.log('failure loading Employee', errorPl);

                });
        }

    }]);




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

    this.postbyAccount_Number = function (Account_Number) {
        return $http.post("http://localhost:52098/HalifaxIISService.svc/GetAccountDetails?Account_Number=" + Account_Number);
    };
   })

这是 HTML 代码。

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app="WebClientModule">
<head>
    <meta name="viewport" content="width=device-width" />

    <title>AccountBalance</title>
    <script src="~/Scripts/angular.min.js"></script>

    <script src="~/RegistrationScript/AccountBalance.js"></script>
</head>
<body>
    <div data-ng-controller="Web_Client_Controller">
        Enter Account_Number: <input type="text" ng-model="Account_Number" />
        <input type="button"  value="search" ng-click="search(Account_Number)" />

            <table id="tblContainer"    ng-show="IsVisible" >
                <tr>
                    <td>
                        <table style="border: solid 2px Green; padding: 5px;">
                            <tr style="height: 30px; background-color: skyblue; color: maroon;">
                                <th></th>
                                <th>Account Number</th>
                                <th>Account Creation Date</th>
                                <th>Account Type</th>
                                <th>Branch Sort Code</th>
                                <th>Account Fees</th>
                                <th>Account Balance</th>
                                <th>Over Draft Limit</th>

                                <th></th>
                                <th></th>
                            </tr>
                            <tbody data-ng-repeat="user in Users">
                                <tr>
                                    <td></td>
                                    <td><span>{{user.Account_Number}}</span></td>
                                    <td><span>{{user.Account_Creation_Date}}</span></td>
                                    <td><span>{{user.Account_Type}}</span></td>
                                    <td><span>{{user.Branch_Sort_Code}}</span></td>

                                    <td><span>{{user.Account_Fees}}</span></td>
                                    <td><span>{{user.Account_Balance}}</span></td>
                                    <td><span>{{user.Over_Draft_Limit}}</span></td>
                                    <td>

                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td>

                        <div style="color: red;">{{Message}}</div>

                    </td>
                </tr>
            </table>
        </div>
        </body>


</html>

这是调试模式的屏幕截图..

这里的结果是 account 为 null

这是谷歌浏览器的屏幕截图..

【问题讨论】:

    标签: javascript c# angularjs rest wcf


    【解决方案1】:

    您的问题是您试图提供 Post 参数作为 GET 查询参数。试试

     this.postbyAccount_Number = function (Account_Number) {
            return $http.post("http://localhost:52098/HalifaxIISService.svc/GetAccountDetails", {Account_Number:Account_Number.toString()});
        };
    

    还要将此添加到您的 WCF 合同中: [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped)]

    【讨论】:

    • @Mohammad 尝试添加带有正文样式的 webinvoke(请参阅我的更新)
    • 你能给我们看一下 Chrome 发布那个帖子的截图吗?看起来请求的主体是空的(根据那个例外)
    • 另外,您可能会遇到 CORS 问题:stackoverflow.com/questions/10369064/…
    • 另一种方法也是 POST 吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-28
    • 2018-03-24
    • 2012-08-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多