Rendering of asp.net controls

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.

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

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.