我正在使用 angularJS 和 Web Api 构建小型网络应用程序。我已经创建了后端，并且在使用 postman 进行测试时一切正常。但现在我无法让它在我的前端工作，至少不能用于 POST;PUT 和 DELETE 方法。 我已经尝试了一切，不，我有点绝望。
这是我的 Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using PlaylistWebApi.Models;
using PlaylistWebApi.Services;
namespace PlaylistWebApi.Controllers
{
public class SongsController : ApiController
{
private readonly ISongService _service;
public SongsController(ISongService service)
{
_service = service;
}
public IEnumerable<Song> Get()
{
IEnumerable<Song> items = null;
try
{
items = _service.GetAll();
}
catch (Exception)
{
var message = string.Format("Error while retrieving songs!");
throw new HttpResponseException(
Request.CreateErrorResponse(HttpStatusCode.InternalServerError, message));
}
return items;
}
public Song Get(int id)
{
Song item = null;
try
{
item = _service.Get(id);
}
catch (Exception)
{
var message = string.Format("Error while retrieving the song!");
throw new HttpResponseException(
Request.CreateErrorResponse(HttpStatusCode.InternalServerError, message));
}
if (item == null)
{
var message = string.Format("Error while retriving song!");
throw new HttpResponseException(
Request.CreateErrorResponse(HttpStatusCode.NotFound, message));
}
else
{
return item;
}
}
[AllowAnonymous]
[HttpOptions,HttpPost]
public Song Post([FromBody]Song song)
{
Song item = null;
try
{
item = _service.Add(song);
}
catch (Exception)
{
var message = string.Format("Error while adding new song!");
throw new HttpResponseException(
Request.CreateErrorResponse(HttpStatusCode.InternalServerError, message));
}
return item;
}
[AllowAnonymous]
[HttpOptions,HttpPut]
public void Put(int id, [FromBody]Song item)
{
try
{
_service.Update(item);
}
catch (Exception)
{
var message = string.Format("Error while editing song!");
throw new HttpResponseException(
Request.CreateErrorResponse(HttpStatusCode.InternalServerError, message));
}
}
[AllowAnonymous]
[HttpOptions,HttpDelete]
public void Delete(int id)
{
try
{
_service.Remove(id);
}
catch (Exception)
{
var message = string.Format("Error while removing song!");
throw new HttpResponseException(
Request.CreateErrorResponse(HttpStatusCode.InternalServerError, message));
}
}
}
}
这是我的前端回调
playlistService.service('dataService', ['$http', function ($http) {
var urlBase = 'http://localhost:9000/api';
this.getSongs= function () {
return $http.get(urlBase+ '/songs');
};
this.getSong = function (id) {
return $http.get(urlBase + '/songs/' + id);
};
this.insertSong = function (song) {
return $http.post(urlBase+ '/songs/', song);
};
this.updateSong = function (song) {
return $http.put(urlBase+'/songs/'+ song.ID , song);
};
this.deleteSong = function (id) {
return $http.delete(urlBase + '/songs/' + id);
};
}]);
删除方法错误
Remote Address:[::1]:9000
Request URL:http: //localhost:9000/api/songs/5
Request Method:OPTIONS
Status Code:500 Internal Server Error
Response Headers
view source
Access-Control-Allow-Headers:*
Access-Control-Allow-Methods:*
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:2236
Content-Type:application/json; charset=utf-8
Date:Fri, 03 Jul 2015 00:22:25 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?RDpccmVwb3NpdG9yeVxQbGF5bGlzdFdlYkFwaVxQbGF5bGlzdFdlYkFwaVxhcGlcc29uZ3NcNQ==?=
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept
Access-Control-Request-Method:DELETE
Connection:keep-alive
Host:localhost:9000
Origin:http: //127.0.0.1:50119
Referer:http: //127.0.0.1:50119/index.html
Operation=ApiControllerActionSelector.SelectAction, Exception=System.InvalidOperationException: Multiple actions were found that match the request:
Put on type PlaylistWebApi.Controllers.SongsController
delete on type PlaylistWebApi.Controllers.SongsController
at System.Web.Http.Controllers.ApiControllerActionSelector.ActionSelectorCacheItem.SelectAction(HttpControllerContext controllerContext)
at System.Web.Http.Controllers.ApiControllerActionSelector.SelectAction(HttpControllerContext controllerContext)
at System.Web.Http.Tracing.Tracers.HttpActionSelectorTracer.<>c__DisplayClass2.<System.Web.Http.Controllers.IHttpActionSelector.SelectAction>b__0()
at System.Web.Http.Tracing.ITraceWriterExtensions.TraceBeginEnd(ITraceWriter traceWriter, HttpRequestMessage request, String category, TraceLevel level, String operatorName, String operationName, Action`1 beginTrace, Action execute, Action`1 endTrace, Action`1 errorTrace)
iisexpress.exe Error: 0 : Operation=SongsController.ExecuteAsync, Exception=System.InvalidOperationException: Multiple actions were found that match the request:
Put on type PlaylistWebApi.Controllers.SongsController
delete on type PlaylistWebApi.Controllers.SongsController
at System.Web.Http.Controllers.ApiControllerActionSelector.ActionSelectorCacheItem.SelectAction(HttpControllerContext controllerContext)
at System.Web.Http.Controllers.ApiControllerActionSelector.SelectAction(HttpControllerContext controllerContext)
at System.Web.Http.Tracing.Tracers.HttpActionSelectorTracer.<>c__DisplayClass2.<System.Web.Http.Controllers.IHttpActionSelector.SelectAction>b__0()
at System.Web.Http.Tracing.ITraceWriterExtensions.TraceBeginEnd(ITraceWriter traceWriter, HttpRequestMessage request, String category, TraceLevel level, String operatorName, String operationName, Action`1 beginTrace, Action execute, Action`1 endTrace, Action`1 errorTrace)
at System.Web.Http.Tracing.Tracers.HttpActionSelectorTracer.System.Web.Http.Controllers.IHttpActionSelector.SelectAction(HttpControllerContext controllerContext)
at System.Web.Http.ApiController.ExecuteAsync(HttpControllerContext controllerContext, CancellationToken cancellationToken)
at System.Web.Http.Tracing.Tracers.HttpControllerTracer.<ExecuteAsyncCore>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
at System.Web.Http.Tracing.ITraceWriterExtensions.<TraceBeginEndAsyncCore>d__18`1.MoveNext()
iisexpress.exe Information: 0 : Message='Will use same 'JsonMediaTypeFormatter' formatter', Operation=JsonMediaTypeFormatter.GetPerRequestFormatterInstance
iisexpress.exe Information: 0 : Message='Selected formatter='JsonMediaTypeFormatter', content-type='application/json; charset=utf-8'', Operation=DefaultContentNegotiator.Negotiate
iisexpress.exe Information: 0 : Response, Status=500 (InternalServerError), Method=OPTIONS, Url=http: //localhost:9000/api/songs/5, Message='Content-type='application/json; charset=utf-8', content-length=unknown'
iisexpress.exe Information: 0 : Operation=JsonMediaTypeFormatter.WriteToStreamAsync
iisexpress.exe Information: 0 : Operation=SongsController.Dispose
对于 POST 一个 PUT，我没有收到任何错误，它使用奇怪的 uri(我正在发布的对象)将我重定向回相同的位置。我做错了什么？
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-plus "></i> Songs</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i><a href="#">Home</a></li>
<li><i class="icon_mic_alt"></i>Songs</li>
<li><i class="fa fa-plus "></i>Add New</li>
</ol>
</div>
</div>
<!-- Form validations -->
<div class="row">
<div class="col-lg-12">
<section class="panel">
<header class="panel-heading">
Add New Song
</header>
<div class="panel-body">
<form class="form-validate form-horizontal " id="register_form" method="get" action="">
<div class="alert alert-block" >
<div ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
<button data-dismiss="alert" class="close close-sm" type="button" >{{alert.msg}}>
<i class="icon-remove"></i>
</button>
</div>
</div>
<div class="form-group">
<label for="songname" class="control-label col-lg-2">Song name <span class="required">*</span></label>
<div class="col-lg-10">
<input class="form-control" id="songname" name="songname" ng-model="songName" type="text" />
</div>
</div>
<div class="form-group">
<label for="filename" class="control-label col-lg-2">File Name <span class="required">*</span></label>
<div class="col-lg-10">
<input class="form-control" id="filename" name="filename" ng-model="fileName" type="text" />
</div>
</div>
<div class="form-group">
<label for="artistname" class="control-label col-lg-2">Username <span class="required">*</span></label>
<div class="col-lg-10">
<input class="form-control" id="artistname" name="artistname" ng-model="artistName" type="text" />
</div>
</div>
<div class="form-group">
<label for="album" class="control-label col-lg-2">Album</label>
<div class="col-lg-10">
<input class="form-control" id="album" name="album" ng-model="album" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-primary" ng-click="addSong()">Save</button>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
最佳答案
这里有几个问题。首先，您有 OPTIONS 请求的异常(exception)情况。
Multiple actions were found that match the request:
Put on type PlaylistWebApi.Controllers.SongsController
delete on type PlaylistWebApi.Controllers.SongsController
从您的其他操作中删除 HttpOptions 并创建专用端点。
[HttpOptions]
public HttpResponseMessage Options()
{
return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
}
接下来，您将重定向回带有奇怪 url 的表单，这表明您可能已经允许标准表单提交。 Angular 会为您处理这件事——只需删除 action 参数并指定 ng-submit。不要忘记从按钮中删除 ng-click。
<form id="register_form" ng-submit="addSong()">
<button type="submit" class="btn btn-primary">Save</button>
</form>
来自 ngSubmit :
Enables binding angular expressions to onsubmit events.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.
关于c# - POST、PUT 和 DELETE 方法在我的 Web 应用程序中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31196899/