Checking the availability of a username in asp.net using ajax

Question

I am having following textbox in my aasp.net page. And user enters any username in it and I want ajax to check the availability and show the success or failure message in the label as the user leaves the text box.

 UserName<asp:Label ID="usernamelbl" runat="server"></asp:Label>
<asp:TextBox ID ="usernametxt" runat="server" CssClass="twitterStyleTextbox"></asp:TextBox><br />

thats how I am using the ajax

function result() {
             var username = "<%=usernametxt%>";
             var result = "<%usernamelbl%>";// here i am getting an error on usernamelbl
             var jsonText = JSON.stringify({ list: username });
             //array = +jsonText;
             $.ajax({
                 url: "staffregistration.aspx/Test", type: "POST", dataType: "json",
                 contentType: "application/json; charset=utf-8",
                 data: jsonText,
                 success: function (data) {
                     if (data == username) {
                         result = "username available"
                     }
                     else {
                         result = "username not avilable"
                     }},
                 error: function () { alert("its not working"); }
             });
             return false;
         }

and thats how i am interacting with the aspx

public static string Test(string username)
{
    string conString = @"user id=ejaz;password=ejaz;persistsecurityinfo=True;server=localhost;database=geospatialdb";
    MySqlConnection conn = new MySqlConnection(conString);
    MySqlDataReader reader = null;

    conn.Open();
    MySqlCommand command = new MySqlCommand("select owner_id from owner where owner_username = '" + usernametxt.Text + "';", conn);


    reader = command.ExecuteReader();

    username = reader[0].ToString();
    return username;
}

Actually, I have been trying it with simple js but couldn't do it. So, if I would have used that in my question that wouldn't have actually help as I want something totally different from that. — ejaz dogar
– ejaz dogar, Commented Jun 4, 2014 at 19:46

lucidgold · Accepted Answer · 2014-06-04 22:26:22Z

Here is how you can detect the change in usernametxt using JavaScript through onChange event and Ajax using WebMethods.

ASPX Page: Make sure to set EnablePageMethods = true in the ScriptManager object.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="usernameupdatepanel">
    <ContentTemplate>
        UserName <asp:Label ID="usernamelbl" runat="server"></asp:Label>
        <asp:TextBox ID ="usernametxt" 
             runat="server" CssClass="twitterStyleTextbox" 
             OnChange="CheckUserName(this)" ></asp:TextBox><br />
    </ContentTemplate>
</asp:UpdatePanel>

JavaScript:

function CheckUserName(oName) 
{
    PageMethods.UserNameChecker(oName.value, OnSucceeded); 
}

function OnSucceeded(result, userContext, methodName) 
{   
    lbl = document.getElementById('<%=usernamelbl.ClientID %>'); 

    if (methodName == "UserNameChecker") 
    { 
        if (result == true) 
        { 
            lbl.innerHTML = 'username not available'; 
            lbl.style.color = "red"; 
        } 
        else 
        { 
            lbl.innerHTML = 'username available'; 
            lbl.style.color = "green"; 
        } 
    } 
}

C# Code-Behind: You can call a WebMethod to check if the new selected filename exists in the DB:

You need to reference the following:

using System.Web.Services;

Then add the following method and make sure you put [WebMethod] before method declaration:

[WebMethod]
public static bool UserNameChecker(string newUserName)
{
    string conString = @"user id=ejaz;password=ejaz;persistsecurityinfo=True;server=localhost;database=geospatialdb";
    MySqlConnection conn = new MySqlConnection(conString);
    MySqlDataReader reader = null;

    conn.Open();
    MySqlCommand command = new MySqlCommand("select owner_id from owner where owner_username = '" + newUserName + "';", conn);

    object found = command.ExecuteScalar();

    if (found != null)
        return true;
    else
        return false;
}

Thnaks man! I was trying this before but it didn't work. But this was cool ;)

DevCisse · Accepted Answer · 2019-04-28 18:25:24Z

In a more simple way, just add the scriptmangaer tag and the update panel, then you add the textbox. Note: Don't forget to set autopostback to true and add an event i.e OnTextChanged event and its handler

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" TextMode="Email" OnTextChanged="TextBox1_TextChanged" AutoPostBack="true"></asp:TextBox>
                        <asp:Label ID="Label2" runat="server" Text="" ></asp:Label>   
                    </ContentTemplate>
                </asp:UpdatePanel>

The event handler

 protected void TextBox1_TextChanged(object sender, EventArgs e)
        {
            //your logic 
        }

Collectives™ on Stack Overflow

Checking the availability of a username in asp.net using ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related