Error during JSON request

Question

Hi, I have a JSON request that check to the server if a username has been already taken during the registration procedure.

This is the jQuery call:

// Instant check availability of the username
$("#txtUserName").blur(function() {
    if ($("#txtUserName").val() == "") return;
    $.ajax({
        type: 'post',
        url: '/Login/CheckUserName',
        data: "{userName: '" + $("#txtUserName").val() + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(message) {
            //Set the spanChecking text letting user know if the uname is available
            if (message.d == true) {
                $("#userNameCheck").css({ "color": "red", "font-weight": "bold", "font-size": "small", "padding-left": "5px" });
                $("#userNameCheck").text("Non disponibile");
            }
            else {
                $("#userNameCheck").css({ "color": "green", "font-weight": "bold", "font-size": "small", "padding-left": "5px" });
                $("#userNameCheck").text("Disponibile");
            }
        },
        error: function(errormessage) {
            //this is just to see if everything is working. Remove before deploy
            $j("#userNameCheck").text(errormessage.responseText);
        }
    });
});

and this is the controller action that will serve the request

[HttpPost]
public JsonResult CheckUserName( string userName ) {
    if ( Membership.GetUser( userName ) == null )
        return Json(false);
    else
        return Json(true);
}

Anyway I dont understand why I am getting error 500 from the server. Looking at it with Fiddler I can see that the RAW request is

POST http://localhost:1037/Login/CheckUserName HTTP/1.1
Host: localhost:1037
Connection: keep-alive
Referer: http://localhost:1037/Login/Register
Content-Length: 22
Origin: http://localhost:1037
X-Requested-With: XMLHttpRequest
Content-Type: application/json; charset=UTF-8
Accept: application/json, text/javascript, */*
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3
Accept-Encoding: gzip,deflate,sdch
Accept-Language: it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

{userName: 'sampleuser'}

but the controller Action receive a null parameter for userName. I see this through Fiddler and even putting a breakpoint on the code.

Where am I doing wrong?

EDIT

The error returned back to the client is

The value cannot be null. Parameter name: username

Please note that the parameter Name in the error is not preserving the original case. Is this a behaviour of the membership provider or should I lower the case of the parameter?

Answer 1

A 500 indicates a server side error.

Answer 2

Try using this format for the data parameter in your call instead:

data: "userName=" + $("#txtUserName").val()

Answer 3

Have you checked the routing, and specifically the capitalisation?

Post your route for this call, maybe there's something there?

Answer 4

You are sending the request as JSON but there's nothing in the server that understands or expects this format. You have a controller action which expects application/x-www-form-urlencoded content type. Try this instead:

data: { userName: $('#txtUserName').val() },
contentType: 'application/x-www-form-urlencoded',

This also has the advantage to take care of properly url encoding the parameters sent to the server which in your version using string concatenations wasn't achieved.

Answer 5

This:

{userName: 'sampleuser'}

...is not valid JSON. This is, and might be what you want:

{"userName": "sampleuser"}

See the RFC for the details of the JSON format.