It is often necessary to check a "username" in a user registration page live in web applications. Today I developed this for one of my web applications and would like to share it with you.
Let's look at the following GIF screen before looking at the code.
![]()
Now, to develop this you just need to make an Ajax GET call to a method in the "Account" controller.
Here is the Register.cshtml code, I highlighted the changes.
@model MvcApplication1.Models.RegisterModel
@{
ViewBag.Title = "Register";
}
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>Create a new account.</h2>
</hgroup>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<fieldset>
<legend>Registration Form</legend>
<ol>
<li>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
<span id="result" />
</li>
<li>
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
</li>
<li>
@Html.LabelFor(m => m.ConfirmPassword)
@Html.PasswordFor(m => m.ConfirmPassword)
</li>
</ol>
<input type="submit" value="Register" />
</fieldset>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/jscript">
$('#UserName').blur(function () {
var url = "/Account/CheckUserName";
var name = $('#UserName').val();
$.get(url, { input: name }, function (data) {
if (data == "Available") {
$("#result").html("<span style='color:green'>Available</span>");
$("#UserName").css('background-color', '');
}
else {
$("#result").html("<span style='color:red'>Not Available</span>");
$("#UserName").css('background-color', '#e97878');
}
});
})
</script>
}
Now, look at the method in the Account controller.
[AllowAnonymous]
public string CheckUserName(string input)
{
bool ifuser = WebSecurity.UserExists(input);
if (ifuser == false)
{
return "Available";
}
if (ifuser == true)
{
return "Not Available";
}
return "";
}
In case you wish to watch the video of this article, see the following: