title: validate username ajax and json and asp.net
body: <p>So I'm new to json/ajax/jquery/webservices</p>
  
  <p>I am trying to do a join page whereby the user types in a few letters and gets instant feedback on whether or not the username is available or not.  </p>
  
  <p>I have an html file [the user front end], and an asmx webservice, the webservice checks to see if whatever text it has gotten exists [it runs a stored procedure which works fine]</p>
  
  <p>My html file doesn't seem be to calling my webservice.  </p>
  
  <p>I have verified the webservice works by going to the asmx page and manually and typing in the value and it returns a true or false for me.<br>
  One problem is it seems to be returning it in XML as seen below instead of the json I was it to be in</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;string xmlns="http://localhost"&gt;{"available": false}&lt;/string&gt;
  </code></pre>
  
  <p>So on to the code/markup!</p>
  
  <p>My html file</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;script src="Scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
      &lt;!--
  
          $(document).ready(function () {
              var validateUsername = $('#validateUsername');
              $('#username').keyup(function () {
                  var t = this;
                  if (this.value != this.lastValue) {
                      if (this.timer) clearTimeout(this.timer);
                      validateUsername.removeClass('error').html('&lt;img src="images/ajax-loader.gif" height="16" width="16" /&gt; checking availability...');
                      this.timer = setTimeout(function () {
                          $.ajax({
                              contentType: "application/json; charset=utf-8",
                              url: 'ValidateUser.asmx/GetUsernameAvailable',
                              data: '{username: "'+t.value + '"}',
                              dataType: 'json',
                              type: "post",
                              success: function (j) {
                                  validateUsername.html('I willl have my logic in here for changing the html on the label to reflect success or failure!');
                              }
                          });
                      }, 200);
  
                      this.lastValue = this.value;
                  }
              });
          });
  //--&gt;
          &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;fieldset&gt;
          &lt;div&gt;
                  &lt;label for="username"&gt;Username, valid: a-z.-_&lt;/label&gt;
                  &lt;input type="text" name="username" value="" id="username" /&gt;
                  &lt;span id="validateUsername"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my asmx file</p>
  
  <pre><code>&lt;%@ WebService Language="C#" Class="ValidateUser" %&gt;
  using System;
  using System.Web;
  using System.Collections;
  using System.Web.Services;
  using System.Web.Services.Protocols;
  using System.Data;
  using System.Data.Odbc;
  using System.Web.Script.Serialization;
  using System.Web.Script.Services; 
  using UserSite.DataClasses;
  
  [WebService(Description = "Web services to query Username availability.", Namespace = "http://localhost")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  [ScriptService]
  public class ValidateUser: System.Web.Services.WebService
  {
  
      [WebMethod(Description = "Gets the availability of a username.")]
      [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
      public string GetUsernameAvailable(string username)
      {
  
          if (username == null)
          {
              username = "";
          }
          DbaseExecSpWithReturnValue Sproc = new DbaseExecSpWithReturnValue();
          Sproc.SetSp("sp_CheckUsernameAvailable");
          Sproc.AddParam(1);
          Sproc.AddParam("Username", SqlDbType.Char, username, 20);
          int RetVal = Sproc.Execute();
          Sproc.Close();
          if (RetVal == 0)
          {
              return @"{""available"": false}";
          }
          else
          {
              return @"{""available"": true}";
          }
  
      }
  }
  </code></pre>
  
  <p>So the Stored Procedure works as I saw when I manually ran the asmx file but the html page is not calling it and my asmx file is not returning the data..... so basically Its driving me nuts!</p>