Angular JS应用程序无法调用WCF Rest服务Post方法
问题描述:
我正在将Wcf服务用于Angular JS应用程序,但它并未按照我的预期工作。我正尝试使用Sql事务处理方法将资金汇入一个帐户。当我点击角度js应用程序中的提交按钮时,它无法将输入值发布到wcf服务。我在控制台应用程序的Google Chrome中检查了它没有显示任何错误,我也检查了网络选项卡,它从输入字段。但问题是值不受WCF服务接收Angular JS应用程序无法调用WCF Rest服务Post方法
这里被命名为资金转移本地类...
{
[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代码..
@{
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价值观..
{"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"}
下面是截图,当我运行应用程序。 。
任何意见或建议都会受到强烈的指责。由于
答
更改的WCF服务作为您的接口,
[OperationContract]
[WebInvoke(Method = "POST",
UriTemplate = "/MoneyTranfer",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Bare)]
bool MoneyTranfer(MoneyTransfer mopneyTransfer);
答
您的要求不包含成功或错误回调
var request = $http({
method: "post",
url: :http://localhost:52098/HalifaxIISService.svc/MoneyTranfer",
data: JSON.stringify(User)
});
检查使用的成功和错误回调函数找到确切的错误,
成功和错误回调$http.get("{url}")
.success(function(data) {
$scope.gists = data;
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
检查回调的
例子Angular js中的功能 https://www.peterbe.com/plog/promises-with-$http
角JS应用程序能够发布的数据服务,但WCF服务不接受它 – Mohammad
你只要它不工作 – Mohammad
@Mohammad HTTPS链接:// WWW .peterbe.com/plog/promises-with- $ http – umasankar