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

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.