遇到400错误请求（Angular + WebAPI）的麻烦

Question

I am learning by trying to build a database that tracks comics. I can POST new comics and GET them with no trouble. But when I'd like to PUT, I run into a problem. I keep getting a bad request sent, but I think all the information is correct. I think all my info matches up, but I'm not sure what else is wrong.

All I am trying to do is update the comic list so you can track your physical and digital copies of the comic.

Thanks in advance.

Here is my DBController.cs:

 [Authorize]
    public IHttpActionResult Put(Comic comic)
    {
        string UserId = User.Identity.GetUserId();
        if (UserId == null) return BadRequest("You Must Be Logged In to Edit");

        else if (comic.UserId == UserId || User.IsInRole("Admin"))
        {

            using (ApplicationDbContext db = new ApplicationDbContext())
            {
                var currentComic = db.Comics.Find(comic.ComicId);
                currentComic.IsDigital = comic.IsDigital;
                currentComic.IsPhysical = comic.IsPhysical;
                db.SaveChanges();
            }
            return Ok();
        }

        else return BadRequest("Insufficient privileges");
    }
}

Here is my CollectionController.js:

$scope.physical = false;
$scope.digital = false;

$scope.updateComic = function (ComicId) {
        var comic = {
            ComicId: ComicId,
            IsPhysical: $scope.physical,
            IsDigital: $scope.digital,
            }
 return MarvelApiFactory.editComic(comic).then(function (data) {
        })
}

And my ApiFactory.js

 var editComic = function (comic) {

          var deferred = $q.defer();

          $http({
              url: '/api/ComicDB',
              method: "PUT",
              headers: { Authorization: "Bearer " + localStorage.getItem('token') },
              data: comic
          }).success(function () {
              deferred.resolve();
          }).error(function () {
              deferred.reject();
          })
          return deferred.promise;
      }



return {
        editComic: editComic,
    }

Here is my .html:

<button class="btn btn-danger"  ng-click="updateComic(x.ComicId)">Save</button>

And lastly, my error messages. Sorry, not really sure how/what you need. Last night when I was figuring this out, I had clicked on the network tab and was ble to find inner exceptions and such. Either I can't find them this time, or I didn't get any. But this is from my JS console:

PUT http://localhost:53612/api/ComicDB 400 (Bad Request)angular.js:9827 (anonymous function)angular.js:9628 sendReqangular.js:9344 serverRequestangular.js:13189 processQueueangular.js:13205 (anonymous function)angular.js:14401 Scope.$evalangular.js:14217 Scope.$digestangular.js:14506 Scope.$applyangular.js:21440 (anonymous function)jquery-1.10.2.js:5109 jQuery.event.dispatchjquery-1.10.2.js:4780 elemData.handle

Answer 1

PUT and DELETE are not enabled in IIS Express and IIS8 by default. You can enable these verbs by following these steps:

1. Open the applicationHost.config file on the machine running the Web Api application. The file is located at %userprofile%\\documents\\IIS{Express|8}\\config”.

2. scroll down to the bottom of the IIS applicationHost.config file and look for a handler entry that starts with:

    <add name="ExtensionlessUrl-Integrated-4.0"...`. 

3. In the "verb" attribute add PUT and DELETE so the "verb" attribute looks like: verb="GET,HEAD,POST,DEBUG,PUT,DELETE"