检查用户名是否可用或被占用

Question

我有一个使用 ASP.NET C# 并使用 MS SQL Server 2008 的简单应用程序。我需要将所有访问者用户注册到我的站点。为此，用户必须填写表格。 问题是当用户输入 Desired Username 字段时，我应该能够在后台检查其他用户是否已经使用了该 username。我将不得不触发一个 sql 选择查询来检查可用性。

目前我正在使用TextBoxName_TextChanged 方法，但它不能实时工作。它仅适用于回发。代码如下：

protected void TextBox3_TextChanged(object sender, EventArgs e)
        {
            if (TextBox3.Text.Length == 0)
            {
                availability.Text = "";
                return;
            }

            SqlDataAdapter adp = new SqlDataAdapter("select username from users where username='" + TextBox3.Text + "'", con);
            DataSet ds = new DataSet();
            adp.Fill(ds, "users");
            if (ds.Tables["users"].Rows.Count > 0)
            {
                availability.ForeColor = System.Drawing.Color.Red;
                availability.Text = "Not Available";
            }
            else
            {
                availability.ForeColor = System.Drawing.Color.White;
                availability.Text = "Available";
            }

        }

请给我一些建议，因为我在网上搜索的都是关于 PHP，而不是 ASP.NET

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
    <table cellpadding="5" class="style1"> 
        <tr>
            <td class="style3">
                <asp:Label ID="Label3" runat="server" Text="Username" ForeColor="White"></asp:Label>&nbsp;&nbsp; </td>
            <td style="border:0px none #FF0000;">
                <asp:TextBox ID="TextBox3" runat="server" Width="175px" 
                    CssClass="input-control" ForeColor="Black" ontextchanged="TextBox3_TextChanged" AutoPostBack="true"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="style3"></td>
            <td style="border:0px none #FF0000;"> 

                <asp:Label ID="availability" runat="server" Width="175px" CssClass="text" Text="availability"></asp:Label></td>
        </tr>
        <tr>
            <td class="style3">
                <asp:Label ID="Label4" runat="server" Text="Password" ForeColor="White"></asp:Label>&nbsp;&nbsp;&nbsp; </td>
            <td style="border:0px none #FF0000;">
                <asp:TextBox ID="TextBox4" runat="server" Width="175px" TextMode="Password" CssClass="input-control" ForeColor="Black"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="style3">
                <asp:Label ID="Label5" runat="server" Text="Email" ForeColor="White"></asp:Label>&nbsp;&nbsp;&nbsp; </td>
            <td style="border:0px none #FF0000;">
                <asp:TextBox ID="TextBox5" runat="server" Width="175px" CssClass="input-control" ForeColor="Black"></asp:TextBox></td>
        </tr>

        <tr>

            <td class="style3">

            <td style="width:30%; text-align: right; padding: 10px; border:none;">
                <div class="button-set" data-role="button-set">
                    <asp:Button ID="Button2" runat="server" class="active bg-color-red" Text="Sign Up" />
                </div>
        </tr>
        </table></asp:UpdatePanel>

---

更新：

按照每个人的 cmets 和答案，我已经实现了这么多，但屏幕截图中显示了一个小问题： 不知道为什么还有另一个带有状态的标签，而 availability_status 保持原样。请帮忙。

Answer 1

我认为您的更新面板格式不正确。您需要将“可用性”标签放入更新面板，然后为用户名文本框设置触发器，然后设置事件名称。 类似的东西：

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <asp:Label ID="availability" AppendDataBoundItems="true" runat="server" >                                         
    </asp:Label>
  </ContentTemplate>
  <Triggers>
   <asp:AsyncPostBackTrigger ControlID="TextBox3" EventName="TextChanged" />
    </Triggers>
 </asp:UpdatePanel>

您还需要在文本框中设置 AutoPostBack="True"。 我认为它会起作用。

Answer 2

文本框是否有 AutoPostBack="true" ？ 您当然需要在您的文本框周围添加一个 UpdatePanel 以防止整个页面加载。

Answer 3

您需要通过 AJAX 触发您的请求。连接到文本框客户端的“更改”事件并从那里触发它 - 最好的选择是使用 jQuery，例如

<script text="text/javascript">

$(document).ready(function() {
    var searchTimer;
    ...
    $('TextBox3').change(function() {
        var searchTerm = $(this).val();
        clearTimer(searchTimer);
        searchTimer = setTimeout(1000, function() {
            $.get('findUsers', { userName: searchTerm }, function(response) {
                // process successful response
            }).error(function(error) {
                // process error response
            });
        });
    });
});
<script>

<table>
    ...
    <input type="text" id="TextBox3" />
</table>

上述内容会在每次文本更改后 1 秒触发对 API 调用“findUsers”的请求。这是为了避免在用户输入时发送不必要的请求，因为您只想在用户完成后发送请求。

Answer 4

终于，我得到了它的工作，感谢所有感兴趣并尝试过的人。 解决方案是在每个 OnkeyUp 事件上进行 PostBack，这可以使用 JS 来完成。

标记是

<asp:TextBox ID="TextBox3" runat="server" Width="175px" 
                    CssClass="input-control" ForeColor="Black" onkeyup="RefreshUpdatePanel();" ontextchanged="TextBox3_TextChanged" AutoPostBack="false"></asp:TextBox>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate><asp:Label ID="availability" runat="server" Width="175px" CssClass="text" Text="availability_label"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="TextBox3" EventName="TextChanged" />
                    </Triggers>

Javascript 是：

<script type="text/javascript">
      function RefreshUpdatePanel() {
          __doPostBack('<%= TextBox3.ClientID %>', '');
      };
</script>

并且检查用户名是否存在的代码写在里面

TextBox3_TextChanged() 方法。它奏效了。

Answer 5

我最近做了这个功能，你可以自己试试看。

public bool IsExist(string name, string pass)  /// in your case you only need to save the textbox on a string variable
    {
        string sql = "select * from Users where UName='" + name + "' and Pass='" + pass + "'"; ; 
        DataSet ds = General.GetData(sql); // General class has function called GetData which obviouslly gets the data of the required SQL information.
        if (ds.Tables[0].Rows.Count > 0)
            return true;
        return false;
    }