title: Asp.Net Web API, AngularJS POST Request
body: <p>I want to make a post request and pass a string in the request body.
  At the moment there is the following controller asp.net and angularjs code.
  The problem is that the parameter "str" comes equal to null. What am I doing wrong?</p>
  
  <p>I tried to set angularjs Content-Type as "application / json" and as "text / plain".
  I tried in asp.net with and without [FromBody] option.
  Everything is based on NET.Framework 4.6.2</p>
  
  <pre><code>[Route("sections/add")]
      [HttpPost]
      public HttpResponseMessage AddSection([FromBody]string str)
      {
          var response = this.Request.CreateResponse();
  
          str = str + " 1";
  
          response.Content = new StringContent(str, Encoding.UTF8, "application/json");
          return response;
      }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var calcsApp = angular.module('calcsCatApp', []);
  
  calcsApp.controller('editController', ['$scope', '$rootScope', '$http', '$httpParamSerializerJQLike', function ($scope, $rootScope, $http, 
  $httpParamSerializerJQLike) { 
  
      $scope.addSection = function (sectionToAdd) {
          let url = 'api/sections/add';
          let jData = { str: "Section1" };
          $http({
              method: 'POST',
              url: url,
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
              data: $httpParamSerializerJQLike(jData)
          })
          .then(function (response) {
              alert('response OK: ' + response.data);
          }, function (response) {
              alert('response error: ' + response.data);
          });
      };
  
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="calcsCatApp"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div ng-controller="editController"&gt;
  &lt;input type="button" value="+" ng-click="addSection()"/&gt;
  &lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"&gt;
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>