Odd attributes on Web- and Html Controls

jacob · November 5th, 2005, 05:44 PM

Setting the ID and the CssClass on a dynamically add CheckBox web control renders the following HTML code...

Code:

<span class="myClass"><input id="_ctl0_myID" type="checkbox" name="_ctl0:myID" />

First of all I am surprised that the class is put on a span and not on the input. Why is that?

Moreover, setting the ID explicitly from the code-behind renders odd prefixes on both the id and name. What I wanted was to apply an ID, which I could count on when designing the style sheet, and then I would like the prefix to be gone. What is the solution to this?

When trying the same with the HtmlInputCheckBox (with the ID), it renders the same prefixes. Pretty odd, but there must be a natural explanation. Something about Viewstate?

Thanks, Jacob.

jbenson001 · November 6th, 2005, 02:32 AM

Are you adding the checkbox to a datagrid or datarepeater?

jacob · November 6th, 2005, 06:50 AM

Well, doing a very simple example renders the same span around the CheckBox, but the IDs are as I would expect. Simple setup...

Code:

<%@ Page language="c#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
     <head>
         <
        <script runat="server">
            public void Page_Load(Object oSender, EventArgs eArg)
            {
                CheckBox box1 = new CheckBox();
                box1.ID = "myID2";
                box1.CssClass = "someclass";

                HtmlInputText box2 = new HtmlInputText(); 
                box2.ID = "myID1";

                test.Controls.Add(box1);
                test.Controls.Add(box2);
            }
        </script>
    </head>
    <body>
        <form id="test" method="post" action="default.aspx" runat="server"/>
    </body>
</html>

The span is still odd, but the IDs are fine. It renders (aligned nicer though)...

Code:

<form name="test" method="post" action="test.aspx" id="test">
    <input type="hidden" name="__VIEWSTATE" value="dDw5NTgyNDg3OTY7O2w8bXlJRDI7Pj4zqu8pPRyb4gWRfNvIozI77yvCaQ==" />
    <span class="someclass">
        <input id="myID2" type="checkbox" name="myID2" />
    </span>
    <input name="myID1" id="myID1" type="text" />
</form>

The problem now seems like it has to do with my structure. Basically I have a user control (.ascx), which are loaded dynamically, and in this there is a Label as a placeholder.

In code I make an instance of a class, which inherrits HtmlForm. The CheckBox in the first post was added to this class using the Controls collection of the base class HtmlForm. The class which inherrits HtmlForm is then added to the placeholder. This seems to work fine; i.e. login UI etc. works fine; i.e. except from the odd labeling and CSS classes.

I am not using DataGrid or DataAdapter. Simply adding dynamically instantiated CheckBox controls to an instance of a HtmlForm, and then adding it to the page.

Thanks, Jacob.

jacob · November 6th, 2005, 07:13 AM

OK, this is pretty strange. Never seen anything like this. I though that it could have something to do with uniquely identifying the elements, and therefore I tried to add this line...

Code:

this.Name = "myForm";

... in the HtmlForm class, and then suddenly all _ctl0_ is replaced with test. I would at least expect _ctl0_ to be replaced by myForm.

Moreover, it is not only the elements within the form which has been prefixed. It is also the other elements, which I have included in the original .ascx control. Thats strange.

Jacob.

jacob · November 6th, 2005, 07:24 AM

Alright, found the answer and not so strange after all.

The problem was that the ID of the .ascx control in the first post was nothing and in the third post I had changed it to... well yes, test.

I guess that since it is a dynamically loaded user control, the framework wants to be sure that the IDs of the elements do not collide with others also dynamically loaded, and therefore it prefixes the controls with the ID of the control itself. If not specified with _ctl0.

Thanks you brough me in the right direction.
Jacob.