Can't get the EditorFor value in jquery?

Question

I have an <td>@Html.EditorFor(m => m.User.Username)</td> in RegisterView. Here is the HTML on fireBUg:

  <td>
<input id="User_Username" class="text-box single-line" type="text" value="" name="User.Username" data-val-required="The Username field is required." data-val="true">
</td>

I write a litte jquery code to check username whether or not the username exits. Here is my code:

function CheckUserNameExits() {
$("#User_Username").on("blur", function () {
    $("#User_Username").addClass("thinking");
    var username = $("#User_Username").val();
    $.ajax({
        url: "/Account/CheckUsername",
        data: { userName: username },
        dataType: "json",
        type: "POST",
        error: function () {
            return;
        },
        success: function (data) {
            if (data) {
                $("#User_Username").addClass("approved");
            }
            else {
                $("#User_Username").addClass("denied");
                $(".field-validation-error").html("The username already exits.");
            }
        }
    });
});

}

But when i fill the textbox and leave it. The POST value always null. I'm sure my script works fine, it always return true because of the post value is null. My controller method:

[HttpPost]
    public ActionResult CheckUsername(string userName)
    {
        var user = IUserRepo.GetUserByUrName(userName);
        if (user!= null)
            return Json(false);
        return Json(true);
    }

In debug the userName parameter always null. I try to change $("#User_Username") by $(".text-box") but the POST value also null. Any sugesstion for me?

Answer 1

Give id to your EditFor and try

@Html.EditorFor(m => m.User.Username,new{id="EDUserName"})

function CheckUserNameExits() {
$("#EDUserName").on("blur", function () {
    $("#EDUserName").addClass("thinking");
    var username = $("#EDUserName").val();
    $.ajax({
        url: "/Account/CheckUsername",
        data: { userName: username },
        dataType: "json",
        type: "POST",
        error: function () {
            return;
        },
        success: function (data) {
            if (data) {
                $("#EDUserName").addClass("approved");
            }
            else {
                $("#EDUserName").addClass("denied");
                $(".field-validation-error").html("The username already exits.");
            }
        }
    });
});
}

Answer 2

Try this

function CheckUserNameExits() {
$("#User_Username").on("blur", function () {
    $("#User_Username").addClass("thinking");
    var username = $("#User_Username").val();
    $.ajax({
        contentType: "application/json, charset=utf-8",
        url: "/Account/CheckUsername",
        data: '{ "userName":"' + username + '"}',
        dataType: "json",
        type: "POST",
        error: function () {
            return;
        },
        success: function (data) {
            if (data) {
                $("#User_Username").addClass("approved");
            }
            else {
                $("#User_Username").addClass("denied");
                $(".field-validation-error").html("The username already exits.");
                }
            }
        });
    });
}