problem with dynamically loaded user control's name and id being altered

**bsw2112** · Apr 4th, 2007, 12:30 PM

I have a problem that I hope can be easily fixed.

Say I have the following container control (red)in my dafault.aspx page

Code:

<form id="form1" runat="server">
        <div>
            <div id="ContentZone" runat="server"/>
        </div>
    </form>

When I dynamically add a control to the ContentZone, the name and id of that new control is unchanged

code in the codefile for dafault.aspx

Code:

  Dim a As TextBox
  a = New TextBox()
  a.Text = "test"
  a.ID = "testLabel"
  ContentZone.Controls.Add(a)

The HTML output will be

Code:

<div id="ContentZone"><input name="testLabel" type="text" value="test" id="testLabel" /></div>

But when I do the same with a user control the id and name of that control are altered to

Code:

<div id="ContentZone"><input name="ctl00$testLabel" type="text" id="ctl00_testLabel" /></div>

I realize that this is the user control's ID that is being prefixed but I don't want this to happen. I would like the id and name to be identical (not ctl00$testLabel and ctl00_testLabel) and secondly I wish it would stay as testLabel without the prefix and the $ or _

I tried to do this in the codefile of the user control

Code:

Me.ID=""

but this didn't work.

any help would be appreciated

bsw

**bsw2112** · Apr 4th, 2007, 10:15 PM

Similar problem,

It seems that I also cannot write to some children controls of the user control

example: http://www.wawryn.com/testusercontrol/clfrnsir-eng.aspx

The label and the textbox are children of the usercontrol but for some reason the textbox rarely lets me write to it in the postaback. Why is this?

clfrnsir-eng.aspx

Code:

<body>
    <form id="form1" runat="server">
        <div id="ContentZone" runat="server"/>
    </form>
</body>

clfrnsir-eng.aspx.vb

Code:

Partial Class _Default
    Inherits MyPage

    Public pageTitle As String
    Public Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) Handles Me.Load

        pageTitle = "Some title goes here"
        Dim ExampleUserControl As WebUserControl = CType(Me.LoadControl("WebUserControl.ascx"), WebUserControl)
        ContentZone.Controls.Add(ExampleUserControl)

    End Sub

End Class

WebUserControl.ascx

Code:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="WebUserControl.ascx.vb" Inherits="WebUserControl" %>

<h2>Test writing to the child in user control</h2>

This Label is updated every postabck with current time
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><hr />
The date however, does not always get updated in the textbox control below, why???<br />
The only difference is that the textbox has a name and an ID but the Label only has an ID<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<input id="Submit1" type="submit" value="Submit" />

WebUserControl.ascx.vb

The red line does not work about 95% of the time... but the label (green line) is always updated. The label does not have a name just an ID but it is still changed from Label1 to ctl00_Label1, what is my mistake and is there a way I can prevent .NET from changing the names and Id attributes I specify in code?

Code:

Partial Class WebUserControl
    Inherits System.Web.UI.UserControl

    Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        Label1.BackColor = Drawing.Color.YellowGreen

        If Me.IsPostBack Then
            Label1.Text = Date.Now.ToString
            TextBox1.Text = Date.Now.ToString
        End If
    End Sub
End Class

When I try the same thing without using a user caontrol, both controls get updated everytime... I am so confused... Is this related to the ID and name being changed by .NET (as per my first post)

bsw

**mendhak** · Apr 6th, 2007, 03:52 AM

The answer is, you're not supposed to be concerning yourself with the ID in that way. We can help you with an answer if you tell us what you're trying to do and why you need the ID to stay a certain way.

If you've got some javascript that is looking at that ID, then you'll need to generate the javascript from the codebehind and substitute, for ID, this:

controlname.ClientID.ToString()

**bsw2112** · Apr 6th, 2007, 06:43 PM

I want wanted to have this CSS

Code:

#TextBox1 {background-color:#CCC; etc.}

but because it seems I am at the mercy of .NET
I am now forced to write

Code:

#ctl00_TextBox1 {background-color:#CCC; etc.}

which works but if I were to be told to add another user control before the current one, that textbox's id is now changed to ctl01_TextBox1
and the CSS no longer works. I don't want to start adding class attributes for one instance of a particular control nor do I want to add inline CSS as this prevents users with special needs from overriding my CSS with their own client side CSS file

As for the id and name attribute being the same, I was told that this ensures backward and forward compatibility. Not sure if this is correct or not. I found this on W3C.

C.8. Fragment Identifiers

In XML, URI-references [RFC2396] that end with fragment identifiers of the form "#foo" do not refer to elements with an attribute name="foo"; rather, they refer to elements with an attribute defined to be of type ID, e.g., the id attribute in HTML 4. Many existing HTML clients don't support the use of ID-type attributes in this way, so identical values may be supplied for both of these attributes to ensure maximum forward and backward compatibility (e.g., <a id="foo" name="foo">...</a>).

Further, since the set of legal values for attributes of type ID is much smaller than for those of type CDATA, the type of the name attribute has been changed to NMTOKEN. This attribute is constrained such that it can only have the same values as type ID, or as the Name production in XML 1.0 Section 2.3, production 5. Unfortunately, this constraint cannot be expressed in the XHTML 1.0 DTDs. Because of this change, care must be taken when converting existing HTML documents. The values of these attributes must be unique within the document, valid, and any references to these fragment identifiers (both internal and external) must be updated should the values be changed during conversion.

I am now more preoccupied with why I can't seem to write to the child textbox in the user control. I was told on another forum that this is a rendering problem in ASP.NET 2.0 and if I would move the user control load on the default page from page_load to page_init, then it would work. I tried this and it didn't work. Would you know why this is?

I work for an office that primarily deals with Web accessibility and all these problems are making them doubt what I said about the advantages of going ASP.NET 2.0

bsw

**mendhak** · Apr 8th, 2007, 04:00 AM

nor do I want to add inline CSS as this prevents users with special needs from overriding my CSS with their own client side CSS file

Question: A user with their own CSS file, they wouldn't be overriding form elements with specific IDs, will they? They'll be overriding actual form elements or common class names. The logic I'm going by, is this: If a user wants to override a website's CSS file with their own, wherein they have a replacement for

#rdExample

Then in theory, they can have an infinite number of such identifiers in their CSS for every single ID possible.

Correct my thinking, because I don't do a lot of compliance.

Second, I doubt there is a way to get rid of this naming convention because it is required by ASP.NET when regenerating the control tree in codebehind.

I am now more preoccupied with why I can't seem to write to the child textbox in the user control. I was told on another forum that this is a rendering problem in ASP.NET 2.0 and if I would move the user control load on the default page from page_load to page_init, then it would work. I tried this and it didn't work. Would you know why this is?

Show code. What does the child control look like, how are you trying to write to it, from where, etc?

**Magiaus** · Apr 8th, 2007, 03:00 PM

INamingContainer appends it's child controls names name to it's name in order to prevent client name resolution conflicts. if you need to ref. the client ID ctl.ClientID will include the INamingContainer marking, but ctl.ID will have only the name you set.

That is the why the name is messed up.

CSS:

Code:

    <style type="text/css">
        body.parent{background-color:black;}
        body.parent div.chldClass01{}
        body.parent div.chldClass01 div{color:black;}
        body.parent div.chldClass01 div.target{color:red;}
        body.parent div.chldClass01 div.targetReally{background-color:white;}
    </style>

See instead of the id you need a class name resolution because the id will change..?

Code:

<body class="parent">
    <div class="chldClass01">
        <div class="target">This is a very bad example.&lt;!--black and red --&gt;</div>
        <div class="targetReally">And, this should be white and black.</div>
    </div>
</body>

But, that is just how I have started to do CSS because of how it lets me make big chains of things and then change the page via one style sheet "Theme" change....

**bsw2112** · Apr 10th, 2007, 01:08 PM

Question: A user with their own CSS file, they wouldn't be overriding form elements with specific IDs, will they?

Client side CSS almost always trumps what is defined in an author's CSS (regardless whether it is id or class)

The red text specified here:
author.css

Code:

p#makeRed {color:red}

author.html

Code:

<link href="author.css" rel="stylesheet" type="text/css" />
...
<p id="redText">I am a red text</p>

should be green if client loads his own CSS that has the following declaration

client.css

Code:

p {color:green!important}

Show code. What does the child control look like, how are you trying to write to it, from where, etc?

http://www.wawryn.com/testusercontrol/clfrnsir-eng.aspx

WebUserControl.ascx

Code:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="WebUserControl.ascx.vb" Inherits="WebUserControl" %>

<h2>Test writing to the child in user control</h2>

This Label is updated every postabck with current time
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><hr />
The date however, does not always get updated in the textbox control below, why???<br />
The only difference is that the textbox has a name and an ID but the Label only has an ID<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<input id="Submit1" type="submit" value="Submit" />

'WebUserControl.ascx.vb

Code:

Partial Class WebUserControl
    Inherits System.Web.UI.UserControl

    Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

        Label1.BackColor = Drawing.Color.YellowGreen


        If Me.IsPostBack Then

            'this works'
            Label1.Text = Date.Now.ToString
            'not working, tried to move usercontrol load to page_init (in clfrnsir-eng.aspx) but it didn't do anything
            TextBox1.Text = Date.Now.ToString

        End If


    End Sub


End Class

clfrnsir-eng.aspx

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="clfrnsir-eng.aspx.vb" Inherits="_Default" %>
<%@ Reference Control = "WebUserControl.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

'more stuff ...

<body>
    <form id="form1" runat="server">
        <div id="ContentZone" runat="server"/>
    </form>
</body>
</html>

clfrnsir-eng.aspx.vb

Code:

Partial Class _Default
    Inherits System.Web.UI.Page

    Public pageTitle As String
    Public Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) Handles Me.Load
        
        Dim ExampleUserControl As WebUserControl = CType(Me.LoadControl("WebUserControl.ascx"), WebUserControl)
        ContentZone.Controls.Add(ExampleUserControl)

    End Sub

End Class

would you know why this is?

thanks for your time

bsw

**Magiaus** · Apr 10th, 2007, 02:42 PM

CSS is overriden in a top down fashion. If user CSS is in the head and your CSS is at the bottom your CSS is King but if your CSS is rendered first and User second User CSS is KING.

Have a look at MySpace.com they way they do it really ticks me off, because they won't let you use a #; but, by entering CSS into your about me or whatever you can override the CSS that is higher in the document.

In short the browser applies the style from the last <style/> element that is loaded (top down like all web page loading) or some non overlapping combination of all styles. The ones that overlap are going to use whatever CSS loads last. I.E. whatever CSS is at the bottom.

**bsw2112** · Apr 10th, 2007, 04:39 PM

If user CSS is in the head and your CSS is at the bottom...

I was talking about CSS that makes use of the !important rule and is loaded on the client side by the end user.

This will trump the developer's CSS as long as the developer isn't specifying his CSS inline. That's why using inline CSS is not a good thing if providing accessibe sites matters to you.

bsw

**mendhak** · Apr 10th, 2007, 04:51 PM

Yes, I understand that, but my question is, do compliance 'laws' state that even IDs need to be part of this? IDs can be anything, do you see what I mean by there being an infinite number of IDs that a stylesheet could then have?

I understand a user getting all paragraph tags to be bright red and all h1 text to be underlined, for example, but any page on the internet might have an element with an id of 'MIjd98aaB' and the style would then apply to it.

My argument is, no, stylesheets are meant for the element names (p) and for specific classes (p.superbold). IDs serve a programmatic and referential purpose for the processing of the information being displayed on and submitted by the page on which it exists. But like I said, I don't do compliance and I might be wrong. But what I mean is, IDs should be irrelevant to your case here and should not be messed with.

**Magiaus** · Apr 10th, 2007, 05:04 PM

Originally Posted by mendhak

Yes, I understand that, but my question is, do compliance 'laws' state that even IDs need to be part of this? IDs can be anything, do you see what I mean by there being an infinite number of IDs that a stylesheet could then have?

I understand a user getting all paragraph tags to be bright red and all h1 text to be underlined, for example, but any page on the internet might have an element with an id of 'MIjd98aaB' and the style would then apply to it.

My argument is, no, stylesheets are meant for the element names (p) and for specific classes (p.superbold). IDs serve a programmatic and referential purpose for the processing of the information being displayed on and submitted by the page on which it exists. But like I said, I don't do compliance and I might be wrong. But what I mean is, IDs should be irrelevant to your case here and should not be messed with.

I agree! (waiting for world to end) Using an ID in CSS is bad form. Just like using style="color:red;" is bad form. There are special case exceptions.

Say I have the need to create a ton of table cells and have the style/display be changed in code. I'm going to have to use an inline style or do a lot of work to setup non conflicting style sheets via runtime code.... in this case I am going to use <td style="....">content</td>

I've never used !important, but nothing overrides an inline style and nothing overrides an element attribute i.e. <table cellpadding="2"> you can style that table to death, but it is going to have cellpadding = 2.... that is how CSS is made to work. If I use an inlne style it should be because I want that style forever and if use cellpadding="2" it should be because I don't want that to change EVER that is why it is made that way.

**mendhak** · Apr 10th, 2007, 04:53 PM

Your second issue is odd. It writes to the label, but won't write to the textbox. Anything special about the textbox? Is it set to read only? Also, could you use ToString() instead of ToString? Can you try setting it to a hardcoded value to see if anything can be written to it at all?

**Magiaus** · Apr 10th, 2007, 05:09 PM

http://www.w3.org/TR/REC-CSS2/cascade.html the LAW

This part is interesting:

In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, but for the purpose of step 3 of the cascade algorithm, they are considered to have an ID selector (specificity: a=1, b=0, c=0). For the purpose of step 4, they are considered to be after all other rules.

--

So I have to assume that a style defined #id{} will over ride a style defined element.className{}, and that the previous rule will override an element{}

Now, if we are talking about the text size for the user that is set by the browser?

I am going to assume that sets body{font-size:XXXLARGE;} or what ever. So anything, set on the page is going to override?

--

6.4 The cascade
Style sheets may have three different origins: author, user, and user agent.

Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.

User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behave as if it did).

User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.

Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.

Style sheets from these three origins will overlap in scope, and they interact according to the cascade.

The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.

**Magiaus** · Apr 10th, 2007, 05:18 PM

And, could you post the full code behind? Including the 2005 hidden section where your controls are declared.

Also, have you read up on page Life Cycle?

**bsw2112** · Apr 11th, 2007, 03:50 PM

My code works now.

When I moved

Code:

Dim ExampleUserControl As WebUserControl = CType(Me.LoadControl("WebUserControl.ascx"), WebUserControl)
        ContentZone.Controls.Add(ExampleUserControl)

to the default page's Page_init it worked.

The problem is that I don't derive my default page directly from System.Web.UI.Page but rather an intermediary class that does some language detection work (I work for a Canadian agency so all our pages need to be available in English or in French) I didn't want to always run this language method on every page so I made a class called MyPage that all subsquent pages derive from. MyPage does inherit from System.Web.UI.Page. The problem is MyPage does things in the page_init as well so now I am getting a warning about:

Warning 1 sub 'Page_Init' shadows an overloadable member declared in the base class 'MyPage'. If you want to overload the base method, this method must be declared 'Overloads'.

I will need to figure out what this means, I know that override means I run the derived page's method but I am not sure what shadows means. I know that I need to make sure both page_inits run so I hope this can be done

bsw

**Magiaus** · Apr 11th, 2007, 05:18 PM

You are using your base page event wrong. You need to override OnInit not create an event. In the Protected Overrides OnInit(e as EventArgs) be certian to call MyBase.OnInit(e)...

**mendhak** · Apr 12th, 2007, 07:26 AM

Why are you shadowing the method though? Shadows is, in a way, saying that you are creating a new method of the original name, but you are completely overriding any base functionality it may have had. Use overrides instead.

**bsw2112** · Apr 13th, 2007, 01:36 PM

I did as you said although shadows worked the same way. I am not sure if it did remove the base fonctionality as the base class still perfomed the language check method. If you ane interested to see what I did let me know an I will post a zip.

In any case I will these terms to get a better understanding of the differences.

have a good weekend

bsw

Thread: problem with dynamically loaded user control's name and id being altered

Thread Tools

Display

Hybrid View

problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Re: problem with dynamically loaded user control's name and id being altered

Posting Permissions