Rendering of asp.net controls

Question

I find it hard when using asp.net controls, to make proper css files because I don't know what the html output for the different controls end up as.

For example, if I want to add a div tag using a asp.net control, it's not easy to know what kind of control I can use.

Are there any documentation that shows for each asp.net control, what the rendered html for that control will be? I understand that some controls will probably change it's output due to how it's configured, but most controls will at least follow a pattern here.

The best would of course be a service on the web where you can put in the asp.net control definition and get the rendered html out.

Currently I have to put a control into my webform, run it and check the source in the browser, and if it's not the correct html tag, try another control and repeat. That get's tedious quite fast.

I would normally use reflector to dig in to see a control or use the cssfriendly adapters but such a thing would be handy — PMC
– PMC, Commented Mar 10, 2011 at 10:24
The rendered html will even differ from browser to browser for example when ASP.Net thinks the client uses a "lower"-browser(BrowserCaps), a Panel will be rendered as Table instead of a DIV. — Tim Schmelter
– Tim Schmelter, Commented Mar 10, 2011 at 11:15
If you want a div, use a div. Not done much WebForms lately but I always tried to keep my ASP.NET control usage to form elements and PlaceHolder controls to show and hide content. I always preferred Repeater over any other data-oriented control, gives you maximum control over the rendered markup. And every time you use a GridView, a kitten doesn't just die it's tortured to a slow and painful death. — roryf
– roryf, Commented Mar 10, 2011 at 11:32
As roryf says, if you want a <div> use a <div>. Why are you trying to overcomplicate matters? You should be changing your css to fit your code, not the other way around. — anothershrubery
– anothershrubery, Commented Mar 10, 2011 at 11:44
@roryf and @another - The case is that I'm creating the page dynamically depending on lots of factors, so I'm generating the controls (and thereby also html) from code. Currently I'm using the HtmlGenericControl to create the div tags, and adding the content inside the div tag by using the HtmlGenericControls Controls property. Is this the perferred way, or are there any better/easier way to acccomplish this? — Øyvind Bråthen
– Øyvind Bråthen, Commented Mar 10, 2011 at 12:09

Tim Schmelter · Accepted Answer · 2011-03-10 11:58:08Z

2

If you want to know to what html-controls a server-control is rendered, you could call RenderControl:

Dim myGridView as new GridView
Dim sb as New StringBuilder()    
Dim sw as New IO.StringWriter(sb)
Dim textWriter as New HtmlTextWriter(sw)
myGridView.RenderControl(textWriter)
' now we can have a look what asp.net has rendered: '
Dim gridViewHTML as String = sb.ToString()

The rendered html will even differ from browser to browser for example when ASP.Net thinks the client uses a "lower"-browser(BrowserCaps), a Panel will be rendered as Table instead of a DIV.

By the way, if you're testing my above code on controls inside of your page, you have to override VerifyRenderingInServerForm otherwise you get a "...must be placed inside a form tag with runat=server"-error:

Public Overrides Sub VerifyRenderingInServerForm(ByVal control As System.Web.UI.Control)
   Return
End Sub

edited Mar 10, 2011 at 11:58

answered Mar 10, 2011 at 11:31

Tim Schmelter

462k79 gold badges719 silver badges980 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Øyvind Bråthen Over a year ago

+1: I actually got more help from the comments, but this one answers my original question, and I'll mark it as accepted for that :)

RB. · Accepted Answer · 2011-03-10 11:25:04Z

0

I would recommend adding a CssClass to your WebControls, and doing all your styling using classes, rather than HTML element types. As Tim Schmelter says, the html can render differently for different clients (I seem to remember a Panel can be a span as well under certain circumstances).

To avoid actually having to add the CssClass each time, you can subclass the WebControl you want, then set it's CssClass in Control_Init.

answered Mar 10, 2011 at 11:25

RB.

37.4k13 gold badges103 silver badges137 bronze badges

Collectives™ on Stack Overflow

Rendering of asp.net controls

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related