Pass data using http post in angularjs and Asp .Net Web Api

Question

I am trying to use post method of Web API from angularjs code but the data that I am sending from $http is not reaching to Web API method. The planDetailsVM parameter remains null. Below is my code-

Web API Controller code-

public class RateCalculationController : ApiController
{

    [HttpPost]
    public RateCalcOutParmDTO GetPlanRateCalculation(PlanDetailsVM planDetailsVM) 
    {
        //planDetailsVM remains null

        RateCalcOutParmDTO rateCalcOutParmDTO = new RateCalcOutParmDTO();

        // Some operation here

        return rateCalcOutParmDTO;
    }
}

Here planDetailsVM remains null.

AngularJs Code-

 $http({
    url: key_Url_GetPlanRateCalculation,
    method: 'Post',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    params: $scope.PlanDetails
    }).then(function (result) {
        //Some operation here
   });

Route mapping code-

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

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
        var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
        config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);
    }

I tried to follow one of the solution at this link AngularJs $http.post() does not send data but it's not working for me. What can I need to do so that planDetailsVM receives the posted data from AngularJS http post?

PlanDetails data-

 $scope.PlanDetails = { QuoteName: null, BenefitAmountId: 0, BenefitAmountValue: null, DoD_Id: 0, DoD_Value: null, EPBD_Id: null, EPBD_Value: null, _DisplayMsg: null, _DisplayFlag: false };

What properties are on the `PlanDetailsVM` object and what properties are on `$scope.PlanDetails`? The property names between the objects need to match. — Ben Black, Apr 16 '15 at 18:57
What does the value of `$scope.PlanDetails` look like when you post? — Jasen, Apr 16 '15 at 19:00
Also, try renaming `params:` to `data:`, last I checked `params:` was for `$http.get`, I don't know if it works for both though. — Ben Black, Apr 16 '15 at 19:06
Thank you so much Ben.... I replaced Params with data and now it's working. You can write your answer so that I can mark it as solution. Thanks once again. — Anil kumar, Apr 16 '15 at 19:18
Why are you doing a form post? You can post json data into Web API and not have to use form encoding. — Kent Cooper, Apr 16 '15 at 19:21

score 0 · Accepted Answer · answered Apr 16 '15 at 22:30

I was able to solve this issue by just replacing key "params:" with "data:" in the https post request as suggested by Ben. Below is the angularJS code that did the work-

$http({
url: key_Url_GetPlanRateCalculation,
method: 'Post',
data: $scope.PlanDetails
}).then(function (result) {
    //Some operation here
});

Pass data using http post in angularjs and Asp .Net Web Api

1 Answers1