Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

How to suggest available username

Suggested Videos
Part 63 - Handling json arrays returned from web services with jquery
Part 64 - Save data using web services and jquery ajax
Part 65 - Check if username exists in database with ajax

In this video we will discuss, how to suggest available username using web services and jquery ajax.

This is continuation to Part 65, please watch Part 65 before proceeding.

When you try to create a gmail account, if the username that you have provided is already taken by another user, you will be suggested with a username that is available. Once you click on the available username, the username textbox will be populated with the suggested username.

How to suggest available username

Let us now discuss how to achieve this using web services and jQuery AJAX.

jquery suggest unique username

Step 1 : Modify RegistrationService.asmx.cs as shown below.

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

namespace Demo
    [WebService(Namespace = "")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class RegistrationService : System.Web.Services.WebService
        public bool UserNameExists(string userName)
            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
                SqlCommand cmd = new SqlCommand("spUserNameExists", con);
                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.Add(new SqlParameter()
                    ParameterName = "@UserName",
                    Value = userName

                return Convert.ToBoolean(cmd.ExecuteScalar());

        public void GetAvailableUserName(string userName)
            Registration regsitration = new Registration();
            regsitration.UserNameInUse = false;

            while (UserNameExists(userName))
                Random random = new Random();
                int randomNumber = random.Next(1, 100);
                userName = userName + randomNumber.ToString();
                regsitration.UserNameInUse = true;

            regsitration.UserName = userName;
            JavaScriptSerializer js = new JavaScriptSerializer();

Step 2 : Modify the HTML and jQuery code in HtmlPage1.html as shown below.

    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#txtUserName').keyup(function () {
                var userName = $(this).val();
                if (userName.length >= 3) {
                        url: 'RegistrationService.asmx/GetAvailableUserName',
                        method: 'post',
                        data: { userName: userName },
                        dataType: 'json',
                        success: function (data) {
                            var divElement = $('#divOutput');
                            var spanElement = $('#spanAvailableUserName');
                            var linkElement = $('#linkAvailableUserName');

                            if (data.UserNameInUse) {
                                divElement.text(userName + ' already in use. Try another?');
                                divElement.css('color', 'red');
                                spanElement.text('Available :');
                                linkElement.text(data.UserName).click(function () {
                            else {
                                divElement.text(data.UserName + ' available')
                                divElement.css('color', 'green');
                        error: function (err) {
<body style="font-family:Arial">
                UserName :
                <input id="txtUserName" type="text" />
                <div id="divOutput"></div>
                <span id="spanAvailableUserName"></span>
                <a id="linkAvailableUserName" href="#"></a>

jQuery tutorial for beginners

1 comment:

  1. Hi Venkat sir.

    we are adding some random number to available user, in case after adding the random number we get one user name we have to check that also before showing to user am i correct?


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.