我有一个带有WCF的Web API项目。在我的代码中,我有一个名为CreatePerson的方法,它将用户输入的信息添加到SQL数据库中。我遇到的问题是,一旦我加载.aspx页面并点击我的“添加人员”按钮,然后调用一个支持的角度函数,通过$ http.post将该数据发送到CreatePerson方法,我得到开发工具中出现404错误,说它无法找到指定的地址。
这是我的代码:
family1.aspx:
as.character(V1) > '02:00:00'
IService.cs:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Service1.svc.cs" Inherits="WebApplication6.family1" %>
<!DOCTYPE html>
<html>
<head>
<h2>Family App</h2>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="familyCtrl">
<form ng-submit="addPerson()">
<input type="text" ng-model="firstNameInput" size="20" placeholder="First Name" />
<input type="text" ng-model="lastNameInput" size="20" placeholder="Last Name" />
<input type="number" ng-model="ageInput" size="20" placeholder="Age" />
<!--<input type ="number" ng-model="monthInput" stye=20 placeholder="Month" />/
<input type ="number" ng-model="dayInput" stye=20 placeholder="Day" />/
<input type ="number" ng-model="yearInput" stye=20 placeholder="Year" />-->
<input type="submit" value="Add New Person">
</form>
<br>
<table style ="width:50%">
<tr><td>Name</td><td>Age</td><td>Remove</td></tr>
<tr>
<td>
<div ng-repeat="per in family"><span ng-bind="per.FirstName"></span> <span ng-bind="per.LastName"></span></div>
</td>
<td> <div ng-repeat="per in family"><span ng-bind="per.Age"></span></div>
</td>
<td><div ng-repeat="per in family"><input type="checkbox" ng-model="per.IsActive" ></div></td>
</tr>
</table>
<p><button ng-click="remove()">Remove marked</button></p>
<script>
var app = angular.module('myApp', []);
app.controller('familyCtrl', function ($scope, $http) {
$scope.family = [];
var parameters = {FirstName : "Joseph", LastName :"Neathery", Age : 19};
$scope.addPerson = function () {
$scope.family.push({ FirstName: $scope.firstNameInput, LastName: $scope.lastNameInput, Age: $scope.ageInput, IsActive: false });
$http.post('/Service1/CreatePerson', parameters);
}
$scope.remove = function () {
var oldFamily = $scope.family;
$scope.family = [];
angular.forEach(oldFamily, function (per) {
if ((!per.IsActive))
$scope.family.push(per);
});
};
});
</script>
</body>
</html>
Service1.svc.cs:
namespace WebApplication6
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IService
{
[WebInvoke(UriTemplate="/Service1/CreatePerson", Method ="POST", RequestFormat =WebMessageFormat.Json)]
[OperationContract]
void CreatePerson(Person p);
}
}
的Web.config:
public class Service1 : IService
{
public void CreatePerson(Person p)
{
using (var conn = new SqlConnection(ConfigurationManager.ConnectionStrings["FamilyAppConnectionString"].ConnectionString))
{
var command = new SqlCommand("dbo.Person__Create", conn);
command.CommandType = System.Data.CommandType.StoredProcedure;
command.Parameters.Add(new SqlParameter("FirstName", p.FirstName));
command.Parameters.Add(new SqlParameter("LastName", p.LastName));
command.Parameters.Add(new SqlParameter("Age", p.Age));
conn.Open();
command.ExecuteNonQuery();
}
}
}
}