Question

I have a textbox for username in a form, when user enter the username, i need to check if that username is already in data base. I’m thinking to catch the blur event of the text box & to write a javascript function to query & check in database. I’m trying some thing like this:

@html.textboxfor(x=>x.UserName, new{@id="UserName"})

<script type="text/javascript">
$(document).ready(function(){$('#UserName').blur("then some code here");})

</script>

Now I need to know if I’m following the right way? If so then please let me know how can I call a action method which will interact with the database within the blur function or whats the right way? Thanks in advance.

Answer 1

Yes, that looks right. You can use a JQuery Ajax call, along with the Url.Action helper method.

$(document).ready(function(){
    $('#UserName').blur(function() {
        var name = this.value;
        $.get(@Url.Action("VerifyUsername") + "?name=" + value, function(result) {
            if (result.ok == false) {
                $("#message").text("Username '" + name + "' is already taken, please try another");
            }
        });
    });
});

This will call an action VerifyUsername in the current controller. It assumes that the action returns JSON like {ok:true} to verify the name:

public ActionResult VerifyUsername(string name)
{
    bool isOk;
    // check the database
    return new JsonResult() {
        Data = new { ok: isOk },
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}