Rendered id attributes

I pasted an HTML form that was styled using CSS into a web form, with the intention of changing the tags to server controls so I could take advantage of the validation controls.

As soon as I changed the form and one of the input tags to server controls and refreshed the browser that was displaying my page in good order my presentation collapsed. Some quick viewing of the source code identified the problem; my original id attributes that were being styled had been changed to some obscure value by .net's rendering of the controls.

Surely there must be a simply way to prevent this but I cannot find one.

Can anyone help?

Bill Wallace

Re: Rendered id attributes

This is an interesting topic, Bill. Before diving into it, let's first establish that this isn't an issue that is caused by the use of adapters. If I understand what you described, you ran into a problem when you added runat="server" to a <form> and an <input> tag. The ID that you had placed on those tags did not correspond to the ID produced in the new HTML produced by the server and sent to your browser. Right? And because the ID changed, the CSS rules that were using ID-based selectors no longer applied so the presentation was wrong.

Do I have the situation spelled out correctly?

If so, then I can say that the problem comes from the fact that, fundamentally, the ASP.NET framework normally takes charge of the ID value in the HTML that it renders. You, as the author, typically don't have the ability to directly set that HTML attribute.

... unless you customize your site with something like an adapter that would adapt the <input runat="server" /> tag such that it produced an ID value on the rendered client-side <input> tag that was more to your liking.

Currently, the CSS Friendly ASP.NET 2.0 Control Adapter kit (http://www.asp.net/cssadapters) isn't offering a sample adapter for <input runat="server" /> but you probably could experiment with making one for yourself. Actually, I would recommend that you adapt the System.Web.UI.WebControls.TextBox class and then use <asp:TextBox runat="server" /> in places where you were thinking of using <input runat="server" />. If you do that you could write your own TextBox adapter and add it to your .browser file.

Your adapter could then set the ID attribute in the HTML that it renders.

Frankly, I don't know of any other way to directly gain control over the ID attribute.

You might consider a totally different approach, though. In these situations it is sometimes much (MUCH) easier to simply alter your CSS rules so their selectors use classes rather than IDs. For example, you might have this today:

#foobar { background: red; }

This might correspond today to markup like this:

If you want to switch this over to being a server-side <input> tag then you could do this:

.foobar { background: red; }

And alter the markup to be:

<asp:TextBox id="foobar" CssClass="foobar" runat="server" />

This TextBox should end up rendering an <input class="foobar" id="something_foobar" />

It doesn't matter with the ID is on this client-side <input> tag because your CSS isn't ID-based any longer. You've already changed your CSS rule's selector to refer to classes... which you can control in ASP.NET by using the CssClass attribute on any class (control) derived from WebControl.

Re: Rendered id attributes

Thanks Russ you are spot on with the problem which leaves me amazed that we have no control over rendered IDs.

I thought of changing the id to class but although I could do this for most IDs I do use some for hooks to snippets of unobtrusive JavaScript I use, which would break these processes.

Talking of which, members of this forum have all seen the light regarding the separation of presentation from structure using CSS. Great! However, unobtrusive JavaScript does the same for behaviour as CSS does for presentation. The rendering of behaviour used by server controls produces loads of in-line and embedded JavaScript, especially ATLAS controls. We have a long way to go to overcome this but perhaps a simular approach as yours is possible.

Anyways, I thought I would leave my form as is (Totally standards and unobtrusive), action an aspx to do the processing, and would you believe it, I cannot find a way to simply read a form field by name. Are we going backwards?

The best I can do is run a loop to find out the index to each field and then access the fields I need by the index, so my interegation code might be:

        For i = 0 To Request.Form.Count - 1
            itemName = Request.Form.AllKeys(i)
            itemValue = Request.Form.GetValues(i)(0)
            r = r & i & "." & itemName & " : " & itemValue & "<br />"
        Next
    lblOut.Text = r
and after copying and deleting the results for reference I could use code like:

email = Request.Form.GetValues(10)(0)

Once again, there must be an easier way!!?

Bill

Re: Rendered id attributes

Form elements can be access by name using the name as the key like so:

email = Request.Form["someName"]

where someName is the value of the NAME attribute on the client-side <input> tag in your form.

Remember that you don't have to use Request.Form information to obtain the value of server-side controls like <asp:TextBox runat="server" id="foobar" /> that you have used in your form instead of client-side <input> tags. With server-side controls you simply use a syntax like:

email = foobar.Text

Hope this helps.

Re: Rendered id attributes

That's the code I thought I should use but:

email = Request.Form["email"]

produces this error:

BC30311: Value of type 'System.Collections.Specialized.NameValueCollection' cannot be converted to 'String'.

Bill

Re: Rendered id attributes

Sorry, I had a syntax error. This is VB.NET, right? So it should be:

email = Request.Form("email")

Don't use square brackets. Use parentheses.

Re: Rendered id attributes

Cheers Russ

I hang my head in shame

Bill