title: Web API post data: object reference not set to an instance of an object
body: <p>I am trying to get Web API working with POST and I have the following in my Controller:</p>
  
  <pre><code>public class mainGridController : ApiController
      {
  
          public class formData
          {
              public string module { get; set; }
              public string group { get; set; }
              public string staff { get; set; }
          }
  
          public HttpResponseMessage Post([FromBody] formData data)
          {
              string string_group = "";
              string string_staff = "";
  
              if (data.group != null)
              {
  </code></pre>
  
  <p>But I seem to be getting "object reference is not set to an instance of an object" for data.group in my "if" statement.</p>
  
  <p>Here is my route info:</p>
  
  <pre><code>protected void Application_Start(object sender, EventArgs e)
          {
               GlobalConfiguration.Configuration.Routes.MapHttpRoute(
              name: "DefaultApi",
              routeTemplate: "api/{controller}/{data}",
              defaults: new { module = System.Web.Http.RouteParameter.Optional, data = System.Web.Http.RouteParameter.Optional}
              );
          }
  </code></pre>
  
  <p>Does anyone know what could be causing this? I am trying to post using jQuery.</p>
  
  <p>Here is my jQuery code:</p>
  
  <pre><code>var url = "api/mainGrid";
  var source = {
      datatype: 'json',
      contentType: 'application/json; charset=utf-8',
      url: url,
      processData: false,
      type: "POST",
      id: "SEQUENCE",
      root: 'rowsinfo',
      cache: false,
      columns: [],
      datafields: [],
      beforeprocessing: function (data) {
          var columnsdata = new Array();
          var datafieldsdata = new Array();
          for (k in data.columnsinfo) {
              var col = {};
              col.text = data.columnsinfo[k]["DISPLAYNAME"];
              col.datafield = data.columnsinfo[k]["DISPLAYNAME"];
              var datafields = {};
              datafields.name = data.columnsinfo[k]["DISPLAYNAME"];
              columnsdata.push(col);
              datafieldsdata.push(datafields);
              source.columns = columnsdata;
              source.datafields = datafieldsdata;
          }
          $("#jqxgrid").jqxGrid({ columns: source.columns });
      },
      data: {
          group: JSON.stringify(checkedGroups),
          staff: JSON.stringify(checkedStaff),
          module: selectedModuleSEQ
      }
  };
  </code></pre>
  
  <p>Thanks</p>