使用ajax检查asp.net中用户名的可用性

时间:2014-06-04 19:40:27

标签: c# jquery asp.net ajax

我在aasp.net页面中有以下文本框。用户在其中输入任何用户名,我希望ajax检查可用性,并在用户离开文本框时在标签中显示成功或失败消息。

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

这就是我如何使用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;
         }

那就是我如何与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;
}

2 个答案:

答案 0 :(得分:3)

以下是使用JavaScript通过onChange事件和Ajax使用WebMethods检测usernametxt的变化的方法。

ASPX页面:确保在ScriptManager对象中设置EnablePageMethods = true。

<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:您可以调用WebMethod来检查数据库中是否存在新选择的文件名:

您需要参考以下内容:

using System.Web.Services;

然后添加以下方法并确保在方法声明之前放置[WebMethod]

[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;
} 

答案 1 :(得分:0)

以更简单的方式,只需添加scriptmangaer标记和更新面板,然后添加文本框。 注意:不要忘记将autopostback设置为true并添加一个事件,即OnTextChanged事件及其处理程序

 <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>

事件处理程序

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