validate username ajax and json and asp.net

问题

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!

回答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.

回答2:

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 }

来源：https://stackoverflow.com/questions/5241275/validate-username-ajax-and-json-and-asp-net

标签

jquery

ASP.NET

ajax

web-services