title: Using $.ajax or $.post to call MVC 5 Controller method
body: <p>I'm trying to set up what should be a very simple call from an MVC page to a controller using JavaScript. This is my Controller:</p>
  
  <pre><code>Imports System.Web.Mvc
  
  Namespace Controllers
      Public Class DataController
          Inherits Controller
  
          Function Index() As ActionResult
              Return View()
          End Function
  
          &lt;HttpPost&gt;
          Function SaveData(payload As String) As String
              If payload IsNot Nothing AndAlso payload.Length &gt; 0 Then
                  Return "Good"
              Else
                  Return "Bad"
              End If
          End Function
  
      End Class
  End Namespace
  </code></pre>
  
  <p>this is my View (Index.vbhtml):</p>
  
  <pre><code>@Code
      ViewData("Title") = "Index"
  End Code
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  @Code
      Html.BeginForm()
      @:&lt;a href="#" onclick="SaveData();"&gt;Save Data&lt;/a&gt;
      Html.EndForm()
  End Code
  </code></pre>
  
  <p>and this is my JavaScript (included via the _layout.vbhtml file):</p>
  
  <pre><code>function SaveData() {
  
      var payload = "TEST_DATA_GOES_HERE";
  
      // Calls controller correctly but data is null
      $.ajax({
          url: "/Data/SaveData",
          type: "POST",
          processData: false,
          dataType: String,
          data: { payload: payload }
      })
      .done(function () { alert('Application saved.'); })
      .fail(function () { alert('Application failed to save.'); });
  
      // Returns a 500 error
      $.post("/Data/SaveData", { Payload: payload }, function (data) { alert('Application saved. ' + data); }, "String");
  
      // Calls controller correctly but data is null
      $.post("/Data/SaveData", payload, function () { alert('Application saved.' + data); }, "String");
  }
  </code></pre>
  
  <p>Everything connects up nicely when debugging but the <code>payload</code> variable arrives as <code>Nothing</code> in the <code>SaveData</code> function. I've tried using <code>$.post</code> but with similar problems and all the references I've found to using either method simply assume that it will work first time without error and don't have any troubleshooting tips.</p>
  
  <p>How do you configure the <code>$.ajax</code> or <code>$.post</code> functions to correctly call a controller and pass a simple string?  </p>