Check availability of Username using ASP.NET MVC and jQuery
Here is a simple way to check if an Username is available using ASP.NET MVC and jQuery
Step 1: First lets create the XHTML markup for our View page(Index) as follows…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Check if an Username already exists</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//Your jQuery code will come here
</script>
</head>
<body>
Enter a Username: <br />
<input type="text" id="txtUsername" />
<input type="button" id="btnCheck" value="Check!" />
<div id="divStatus" />
</body>
</html>
So your view will look like this…
Step 2: Create a Controller class ‘UniqueNameController’ or WhateverController as follows…
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyMVCTrials.Controllers
{
[HandleError]
public class UniqueNameController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult CheckName(FormCollection form)
{
System.Threading.Thread.Sleep(3000);
string name = form["username"];
if (name.Equals("Sumit"))
return Json(false);
return Json(true);
}
}
}
The Action Method CheckName contains the logic to check if the Username provided already exists or not. The code provided here is only for demo. Thread.Sleep(3000) will simulate a delay as if to show that the application is working really hard to find out if the username exists or not. REMOVE that line when you are writing the actual code to check the username against a database or Web service.
NOTE: The return value need not be a JsonResult. You can change it to ActionResult and return some string value to indicate the success/failure of the call.
Step 3: Lets replace the comment Your jQuery code will come here from our view with the following jQuery code…
$(document).ready(function() {
$("#btnCheck").click(function() {
var name = $("#txtUsername").val(); //Value entered in the text box
var status = $("#divStatus"); //DIV object to display the status message
status.html("Checking....") //While our Thread works, we will show some message to indicate the progress
//jQuery AJAX Post request
$.post("/Home/CheckName", { username: name },
function(data) {
if (data == "true") {
status.html(name + " is available!");
} else {
status.html(name + " is not available!");
}
});
});
});
The code is very simple. The button click event makes an AJAX call to our ActionMethod CheckName and expects a response. The Thread.Sleep(3000) will delay the response for 3 seconds. The ActionMethod checks the value of the username and returns a JSON string for our AJAX call to handle.
We can fancy it up a bit by providing some color to our status messages using the jQuery addClass method. Putting it all together, our View will looks as follows…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Check If Name Already Exists</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.green
{
color: Green;
}
.red
{
color: Red;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#btnCheck").click(function() {
var name = $("#txtUsername").val();
var status = $("#divStatus");
status.html("Checking....").removeClass();
$.post("/Home/CheckName", { username: name },
function(data) {
if (data == "true") {
status.html(name + " is available!").addClass("green");
} else {
status.html(name + " is not available!").addClass("red");
}
});
});
});
</script>
</head>
<body>
Enter a Username:
<br />
<input type="text" id="txtUsername" />
<input type="button" id="btnCheck" value="Check!" />
<div id="divStatus" />
</body>
</html>
Checking the username
Username already exists
Username is available
There are different ways in which you can make AJAX requests using jQuery. For the detailed documentation check http://docs.jquery.com/Ajax. Hope it was useful!
[...] Check availability of Username using ASP.NET MVC and jQuery (tags: jquery, asp.net, mvc, aspnetmvc) [...]
nice tutorial , thanks for sharing…
hi,
I am using master pages and my text box is inside a content place holder.
How do I access this text box id from the script. Can someone please mail
Hi Neeta,
If you are using ASP.NET MVC then $(“#TEXTBOXID”) will get you the handler to the text box.
In case of ASP.NET Webforms the ClientID is generated at runtime. For instance the ID of the text box would be something like ctl01_Content1_txtUserName. To access this text box in jQuery you would have to do something like this…
$(“[id$='_txtUserName']“);
$(“[id$='_txtUserName']“).attr(“id”) will get you the complete ID.
Hope it is clear!
Cheers,
Sumit
Hi Sumit,
Thanks for your reply. Can you please tell what is ‘Home’ in following line. Is it a directory or some mvc convention. I have my test.aspx file which has the text box and script etc in main directory and the UniqueNameController.cs file in App_code folder in visual studio.
$.post(“/Home/CheckName”, { username: name },
Thanks
Neeta
Neeta,
Home represents the Controller and CheckName is the ActionResult. To learn more please check this link http://www.asp.net/learn/mvc/#MVC_Controllers
Cheers,
Sumit
Hi Sumit,
Is it possible for you to mail me a zip file for this project.
Thanks
Neeta
Yes sure drop me a mail.
[...] to Vote[Del.icio.us] Check availability of Username using ASP.NET MVC and jQuery « 2LeggedSpider (2/26/201…Friday, February 26, 2010 from [...]
i am usually jumping on the online world the majority of the night which means that I have the inclination to read significantly, which unfortunately isn’t typically a beneficial factor as the largest part of the web sites I discover are constructed of pointless crap copied from some other internet websites a thousand times, on the other hand I gotta say this blog is definitely enjoyable and holds some authentic information, so thank you for stopping the phenomena of solely duplicating other people’s blogs and forums, if you ever wanna have fun with playing a few hands of facebook poker together with me let me know – you have my email address
Hi…Sumit..
Nice to see all your sharings. And am recently completed my DotNet course and intrested to share things like you .So please help me out by giving good materials to me..Right now am working as Trainee in AJTech ..
you can send me at praveen.share@yahoo.co.in.
Hey I just wanted to let you know, I really like the written material on your web site. But I am employing Firefox on a machine running version 9.10 of Ubuntu and the look and feel is not quite right. Not a strong deal, I can still essentially read the posts and explore for information, but just wanted to inform you about that. The navigation bar is kind of hard to use with the config I’m on. Keep up the great work!
Hi Sumit,
i tried the code in my MVC application for email validation, at it didnt worked, but after removing the threading in the controller it works fine……
please if possible can you tell me the reason for that….
Thank you…