Check if username exists in a asp.net form

Question

I am currently creating a registration form in asp.net and c#. What I want to be able to do is to allow the user to enter a username, when they remove focus from the text box it checks a mysql database to see if the username exists or not. If it does then a css container is shown to inform the user that the username has already been taken.

I have tried to use Javascript/JQuery to hide the CSS container which is working fine. My plan was to run the textchanged event on the text box and then if this function returned true would then use javascript/jquery to reshow the css container. However, I found that to use the text changed event I needed to enable autopostback on the field which also meant that the form refreshed and tried to submit the form therefore stopping my plan from working.

EDIT In response to sfomate about using the update panel. I have tried this method using the following code segment from the form

   <asp:ScriptManager ID="scriptManager" runat="server" />
    <asp:UpdatePanel runat="server" ID="userUpdate" UpdateMode="Conditional">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="txtUsername" EventName="TextChanged" />
  </Triggers>
   <ContentTemplate>
    <asp:TextBox id="txtUsername" TextMode="SingleLine" required 
          placeholder="Username" runat="server" 
         ontextchanged="txtUsername_TextChanged" AutoPostBack="True" />
         <span class="tooltip">Please enter your username</span>
     <span class="fieldExists">Username exists</span>
   </ContentTemplate>
</asp:UpdatePanel>

This is stopping the auto post back of the whole pagewhen the text box loses focus using the text changed event. However, nothing is added to the page with the Response.Write() code I have added. I have tried to just print hello world or show the css container using Javascript but nothing seems to show up straight after the text box losing focus. However, when I click the submit button the response.write() is then shown which is not what I want.

Thanks for your help.

Answer 1

You can use the Updatepanel form asp.net Ajax toolkit to prevent postback. Alternatively you can you AJAX with JQuery and get a JSON response.

Answer 2

So the short version goes like this:

ASP.NET WebForms do not generally do ajax. It's not what they were designed for. They were designed for postback. So you need to remove the "ASP.NET" part of the action from them, and rely strictly on doing things with AJAX.

So you need a webservice target to pass the "proposed username" to, you need a javascript method to "when change occurs, check via ajax" and a method to "on ajax complete, display box".

The webservice part could be a ashx or an asmx or a svc or a PageMethod (depends on how much other ASP.NET stuff you're using). It could even be a GET based ASPX page (granted for most devs that's overkill, just use the asmx/ashx concept).

The two methods are going to look like:

function AjaxResult( response ) {
}

function AjaxCheck(event) {
  // do the $.ajax() here and on success call AjaxResult with the response
}

and you'll bind the second one to the textbox like so:

<asp:TextBox ID="MyTextBox" runat="server" AutoPostBack="false" />
<script type="javascript">
  $('#<%= MyTextBox.ClientID %>').change(AjaxCheck);
</script>