Question

My javascript function is calling my MVC 4 controller, but the parameter is always null. This seems to be a common problem, and I’ve tried a few things I’ve researched, but nothing is working. Any idea why it’s always null?

My javascript GetEntries() function correctly creates an alert that shows the value:

function GetEntries(firstLetter) {
    alert(firstLetter);
    $.post('/Home/GetEntries',
           firstLetter,
           EntriesReceived());
}

My controller method breakpoint gets hit:

public void GetEntries(string firstLetter)
{
    Debug.WriteLine(firstLetter);
}

However, firstLetter is always null. I’m not sure what to do.

Failed attempts:

I tried posting using JSON.stringify.

function GetEntries(firstLetter) {
    alert(firstLetter);
    var firstLetterAsJson = JSON.stringify(firstLetter);
    $.post('/Home/GetEntries',
           { jsonData: firstLetterAsJson },
            EntriesReceived());
}

I tried adding the HttpPost attribute to my controller:

[HttpPost]
public void GetEntries(string firstLetter)
{
    Debug.WriteLine(firstLetter);
}

I tried changing the parameter name to “id” to match my route mapping:

[HttpPost]
public void GetEntries(string id)
{
    Debug.WriteLine(id);
}

Answer 1

The following should work

function GetEntries(firstLetter) {
    $.post('/Home/GetEntries', { firstLetter: firstLetter }, EntriesReceived);
}

Also notice how the EntriesReceived callback is passed to the $.post function as third argument. In your code you seem to be calling the function (EntriesReceived()) instead of passing it as callback. Here I assume that this function is defined like this:

function EntriesReceived(result) {
    // handle the result of the AJAX call here
}

And if you want to send it as a JSON request you should use the $.ajax method which allows you to specify the proper request content type:

function GetEntries(firstLetter) {
    $.ajax({
        url: '/Home/GetEntries',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ firstLetter: firstLetter }),
        success: function(result) {
            // handle the result of the AJAX call here
        }
    });
}

Another problem I see with your controller action is that you defined it as void. In ASP.NET MVC the common established convention is that all controller actions must return instances of the ActionResult class. But if you don’t want to return anything to the client then use the specific ActionResult for this case – EmptyResult:

[HttpPost]
public ActionResult GetEntries(string firstLetter)
{
    Debug.WriteLine(firstLetter);
    return new EmptyResult();
}