如何在单击按钮时使用客户端脚本来修改文本框

Question

我正在使用 ASP.NET 和 AJAX Webforms 开发一个界面。它在页面初始化时以及在请求各种操作以使用 PIN 码验证用户后显示一个更新面板。该界面将主要用于平板电脑，因此我创建了一个带有按钮的键盘来收集用户的 PIN 码，如下所示：

单击按钮时运行:

protected void btn0_Click(object sender, EventArgs e)
{
    AddNumberToPin("0");
}

他们以标记号码作为参数 strDigit 调用的过程定义为：

protected void AddNumberToPin(string strDigit)
{

    txtPIN.Text += strDigit;
    if (txtPIN.Text.Length == 5)
    {
        ...
        ...check database to validate the pin
        ...
    }

}

这行得通，但是速度很慢，因为每次单击按钮都会创建到 Web 服务器的另一次往返。将收集到的 PIN 存储在客户端的本地变量中似乎应该很简单，然后在收集到 5 位数字后仅 post 到服务器。我是网络编程的新手，所以我不确定该怎么做。

我已阅读 this and this，但我仍然无法弄清楚如何让按钮停止 post 连接到服务器。这可能吗？

Answer 1

以下是您可以使用 javascript 在客户端执行的两件事，您现在正在服务器端执行这些操作：

将数字与文本框值连接起来
检查文本框长度是否 >= 5。 以下脚本将向您展示如何在客户端执行这些操作

<html>
 <head>
  <title> Test </title>
  <script> 
   function AddChar(btn_text){
     
    document.getElementById("txt_my").value = document.getElementById("txt_my").value + btn_text;
    if(document.getElementById("txt_my").value.length>=5){
    alert("Do Youd DB work here");
    }
   }
       </script>
 </head>
 <body>
  <input id ="txt_my" type ="text"  /> <br />
  <input type ="button" value="1" onclick ="AddChar(this.value)"  />
  <input type ="button" value="2" onclick ="AddChar(this.value)"  />
  <input type ="button" value="3" onclick ="AddChar(this.value)" /> <br>
  <input type ="button" value="4" onclick ="AddChar(this.value)" />
  <input type ="button" value="5"  onclick ="AddChar(this.value)" />
  <input type ="button" value="6" onclick ="AddChar(this.value)" /> <br>
  <input type ="button" value="7" onclick ="AddChar(this.value)" />
  <input type ="button" value="8"  onclick ="AddChar(this.value)"/>
  <input type ="button" value="9"  onclick ="AddChar(this.value)"/><br>
  <input type ="button" value="0" onclick ="AddChar(this.value)" />
 </body>
</html>

Answer 2

ASP.NET 按钮有一个 OnClick 属性允许设置服务器端事件处理程序。它还有一个 OnClientClick 属性，其中可以包含一些客户端代码，以便在单击按钮时首先执行。如果该客户端代码 returns false，则取消对服务器的回发。

这两个属性都可以在您的按钮的标记中设置：

<asp:TextBox ID="txtPIN" runat="server" />
<asp:Button runat="server" Text="0" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
<asp:Button runat="server" Text="1" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
<asp:Button runat="server" Text="2" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
...

如果在文本框中插入的数字少于 5 位，Javascript addDigit 函数应该 return false:

<script type="text/javascript">
    function addDigit(btn) {
        var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
        txtPIN.value += btn.value;
        return txtPIN.value.length >= 5;
    }
</script>

该脚本块可以位于 HTML 文档的 <Head> 部分或表单底部。

代码隐藏中的事件处理程序将执行 PIN 验证：

protected void btn_Click(object sender, EventArgs e)
{
    // Check database to validate the PIN
    string pin = txtPIN.Text;
    ...
}

注意：Javascript 代码中使用语法 '<%= txtPIN.ClientID %>' 来说明 ASP.NET.

可能执行的 ID 重整

我注意到您的 UI 中有一个 返回 按钮。如果它删除了最后一位数字，您还可以在客户端代码中处理该命令并 return false 以防止回发：

<asp:Button ID="btnBack" runat="server" Text="Back" OnClientClick="removeLastDigit(); return false;" />

使用添加到 Javascript 块的以下函数：

function removeLastDigit() {
    var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
    txtPIN.value = txtPIN.value.substring(0, txtPIN.value.length - 1);
}

如何在单击按钮时使用客户端脚本来修改文本框

How to use client side script on button click to modify text box

asp.net

webforms

visual-studio-2005

web-applications

client-side