ASP.NET Subtle bug
-
External CSS file:
#Main
{
background-color: blue;
}Somewhere in the HTML there is this markup:
<div id="Main"></div>
Style and everything works properly. Now to enable server side manipulation of the HTML tag, I added:
<div id="Main" runat="server"></div>
Everything stops working. The color is no longer blue. Took me a while to figure out even though I am normally very careful to avoid these issues.:-O
-
External CSS file:
#Main
{
background-color: blue;
}Somewhere in the HTML there is this markup:
<div id="Main"></div>
Style and everything works properly. Now to enable server side manipulation of the HTML tag, I added:
<div id="Main" runat="server"></div>
Everything stops working. The color is no longer blue. Took me a while to figure out even though I am normally very careful to avoid these issues.:-O
Looks like there are not many ASP.NET people over here, so here is the answer. #Main CSS selector selects an element of id Main. So it will select an element of id Main and apply the background color of blue. When you put runat=server on a div, it becomes a server control. Meaning that the elements properties can be modified through the code for the web page. The issue here is that one should never rely on the ID attribute of a server control and assume that it will be the id on the client too. ASP.NET provides another property called ClientID for that. There are instances when the ClientID does not match the actual server side ID. This happens when the control is in a naming container. For examples let's say that the control is in a user control. The user control can be included many times in the page but there can be only one element of a given ID. So what ASP.NET does is that it appends a unique ID to the id specified in the markup. For example, the id can become XYZ_Main where XYZ is the ID if the user control when it is embedded in the page. UserControl is not the only container where one can observe this behavior. It also happens when the control is in a master page or the control is inside a repeater/datalist/gridview control. Unfortunately teh solution is ugly and it involved using class selectors instead of a id selector.
The CSS can be modified as below: .Main { background-color:blue; }
-
External CSS file:
#Main
{
background-color: blue;
}Somewhere in the HTML there is this markup:
<div id="Main"></div>
Style and everything works properly. Now to enable server side manipulation of the HTML tag, I added:
<div id="Main" runat="server"></div>
Everything stops working. The color is no longer blue. Took me a while to figure out even though I am normally very careful to avoid these issues.:-O
-
External CSS file:
#Main
{
background-color: blue;
}Somewhere in the HTML there is this markup:
<div id="Main"></div>
Style and everything works properly. Now to enable server side manipulation of the HTML tag, I added:
<div id="Main" runat="server"></div>
Everything stops working. The color is no longer blue. Took me a while to figure out even though I am normally very careful to avoid these issues.:-O
Heh, nice. I don't care much for ASP.NET myself, but occasionally help a co-worker with his projects... this'd be quite a head-scratcher!
---- Scripts i’ve known... CPhog 1.8.2 - make CP better. Forum Bookmark 0.2.5 - bookmark forum posts on Pensieve Print forum 0.1.2 - printer-friendly forums Expand all 1.0 - Expand all messages In-place Delete 1.0 - AJAX-style post delete Syntax 0.1 - Syntax highlighting for code blocks in the forums
-
External CSS file:
#Main
{
background-color: blue;
}Somewhere in the HTML there is this markup:
<div id="Main"></div>
Style and everything works properly. Now to enable server side manipulation of the HTML tag, I added:
<div id="Main" runat="server"></div>
Everything stops working. The color is no longer blue. Took me a while to figure out even though I am normally very careful to avoid these issues.:-O
i run into that one almost daily. i'll find myself wanting to be able to tweak an element on the server, so i'll add that runat, then kick myself for not remembering that the ID changes. it's even more annoying if you're doing any javascript stuff with the element in question. now, getElementByID can no longer find the element by ID, because that ID doesn't exist. so, you have to do stuff like:
// create the JS on the server, using a dummy name for the ctrl ID
string scripts=@"
...
var expandedCtrl = document.getElementById(""%%EXPANDEDLINKS%%"");
...
";// replace the dummy name with whatever .Net chose for the ctrl ID...
scripts = scripts.Replace("%%EXPANDEDLINKS%%", hdn_expandedLinks.UniqueID);
...
cs.RegisterStartupScript(cstype, scriptName, scripts, false);...to make sure your JS has the right control ID.
image processing toolkits | batch image processing | blogging
-
i run into that one almost daily. i'll find myself wanting to be able to tweak an element on the server, so i'll add that runat, then kick myself for not remembering that the ID changes. it's even more annoying if you're doing any javascript stuff with the element in question. now, getElementByID can no longer find the element by ID, because that ID doesn't exist. so, you have to do stuff like:
// create the JS on the server, using a dummy name for the ctrl ID
string scripts=@"
...
var expandedCtrl = document.getElementById(""%%EXPANDEDLINKS%%"");
...
";// replace the dummy name with whatever .Net chose for the ctrl ID...
scripts = scripts.Replace("%%EXPANDEDLINKS%%", hdn_expandedLinks.UniqueID);
...
cs.RegisterStartupScript(cstype, scriptName, scripts, false);...to make sure your JS has the right control ID.
image processing toolkits | batch image processing | blogging
-
You don't need to do all of that. You can get the actual control id from your java script like this:
var MyControl = document.getElementById("<%=MyControl.ClientID%>");
Tara
true. but (for whatever reason), we put all of our JS on the code-behind pages.
image processing toolkits | batch image processing | blogging
-
i run into that one almost daily. i'll find myself wanting to be able to tweak an element on the server, so i'll add that runat, then kick myself for not remembering that the ID changes. it's even more annoying if you're doing any javascript stuff with the element in question. now, getElementByID can no longer find the element by ID, because that ID doesn't exist. so, you have to do stuff like:
// create the JS on the server, using a dummy name for the ctrl ID
string scripts=@"
...
var expandedCtrl = document.getElementById(""%%EXPANDEDLINKS%%"");
...
";// replace the dummy name with whatever .Net chose for the ctrl ID...
scripts = scripts.Replace("%%EXPANDEDLINKS%%", hdn_expandedLinks.UniqueID);
...
cs.RegisterStartupScript(cstype, scriptName, scripts, false);...to make sure your JS has the right control ID.
image processing toolkits | batch image processing | blogging
IMO You should use String.Format for this.
string.Format(@" ... var expandedCtrl = document.getElementById(""%{0}""); ... ", hdn_expandedLinks.UniqueID) -
IMO You should use String.Format for this.
string.Format(@" ... var expandedCtrl = document.getElementById(""%{0}""); ... ", hdn_expandedLinks.UniqueID)when the JS is hundreds of lines long and that ID, and others, have to be inserted multiple times, string.Format would get very confusing.
image processing toolkits | batch image processing | blogging
-
when the JS is hundreds of lines long and that ID, and others, have to be inserted multiple times, string.Format would get very confusing.
image processing toolkits | batch image processing | blogging
I can see your point for readability. I think it would be nicer if VS had better support for manipulating these though such as colour coding all instances of a selected parameter or allowing automatic re-numbering if you want to insert another parameter in the middle of a list (or delete an existing parameter)