javaScript with ASP

Question

I'm trying to realize little program in ASP, which count numbers with timer. I use this task with JavaScript and have some problems when I call it from sharp code. So, this code works good:

<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>

Random function generates value in Page_Load and put in TextBox1. In this code I used inputs for everything. But I want to use asp controls and then I tried to rewrite the same with and call script from sharp, but my code doesn't work:

<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>

and sharp code:

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()");

and this what I see in html output:

<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>

I see script and button with onclick="counter()" method, but it doesn't work, and I don't know why. and I couldn't find the similar samples.

I think you are using submit button ,which may not work currently with onclick — sino
– sino, Commented Sep 26, 2013 at 16:39

Nicolas Straub · Accepted Answer · 2013-09-26 17:18:15Z

1

the problem has little to do with running the code on the server, and more to do with the change of the node Text1 from input to span.

first, change all references to Text1 to get the property innerHTML instead of value, second, add a return false to the click event so the form doesn't get submitted. Finally, you're missing a ; in the C# code block, and should invoke setTimer with a function, not a string.

the resulting code would look like this:

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;");

BTW, if you can script it on the client side, you should. Writing javascript on the server side definitely violates the unobtrusive principle

edited Sep 26, 2013 at 17:18

answered Sep 26, 2013 at 17:03

Nicolas Straub

3,4096 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dmytro Over a year ago

work, and work if I put TextBox instead of Label for output in my initial code.

Collectives™ on Stack Overflow

javaScript with ASP

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related