Angular JS 应用程序无法调用 WCF Rest Service Post 方法 [英] Angular JS application Failed to invoke WCF Rest Service Post Method
本文介绍了Angular JS 应用程序无法调用 WCF Rest Service Post 方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在将 Wcf 服务用于 Angular JS 应用程序，但它没有按照我的预期工作.我正在尝试使用 Sql 事务方法向一个帐户汇款到另一个帐户.当我单击 angular js 应用程序中的提交按钮时，它无法将输入值发布到 wcf 服务.我在控制台应用程序中检查了 Google Chrome，它没有显示任何错误，我还检查了网络选项卡，它接收来自输入文件.但问题是 Wcf 服务没有收到这些值
I am consuming Wcf Service into Angular JS application but its not working according my expection. I am trying to send money to one account to another account using Sql transaction method. When i clicked the submit button in angular js application it is unable to post the input values to wcf service.I checked in Google Chrome in Console Application its does not show any error and i also checked in Network tab , Its receiving all the values from input filed . But the problem is the values are not receiving by Wcf Service
这里是本地类名为 Money Transfer...
Here is the local class named Money Transfer...
{
[DataContract]
public class MoneyTransfer
{
string sender_account_no;
string sender_name;
string sender_sort_code;
string amount1;
string transcation_type;
string date;
string receiver_account_no;
string receiver_name;
string receiver_sort_code;
string amount2;
string transcation_type1;
string date1;
[DataMember]
public string Sender_Account_No
{
get { return sender_account_no; }
set { sender_account_no = value; }
}
[DataMember]
public string Sender_Name
{
get { return sender_name; }
set { sender_name = value; }
}
[DataMember]
public string Sender_Sort_Code
{
get { return sender_sort_code; }
set { sender_sort_code = value; }
}
[DataMember]
public string Amount
{
get { return amount1; }
set { amount1 = value; }
}
[DataMember]
public string Transcation_Type
{
get { return transcation_type; }
set { transcation_type = value; }
}
[DataMember]
public string Date
{
get { return date; }
set { date = value; }
}
[DataMember]
public string Receiver_Account_No
{
get { return receiver_account_no; }
set { receiver_account_no = value; }
}
[DataMember]
public string Receiver_Name
{
get { return receiver_name; }
set { receiver_name = value; }
}
[DataMember]
public string Receiver_Sort_Code
{
get { return receiver_sort_code; }
set { receiver_sort_code = value; }
}
[DataMember]
public string Amount1
{
get { return amount2; }
set { amount2 = value; }
}
[DataMember]
public string Transcation_Type1
{
get { return transcation_type1; }
set { transcation_type1 = value; }
}
[DataMember]
public string Date1
{
get { return date1; }
set { date1 = value; }
}
}
}
这是我的界面.
[OperationContract]
[WebInvoke(Method = "POST",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/MoneyTranfer")]
bool MoneyTranfer(MoneyTransfer mopneyTransfer);
这是我的实现.
public bool MoneyTranfer(MoneyTransfer mopneyTransfer)
{
int amount = System.Convert.ToInt32(mopneyTransfer.Amount);
int amount1 = System.Convert.ToInt32(mopneyTransfer.Amount1);
SqlConnection cn = new SqlConnection(ConnectionString);
string sql = "select Account_Balance from Current_Account_Details where Account_Number='" + mopneyTransfer.Sender_Account_No + "'";
SqlCommand cmd = new SqlCommand(sql, cn);
if (cn.State == ConnectionState.Closed)
cn.Open();
//amount = int.Parse(cmd.ExecuteScalar().ToString());
if (amount > 0)
{
int b;
int b1;
SqlCommand cmd1 = new SqlCommand();
SqlTransaction trans;
if (cn.State == ConnectionState.Closed)
cn.Open();
trans = cn.BeginTransaction();
cmd1.Connection = cn;
cmd1.CommandType = CommandType.Text;
cmd1.Transaction = trans;
cmd1.CommandText = "update Current_Account_Details set Account_Balance=Account_Balance-'" + mopneyTransfer.Amount + "' where Account_Number='" + mopneyTransfer.Sender_Account_No + "'";
b = cmd1.ExecuteNonQuery();
cmd1.CommandText = "update Reward_Account_Details set Account_Balance=Account_Balance+'" + mopneyTransfer.Amount1 + "' where Account_Number='" + mopneyTransfer.Receiver_Account_No + "'";
b1 = cmd1.ExecuteNonQuery();
if (b == 1 && b1 == 1)
{
trans.Commit();
using (SqlConnection con = new SqlConnection(ConnectionString))
{
//Create the SqlCommand object
//Create the SqlCommand object
SqlCommand cmd3 = new SqlCommand("Current_Account_WITHDRAR", con);
//Specify that the SqlCommand is a stored procedure
cmd3.CommandType = System.Data.CommandType.StoredProcedure;
//Add the input parameters to the command object
cmd3.Parameters.AddWithValue("@Account_Number", mopneyTransfer.Sender_Account_No);
cmd3.Parameters.AddWithValue("@Account_Holder_Name", mopneyTransfer.Sender_Name);
cmd3.Parameters.AddWithValue("@Amount", mopneyTransfer.Amount);
cmd3.Parameters.AddWithValue("@Sort_Code", mopneyTransfer.Sender_Sort_Code);
cmd3.Parameters.AddWithValue("@Transcation_Type", mopneyTransfer.Transcation_Type);
cmd3.Parameters.AddWithValue("@Date", mopneyTransfer.Date);
SqlCommand cmd2 = new SqlCommand("Reward_Account_Dposit", con);
//Specify that the SqlCommand is a stored procedure
cmd2.CommandType = System.Data.CommandType.StoredProcedure;
//Add the input parameters to the command object
cmd2.Parameters.AddWithValue("@Account_Number", mopneyTransfer.Receiver_Account_No);
cmd2.Parameters.AddWithValue("@Account_Holder_Name", mopneyTransfer.Receiver_Name);
cmd2.Parameters.AddWithValue("@Amount", mopneyTransfer.Amount1);
cmd2.Parameters.AddWithValue("@Sort_Code", mopneyTransfer.Receiver_Sort_Code);
cmd2.Parameters.AddWithValue("@Transcation_Type", mopneyTransfer.Transcation_Type1);
cmd2.Parameters.AddWithValue("@Date", mopneyTransfer.Date1);
//Open the connection and execute the query
con.Open();
cmd2.ExecuteNonQuery();
cmd3.ExecuteNonQuery();
return true;
//con.Close();
}
}
else
trans.Rollback();
return false;
}
return false;
}
这是脚本代码.
/// <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.Sender_Account_No = "";
$scope.Sender_Name = "";
$scope.Sender_Sort_Code = "";
$scope.Amount = "";
$scope.Transcation_Type = "";
$scope.Date = "";
$scope.Receiver_Account_No = "";
$scope.Receiver_Name = "";
$scope.Receiver_Sort_Code = "";
$scope.Amount1 = "";
$scope.Transcation_Type1 = "";
$scope.Date1 = "";
}
$scope.transfer = function () {
var User = {
Sender_Account_No: $scope.Sender_Account_No,
Serder_Name: $scope.Serder_Name,
Sender_Sort_Code: $scope.Sender_Sort_Code,
Amount: $scope.Amount,
Transcation_Type: $scope.Transcation_Type,
Date:$scope.Date ,
Receiver_Account_No: $scope.Receiver_Account_No ,
Receiver_Name: $scope.Receiver_Name,
Receiver_Sort_Code: $scope.Receiver_Sort_Code ,
Amount1: $scope.Amount1,
Transcation_Type1: $scope.Transcation_Type1,
Date1:$scope.Date1
};
if ($scope.OperType === 1) {
var promisePost = myService.post(User);
promisePost.then(function (pl) {
$scope.Id = pl.data.Id;
$scope.msg = "Operation is successful";
}, function (err) {
$scope.msg = "Operation is failed !";
console.log("Some error Occured" + err);
});
} else {
}
};
}]);
app.service("myService", function ($http) {
//Create new record
this.post = function (User) {
var request = $http({
method: "post",
url: "http://localhost:52098/HalifaxIISService.svc/MoneyTranfer",
data: JSON.stringify(User)
});
return request;
}
})
这是 HTML 代码..
Here is the HTML Code ..
@{
Layout = null;
}
<html data-ng-app="WebClientModule">
<head title="ASAS">
<title></title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/MoneyTransfer.js"></script>
</head>
<body>
<table id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td>
<div style="color: red;">{{msg}}</div>
<table style="border: solid 4px Red; padding: 2px;">
<tr>
<td></td>
<td>
<span>Sender Account No</span>
</td>
<td>
<input type="text" id="sender_account_no" data-ng-model="Sender_Account_No" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Serder_Name</span>
</td>
<td>
<input type="text" id="serder_name" required data-ng-model="Serder_Name" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Sender_Sort_Code</span>
</td>
<td>
<input type="text" id="sender_sort_code" required data-ng-model="Sender_Sort_Code" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Amount_to_Send</span>
</td>
<td>
<input type="text" id="amount_to_send" required data-ng-model="Amount" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Transcation_Type</span>
</td>
<td>
<input type="text" id="transcation_type" required data-ng-model="Transcation_Type" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Date</span>
</td>
<td>
<input type="text" id="date" required data-ng-model="Date" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Reciver Account No</span>
</td>
<td>
<input type="text" id="render_account_no" data-ng-model="Reciver_Account_No" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Reciver_Name</span>
</td>
<td>
<input type="text" id="reciver_name" required data-ng-model="Reciver_Name" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Reciver_Sort_Code</span>
</td>
<td>
<input type="text" id="reciver_sort_code" required data-ng-model="Reciver_Sort_Code" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Amount_to_Recived</span>
</td>
<td>
<input type="text" id="amount_to_recive" required data-ng-model="Amount1" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Transcation_Type</span>
</td>
<td>
<input type="text" id="transcation_type1" required data-ng-model="Transcation_Type1" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Date</span>
</td>
<td>
<input type="text" id="date1" required data-ng-model="Date1" require="" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="Createuser" value="Submit" data-ng-click="transfer()" />
<input type="button" id="Clear" value="Clear" data-ng-click="Clear()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/RegistrationScript/MoneyTransfer.js"></script>
这是在视图解析时请求 PlayLoad 的值..
Here is Values on Request PlayLoad on View Parsed..
{"Sender_Account_No":"3","Serder_Name":"rasel khan","Sender_Sort_Code":"11-00-11","Amount":"123900","Transcation_Type":"Withdraw","Date":"11/22/11","Amount1":"123900","Transcation_Type1":"deposit","Date1":"11/22/12"}
这是我运行应用程序时的屏幕截图..
Here is the screen shot when I run the application..
任何反馈或建议都将受到高度评价.谢谢
Any feedback or suggestion would be highley appricited . Thanks
推荐答案
将 wcf 服务上的界面更改为，
Change your interface on wcf service as,
[OperationContract]
[WebInvoke(Method = "POST",
UriTemplate = "/MoneyTranfer",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Bare)]
bool MoneyTranfer(MoneyTransfer mopneyTransfer);
这篇关于Angular JS 应用程序无法调用 WCF Rest Service Post 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
