title: Angular $http post with ASP.NET MVC
body: <p>What am I missing here? I'm trying to pass 2 fields(CustomerID and CompanyName) from my view into my controller. When I put a break point on my controller's action, both custID and Company name are null. I'm sure whatever I'm missing is easy but I'm just not getting into Angular. Any help would be greatly appreciated. Thanks!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="text" class="form-control" ng-model="new.CustomerID" /&gt;
  &lt;input type="text" class="form-control" ng-model="new.CompanyName" /&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$scope.AddCustomer = function () {
      debugger;
      var urlPost = "/Home/SaveCustomer/";
  
      console.log($scope.new);
      alert(urlPost);
      $http({
          method: 'POST',
          url: urlPost,
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          },
  
          data: { custID: $scope.new.CustomerID, CompanyName: $scope.new.CompanyName }
  
      }).success(function() {
          alert('Update Successfully!');
      });
  
  }
  </code></pre>
  
  <p><strong>C#</strong></p>
  
  <pre><code>[HttpPost]
  public void SaveCustomer(string custID, string CompanyName)
  {
  
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>A few weeks after this was posted and an answer was accepted, I found an easier way to accomplish this. Here is a code sample:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;input type="number" placeholder="CustomerID" ng-model="newCustomer.CustomerID" class="form-control" style="width: 130px" required/&gt;
   &lt;input type="text" placeholder="Customer Name" ng-model="newCustomer.CustomerName" class="form-control" style="width: 200px" required /&gt;
   &lt;input type="text" placeholder="Email" ng-model="newCustomer.CustomerEmail" class="form-control" style="width: 200px" required /&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$scope.newCustomer = { 
      CustomerID: '',
      CustomerName: '',
      CustomerEmail: ''
  };
  $scope.addCustomer = function () {
      $http.post("/Home/GetCustomer",
          {
              customerID: $scope.newCustomer.CustomerID,
              customerName: $scope.newCustomer.CustomerName,
              customerEmail: $scope.newCustomer.CustomerEmail
          }).error(function (responseData) {
              alert(responseData);
          })
      .success(function () {
          alert('Updated Successfully');
  });
  </code></pre>
  
  <p><strong>C# Controller</strong></p>
  
  <pre><code>[HttpPost]
  public void GetCustomer(int customerID, string customerName, string customerEmail)
  {
  
      //do something with values
  }
  </code></pre>