0

我试图在 ASP 中实现一个小程序，它用计时器计算数字。我将此任务与 JavaScript 一起使用，当我从清晰的代码中调用它时遇到了一些问题。所以，这段代码运行良好：

<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
    function counter() {
        var q = Number(document.getElementById("TextBox1").value);
        var i = Number(document.getElementById("Text1").value);
        if (i < q) {
            i += 1;
            document.getElementById("Text1").value = i;
            setTimeout("counter()", 10);
        }
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TextBox1" runat="server" ReadOnly="True"></asp:TextBox>
    <input id="Button1" type="button" value="button" onclick="counter()" />
    <input id="Text1" name="Text1" type="text" value="0"/>
</div>
</form>
</body>

随机函数在 Page_Load 中生成值并放入 TextBox1。在这段代码中，我对所有内容都使用了输入。但是我想使用asp控件，然后我尝试用sharp重写并调用脚本，但是我的代码不起作用：

<body>
<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:Label ID="Text1" runat="server" Text="0"></asp:Label>
</div>
</form>
</body>

和清晰的代码：

string str = "function counter() { 
    var q = Number(document.getElementById(\"TextBox1\").value); 
    var i = Number(document.getElementById(\"Text1\").value); 
    if (i < q) { i += 1; document.getElementById(\"Text1\").value = i; 
    setTimeout(\"counter()\", 10)  } }";
ClientScript.RegisterClientScriptBlock(this.GetType(), "counter", str, true);
Button1.Attributes.Add("onclick", "counter()");

这就是我在 html 输出中看到的：

<script type="text/javascript"> 
//<![CDATA[
function counter() { var q = Number(document.getElementById("TextBox1").value); var i = Number(document.getElementById("Text1").value); if (i < q) { i += 1; document.getElementById("Text1").value = i; setTimeout("counter()", 10)  } }//]]>
</script> 
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAPaDIYgDxN4mARW8/nWYR/uESCFkFW/RuhzY1oLb/NUVM34O/GfAV4V4n0wgFZHr3e02FqXa4CDb/Y32Jm7yDyEftd8wArFmKGvvW1nftcl6Q==" />
</div>
<div>
    <input name="TextBox1" type="text" value="1332073012" id="TextBox1" />
    <input type="submit" name="Button1" value="Button" onclick="counter();" id="Button1" />
    <span id="Text1">0</span>
</div>
</form>
</body>

我看到带有 onclick="counter()" 方法的脚本和按钮，但它不起作用，我不知道为什么。我找不到类似的样本。

4

1 回答 1

1

该问题与在服务器上运行代码无关，更多与节点Text1从输入到跨度的变化有关。

首先，更改对 Text1 的所有引用以获取属性 innerHTML 而不是 value，其次，将 return false 添加到 click 事件，这样表单就不会被提交。最后，您缺少一个 ; 在 C# 代码块中，并且应该使用函数而不是字符串调用 setTimer。

生成的代码如下所示：

string str = "function counter() { 
    var q = Number(document.getElementById(\"TextBox1\").value); 
    var i = Number(document.getElementById(\"Text1\").innerHTML); 
    if (i < q) { i += 1; document.getElementById(\"Text1\").innerHTML = i; 
    setTimeout(function(){counter();}, 10);  } }";
ClientScript.RegisterClientScriptBlock(this.GetType(), "counter", str, true);
Button1.Attributes.Add("onclick", "counter(); return false;");

顺便说一句，如果你可以在客户端编写脚本，你应该这样做。在服务器端写javascript肯定违反了不显眼的原则

于 2013-09-26T17:03:53.897 回答