Kolla ifall användarnamnet finns eller inte med Json, jQuery och WebService

Dagens stora community sidor har oftas en funktion när man registrerar sig som kollar ifall det användarnamnet man vill använda är upptaget eller inte. T.ex. Twitter har en sådan funktion. Att göra en egen sådan funktion till sin webbapplikation är inte så svårt.

Det första vi gör är att skapa en WebService, som vi döper till MyService.asmx. När man skapar filen så är System.Web.Service.ScriptService bortkommeterat så det inte används, vi tar bort // framför så att vi kan använda den.

Sedan så kan vi skapa en public string som ser ut något sånt här. Tänk på att ni ska anropa era funktion som hämtar ut användarnamnet om det finns eller inte. Jag har gjort en förenklad version direkt i MyWebservice

    [WebMethod]
    public string CheckUserName(string UserName) {
        if (UserName == "Fredrik" || UserName == "Mikael")
            return "Användarnamnet finns redan! Välj ett annat.";
        else
            return "Användarnamnet finns inte!";        
    }

 Där så ser vi ifall någon försöker att registrera en användare med namnet Fredrik eller Mikael så får dom ett meddelande tillbaks om att användarnamnet redan är upptaget. Men om det inte finns, så behöver man inte få ett meddelande tillbaks, men det är lättare för användaren att veta då.

Nu så ska vi försöka att anropa denna funktion för att ta reda på ifall användarnamnet är upptaget eller inte. Vi skapar helt enkelt en jQuery ajax anrop som ser ut såhär:

    function ShowAvailability() {
      $.ajax({
          type: "POST",
          url: "MyService.asmx/CheckUserName",
          data: '{UserName: "' + $(".username")[0].value + '" }',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: OnSuccess,
          failure: OnFailure,
        
     });

 Där har vi en url, där vi pekar till vart våran WebService fil ligger och vilken webservice vi ska anropa. På data så hämtar vi ut värdet som skriv i textboxen med css klassen .username. Sen har vi json datatypen och contenttypen. Success och Failure har jag skapat två likadana funktioner för som ser ut såhär:

function OnSuccess(response) {
       var mesg = $(".status")[0];
       mesg.innerHTML = response["d"];
        
      }
                    
function OnFailure(response) {
      var mesg = $(".status")[0];
      mesg.innerHTML = response["d"];
     }

 Där vi hämtar ut det vi får som json svar. Som ser ut såhär:

{"d":"Användarnamnet finns redan! Välj ett annat."}

Varför bokstaven d vet jag inte, men det ska ju vara något? Jag har sedan lagt till en span tag med css klassen .status för att visa det vi får som svar på OnSuccess eller OnFailure.

För att anropa ajax så skapar vi en a tag som ser ut såhär:

<a href="javascript:void(0)" onclick="ShowAvailability()">Kolla ifall användarnamnet är upptaget</a>

 Du kan ladda ner mitt exempel här