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.
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:
<input type="text" id="foobar" />
If you want to switch this over to being a server-side <input> tag then you could do this:
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.
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:
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:
Brave.heart
Member
25 Points
6 Posts
Rendered id attributes
Aug 23, 2006 09:50 PM|LINK
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
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Rendered id attributes
Aug 23, 2006 11:18 PM|LINK
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:
<input type="text" id="foobar" />
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.
Groovybits.com
Brave.heart
Member
25 Points
6 Posts
Re: Rendered id attributes
Aug 24, 2006 02:56 PM|LINK
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
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Rendered id attributes
Aug 24, 2006 04:47 PM|LINK
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.
Groovybits.com
Brave.heart
Member
25 Points
6 Posts
Re: Rendered id attributes
Aug 24, 2006 06:50 PM|LINK
email = Request.Form["email"]
produces this error:
BC30311: Value of type 'System.Collections.Specialized.NameValueCollection' cannot be converted to 'String'.
Bill
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Rendered id attributes
Aug 24, 2006 07:41 PM|LINK
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.
Groovybits.com
Brave.heart
Member
25 Points
6 Posts
Re: Rendered id attributes
Aug 24, 2006 08:23 PM|LINK
I hang my head in shame
Bill