How to fix this .. The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Sometimes when you write inline code inside Javascript tag or inside style sheet tag within the header of the page just like code 1, the yellow error page will explode in your face telling you that The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Code 1
<%@
Page
Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default"
%>
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
>
<title>Inline Code inside
JavaScript</title>
<script
type="text/javascript"
language="javascript">
function fnTest()
{
var txt =
document.getElementById("<%= TextBox1.ClientID %>")
alert(txt.value);
}
</script>
</head>
<body>
<form
id="form1"
runat="server">
<asp:TextBox
ID="TextBox1"
runat="server"></asp:TextBox>
</form>
</body>
</html>
The weird thing is that the error is not occurred each time! I mean if you tried to write the same code in another page it will work and the error will disappear !!
I searched on the Net to find an answer and to know more about this weird thing, and I found a nice blog that talked about this issue
http://www.west-wind.com/weblog/posts/5758.aspx
He posts a solution for the problem, but the funny thing is that he also did not know the main reason for the error. and I found no one know the main reason!
I tried another solution and it worked for me. All I did is I moved the JavaScript tag to the bottom of the page, typically above the close form tag, and the error is gone!
Solution 1
<%@
Page
Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default"
%>
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
>
<title>Inline Code inside
JavaScript</title>
</head>
<body>
<form
id="form1"
runat="server">
<asp:TextBox
ID="TextBox1"
runat="server"></asp:TextBox>
<script
type="text/javascript"
language="javascript">
function fnTest()
{
var txt =
document.getElementById("<%= TextBox1.ClientID %>")
alert(txt.value);
}
</script>
</form>
</body>
</html>
Or you can play around this by registering the JavaScript code from code behind.
Solution 2
Protected
Sub Page_Load(ByVal
sender As
Object,
ByVal e
As System.EventArgs)
Handles
Me.Load
Dim strScript
As
New StringBuilder
strScript.Append("function fnTest()")
strScript.Append("{")
strScript.Append("var txt = document.getElementById('")
strScript.Append(Me.TextBox1.ClientID)
strScript.Append("');")
strScript.Append("alert(txt.value);")
strScript.Append("}")
Page.ClientScript.RegisterClientScriptBlock(Me.GetType,
"MyScript",
strScript.ToString,
True)
End
Sub
I really still do not know the error main reason, if anybody
know about this then please write it as comment.
I hope someone will found this very helpful.
~ Abdulla AbdelHaq