check if username is available or taken

Question

I have a simple application in ASP.NET C# and using MS SQL Server 2008. I need to register all visitor users to my site. For that users will have to fill a form. The problem is that as the user enters the Desired Username field, I should be able to check in background whether another user has already taken that username. I will have to fire an sql select query to check for the availability.

Currently I am using the TextBoxName_TextChanged method but it does not work in realtime. It works only on a postback. The code is that follows:

protected void TextBox3_TextChanged(object sender, EventArgs e)
        {
            if (TextBox3.Text.Length == 0)
            {
                availability.Text = "";
                return;
            }

            SqlDataAdapter adp = new SqlDataAdapter("select username from users where username='" + TextBox3.Text + "'", con);
            DataSet ds = new DataSet();
            adp.Fill(ds, "users");
            if (ds.Tables["users"].Rows.Count > 0)
            {
                availability.ForeColor = System.Drawing.Color.Red;
                availability.Text = "Not Available";
            }
            else
            {
                availability.ForeColor = System.Drawing.Color.White;
                availability.Text = "Available";
            }

        }

Please suggest me something as all I searched on web was about PHP, Not ASP.NET

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
    <table cellpadding="5" class="style1"> 
        <tr>
            <td class="style3">
                <asp:Label ID="Label3" runat="server" Text="Username" ForeColor="White"></asp:Label>&nbsp;&nbsp; </td>
            <td style="border:0px none #FF0000;">
                <asp:TextBox ID="TextBox3" runat="server" Width="175px" 
                    CssClass="input-control" ForeColor="Black" ontextchanged="TextBox3_TextChanged" AutoPostBack="true"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="style3"></td>
            <td style="border:0px none #FF0000;"> 

                <asp:Label ID="availability" runat="server" Width="175px" CssClass="text" Text="availability"></asp:Label></td>
        </tr>
        <tr>
            <td class="style3">
                <asp:Label ID="Label4" runat="server" Text="Password" ForeColor="White"></asp:Label>&nbsp;&nbsp;&nbsp; </td>
            <td style="border:0px none #FF0000;">
                <asp:TextBox ID="TextBox4" runat="server" Width="175px" TextMode="Password" CssClass="input-control" ForeColor="Black"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="style3">
                <asp:Label ID="Label5" runat="server" Text="Email" ForeColor="White"></asp:Label>&nbsp;&nbsp;&nbsp; </td>
            <td style="border:0px none #FF0000;">
                <asp:TextBox ID="TextBox5" runat="server" Width="175px" CssClass="input-control" ForeColor="Black"></asp:TextBox></td>
        </tr>

        <tr>

            <td class="style3">

            <td style="width:30%; text-align: right; padding: 10px; border:none;">
                <div class="button-set" data-role="button-set">
                    <asp:Button ID="Button2" runat="server" class="active bg-color-red" Text="Sign Up" />
                </div>
        </tr>
        </table></asp:UpdatePanel>

---

Update:

Following Everybody's comments and answers I have achieved this much with a little problem shown in this screenshot: Don't know why there are another label with status and the availability_status stays as it is. Please help.

Answer 1

You need to fire off your request via AJAX. Hook up to the 'changed' event of the text box client side and trigger it from there - best option would be to use jQuery e.g.

<script text="text/javascript">

$(document).ready(function() {
    var searchTimer;
    ...
    $('TextBox3').change(function() {
        var searchTerm = $(this).val();
        clearTimer(searchTimer);
        searchTimer = setTimeout(1000, function() {
            $.get('findUsers', { userName: searchTerm }, function(response) {
                // process successful response
            }).error(function(error) {
                // process error response
            });
        });
    });
});
<script>

<table>
    ...
    <input type="text" id="TextBox3" />
</table>

The above would fire a request to an API call "findUsers" 1 second after every text change. This is to avoid sending unnecessary requests when the user is typing as you only want to send the request when the user has finished.

Answer 2

Does the textbox have AutoPostBack="true" ? You will certainly need to add an UpdatePanel aroud your textbox in order to prevent the full page load.

Answer 3

I believe that you're update panel is not well formatted. You need to put "availability" label into update panel, then set a trigger for the username text box and then set the event name. something like :

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <asp:Label ID="availability" AppendDataBoundItems="true" runat="server" >                                         
    </asp:Label>
  </ContentTemplate>
  <Triggers>
   <asp:AsyncPostBackTrigger ControlID="TextBox3" EventName="TextChanged" />
    </Triggers>
 </asp:UpdatePanel>

you also nee to set AutoPostBack="True" in your text box. I think it shall work.

Answer 4

Finally, I got it working, Thanks to all those who took interest and tried. The solution is to make PostBack on every OnkeyUp event, and this can be done using JS.

The markup is

<asp:TextBox ID="TextBox3" runat="server" Width="175px" 
                    CssClass="input-control" ForeColor="Black" onkeyup="RefreshUpdatePanel();" ontextchanged="TextBox3_TextChanged" AutoPostBack="false"></asp:TextBox>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate><asp:Label ID="availability" runat="server" Width="175px" CssClass="text" Text="availability_label"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="TextBox3" EventName="TextChanged" />
                    </Triggers>

The Javascript is:

<script type="text/javascript">
      function RefreshUpdatePanel() {
          __doPostBack('<%= TextBox3.ClientID %>', '');
      };
</script>

And the code for checking if the username exists or not is written inside the

TextBox3_TextChanged() Method. It worked.

Answer 5

I recently built this function you can try it out by yourself.

public bool IsExist(string name, string pass)  /// in your case you only need to save the textbox on a string variable
    {
        string sql = "select * from Users where UName='" + name + "' and Pass='" + pass + "'"; ; 
        DataSet ds = General.GetData(sql); // General class has function called GetData which obviouslly gets the data of the required SQL information.
        if (ds.Tables[0].Rows.Count > 0)
            return true;
        return false;
    }