如何使用 Button 的 OnClientClick 属性在 ASP.NET 中运行多个 JavaScript 函数？答案

【问题标题】：How to use Button's OnClientClick property to run some multiple JavaScript functions in ASP.NET?如何使用 Button 的 OnClientClick 属性在 ASP.NET 中运行多个 JavaScript 函数？
【发布时间】：2016-05-05 09:34:57
【问题描述】：

如何在 ASP.NET 中运行多个 JavaScript 函数以在 TextBox 中插入所需的文本，设置 TextBox 的背景颜色和字体颜色以及禁用或锁定按钮 5 秒？我尝试了下面的代码，但我需要客户端代码：

VB.NET 代码：

Protected Sub btnClickTest_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnClickTest.Click
    txtTest.BackColor = Drawing.Color.Yellow
    txtTest.ForeColor = Drawing.Color.Red
    txtTest.Text = "You Clicked the Button!"
    btnClickTest.Enabled = False
    System.Threading.Thread.Sleep(5000)
    btnClickTest.Enabled = True
End Sub

html:

<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server"> 
<div>
    <asp:Button ID="btnClickTest" 
        runat="server" 
        Text="Click Me" />        
<br />  <br />
</div>  
<asp:TextBox ID="txtTest" 
    runat="server"></asp:TextBox>  
</form>
</body>
</html>

【问题讨论】：

标签： javascript c# html asp.net vb.net

【解决方案1】：

解决办法：

html:

<html >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server"> 
<div>
    <asp:Button ID="btnClickTest" 
        runat="server" 
        Text="Click Me" 
          onclientclick="desiredFunction(); lockoutSubmit(this); return false;" />        
<br /> <br />
</div>  
<asp:TextBox ID="txtTest" 
    runat="server"></asp:TextBox>   
</form>
</body>
</html>

javascript：

  <script type="text/javascript">
  function desiredFunction() {
      var TextBox = document.getElementById("txtTest");

      //  1- Is used to insert desired text in the TextBox:
      TextBox.value = "You Clicked the Button!";

      //  2- Is used to set your TextBox back color to yellow:
      TextBox.style.backgroundColor = "yellow";

      //  3- Is used to set your TextBox font color to red:
      TextBox.style.color = "red";
  }

  //  4- Use this function to disable or lock your button for 5 seconds:
  function lockoutSubmit(button) {
      button.style.color = "blue";
      var oldValue = button.value;
      var i = 5; //variable for to count the seconds
      var interval = setInterval(function () {
          button.setAttribute('disabled', true);
          i -= 1;
          button.value = 'Wait ' + i + ' Seconds!';
      }, 1000)



      setTimeout(function () {
          clearInterval(interval); //drop the interval
          button.value = oldValue;
          button.removeAttribute('disabled');
          button.style.color = "black";
      }, 5000)
    }
 </script>

或者只是在 html 模式下（不是 ASP.NET）

function desiredFunction() {
          var TextBox = document.getElementById("txtTest");

          //  1- Is used to insert desired text in the TextBox:
          TextBox.value = "You Clicked the Button!";

          //  2- Is used to set your TextBox back color to yellow:
          TextBox.style.backgroundColor = "yellow";

          //  3- Is used to set your TextBox font color to red:
          TextBox.style.color = "red";
      }



      //  4- Use this function to disable or lock your button for 5 seconds:
      function lockoutSubmit(button) {
          button.style.color = "blue";
          var oldValue = button.value;
          var i = 5; //variable for to count the seconds
          var interval = setInterval(function () {
              button.setAttribute('disabled', true);
              i -= 1;
              button.value = 'Wait ' + i + ' Seconds!';
          }, 1000)

          setTimeout(function () {
              clearInterval(interval); //drop the interval
              button.value = oldValue;
              button.removeAttribute('disabled');
              button.style.color = "black";
          }, 5000)
      }

<html>
<head>
    <title>JavaScript</title>
</head>
<body>
    <div>
        <input
            id="btnClickTest"
            type="button"
            value="Click Me" onclick="desiredFunction(); lockoutSubmit(this);" />       
        <br /> <br/>
    </div>
    <input
        id="txtTest"
        type="text" />
 </body>
</html>

【讨论】：