validate username ajax and json and asp.net

Question

So I'm new to json/ajax/jquery/webservices

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.

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]

My html file doesn't seem be to calling my webservice.

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.
One problem is it seems to be returning it in XML as seen below instead of the json I was it to be in

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://localhost">{"available": false}</string>

So on to the code/markup!

My html file

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
    <!--

        $(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('<img src="images/ajax-loader.gif" height="16" width="16" /> 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;
                }
            });
        });
//-->
        </script>

</head>
<body>
    <fieldset>
        <div>
                <label for="username">Username, valid: a-z.-_</label>
                <input type="text" name="username" value="" id="username" />
                <span id="validateUsername"></span>
        </div>
    </fieldset>
</body>
</html>

my asmx file

<%@ WebService Language="C#" Class="ValidateUser" %>
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}";
        }

    }
}

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!

VinayC · Accepted Answer · 2011-03-09 04:55:53Z

1

Which version of .NET are you using - if 3.5 then make sure that you have ScriptHandlerFactory and ScriptModule registered in web.config - these are responsible for handling JSON requests.

Second issue is that in the actual service implementation, you are supposed to return the needed object and ASP.NET infrastructure will handle JSON serialization - you don't have to output actual JSON data. For example,

public bool GetUsernameAvailable(string username)
{
   ...
   return (RetVal == 0) ? false : true;
}

Above would return boolean value and you call access it in your call function as j.d. For example,

...
$ajax({
 ...
 success: function (j) {
    alert(j.d); // will alert either true or false
 }
...

Lastly, navigating to asmx endpoint in browser will invoke soap end-point and you will always get xml request-response (this is because ASP.NET script handler will do JSON serialization only if request is POST request and content-type is JSON). Correct way to debug this will be to check you service call in tool such as Fiddler.

edited Mar 9, 2011 at 4:55

answered Mar 9, 2011 at 4:48

VinayC

49.6k7 gold badges64 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jordan Over a year ago

Wow that totally worked... I had the proper web.config but I didn't understand that it the service would convert it for me [It's logical though]. Thank you so much!

Frenchi In LA · Accepted Answer · 2011-03-09 04:47:59Z

1

I think your ajax call's data are not correct. According to jquery documentation : The data option can contain either a query string of the form key1=value1&key2=value2, or a map of the form {key1: 'value1', key2: 'value2'}. If the latter form is used, the data is converted into a query string using jQuery.param() before it is sent. try use your ajax without sending date to test if you can call your WS then try something like

data :{'username':t.value }

answered Mar 9, 2011 at 4:47

Frenchi In LA

3,1694 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

validate username ajax and json and asp.net

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related