Angularjs and WebAPI Put Method Parameter Always Null

Question

I have an application that all of a sudden stopped working. I cannot determine why this is as far as I know it should be working. I must be missing something very simple here. This is the code, the Angular code call the API and the API method does get call but the parameter to the method is always null. The call is a PUT call.

public static void Register(HttpConfiguration config)
{
    // Web API configuration and services

    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{value}",
        defaults: new { value = RouteParameter.Optional }
    );
}

That's my route just in case its the problem. But I don't think so since the method does get called just the parameter is not getting passed in.

[Authorize]
public class UsersController : ApiController
{
    // PUT api/users/undelete
    [HttpPut]
    public void Undelete(long? value)
    {
        if (!value.HasValue)
        {
            throw new ArgumentNullException("[UsersController => Undelete(long? value)]");
        }

        new UsersBoundary(this.repository).UndeleteUser(value.Value);
    }

    public UsersController(IUsersRepository repository)
    {
        this.repository = repository;
    }

    public UsersController() : this(new UsersRepository()) {  }

    private readonly IUsersRepository repository;
}

That is the Users Controller for the WebAPI nothing fancy here. The Undelete method does get called but the long? value parameter is always null.

(function () {
    'use strict';

    var app = angular.module('adminpowertools');

    var HomeController = function ($scope, homeService) {

        $scope.searchString = '';
        $scope.currentPage = 1;

        $scope.undelete = function(user) {
            homeService.undeleteUser(user.recordId);
            angular.forEach($scope.users, function(value, key) {
                if (value.recordId === user.recordId) {
                    value.deleted = 0;
                }
            });
        };
    };

    app.controller('HomeController', ['$scope', 'HomeService', HomeController]);

}());

This is my controller again very simple and I don't think anything here is broken but I am including it for completeness.

(function () {
    'use strict';

    var app = angular.module('adminpowertools');

    var HomeService = function ($http) {

        var undeleteUser = function(userId) {
            var uri = 'api/users/undelete';
            var data = { value: userId };

            return $http.put(uri, JSON.stringify(data)).success(function(data, status, headers, config) {
                return true;
            });
        };

        return {
            undeleteUser: undeleteUser
        };
    };

    app.factory('HomeService', ['$http', HomeService]);
}());

This is the service that calls the controller. Again it does call the controller just does not pass in the value that's set in the data variable. I have tried setting data to 'value=' + userId, I tried with double quotes and single quotes and no quotes nothing seems to work.

Any help would be greatly appreciated. Thank you.

Answer 1

You are passing the data (value in this case) via the body of the message rather than the Uri. By default, Web Api serializes the URI for query string parameters into variables on a particular method, not the body.

Change your Angular call to send value parameters via "params" property versus "data" parameter to $http. Note I refactored it into a config object to pass into $http to make it cleaner.

var undeleteUser = function(userId) {
        var config = {
            method: 'PUT',
            url: 'api/users/undelete',
            params: { value: userId }
        };            

        return $http(config).success(function(data, status, headers, config) {
            return true;
        });
    };