带有ASP的javaScript

时间:2013-09-26 16:14:29

标签: c# javascript asp.net webforms

我正在尝试在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()”方法看到脚本和按钮,但它不起作用,我不知道为什么。我找不到类似的样品。

1 个答案:

答案 0 :(得分:1)

问题与在服务器上运行代码几乎没有关系,更多的是将节点Text1从输入更改为span。

首先,更改对Text1的所有引用以获取属性innerHTML而不是value,其次,向click事件添加返回false,以便表单不会被提交。最后,你错过了一个;在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肯定违反了unobtrusive principle