ASP.NET Control to HTML tag equivalent

Question

I'm looking for a cheat sheet that will allow me to show an HTML designer the equivalent asp.net controls for standard HTML tags. As an example the <asp:Panel> will render as an HTML <div> and an <asp:Label> will render as an HTML <span>. I've been googling this to no avail. Can someone post a link to a good cheat sheet so that the designers on this project can understand the markup on the aspx pages more clearly.

To be clear, I would like a link to a list of major ASP.NET controls, with descriptions as to how they would relate to standard HTML. It would be great if this were in PDF format or on an easy to read and print web page. The reason, in my case, would be that we have a PHP developer who is very familiar with HTML coming to work on our project, and I feel it would be useful to have a better understanding of standard ASP.NET server controls if I could hand him such a "cheat sheet".

I'm referring mainly to the .NET 2.0 framework, but we are also doing work with 3.0/3.5.

+1 for wanting to know what you're actually generating when you use WebForms. — Daniel Schaffer
– Daniel Schaffer, Commented Jan 20, 2009 at 16:24

Community · Accepted Answer · 2020-06-20 09:12:55Z

111

This isn't a simple question, as it depends on which version of .NEt you're talking about and states of controls sometimes. For example, the PANEL, in 1 & 1.1 render to a TABLE while in later versions it's a DIV.

But overall (for 2/3), here goes:

Panel - Div
Panel -- GroupingText="###" is Fieldset, Legend
Label - Span
Button - Input, Type Button
Link Button - Href with JS Postback Script
Hyperlink - Standard HREF
Image Button - Input, Type Image
Textbox -- Default is Input, Type Text
Textbox -- Mode = Password is Input, type Password
Textbox -- Mode= Multiline is Textarea
DropDownList - Select
Listbox - Select
RadioButton - Input, Radio with GroupName
Checkbox - Input, Checkbox
Repeater/Listview --Complex.
Gridview - Table
Table - Table
File - Input, Type=File

That's the basics. The more esoteric controls such as the LOGIN control is a table with a bunch of odds an ends within it.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 20, 2009 at 16:20

Stephen Wrighton

38.1k6 gold badges72 silver badges88 bronze badges

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

11 Comments

mbillard Over a year ago

Note that LinkButton renders an anchor element (A) that does a postback on click. The HyperLink element would be more appropriate for regular anchor elements (A).

annakata Over a year ago

Panel -> div and sometimes table applies to 2.0 as well, damn thee downscaling

Stephen Wrighton Over a year ago

@Crossbrowser - very good point. @annakata - I wasn't considering downscaling when building the list. Just a generalized overview

birdus Over a year ago

The ASP.NET control "Label" outputs a <span>, not a Label.

Stephen Wrighton Over a year ago

@birdus - I only use the asp:label when it's associated with an input control, and thus use the AssociatedControlId property. With that set to a valid input control then the ASP.Net Label spits out a LABEL element.

|

Zhaph - Ben Duguid · Accepted Answer · 2017-06-15 06:19:39Z

Stephen's list is pretty comprehensive. I'd add the following notes to it though:

Mostly it depends on the known BrowserCaps.

A 1.x Panel will render as a div in IE6+ - however in Firefox (or other "DownStream" browsers - considered DownStream because there were no details of it in the Machine.Config by default) it will render as a single cell Table - this could be resolved by supplying updated BrowserCaps for Firefox/Opera/Safari/etc, either in the Machine.Config or Web.Configs.

Also, Control Adapters can change the output - for example the CSS Control Adapters will output styled divs for most of the tabular controls (login, registration, repeaters, etc).

Note that it was announced at TechEd/PDC that ASP.NET 4.0 will have the CSS control adapters built in by default.

@Anon234_4521 Cheers for the heads up. That feature was deprecated in .net 2.0 but was still supported up to 3.5, I've therefore updated the link to the last supported version.

Matt Ephraim · Accepted Answer · 2009-01-20 18:09:55Z

4

This doesn't directly answer your question, but in a lot of cases, you can add runat="server" to a regular HTML tag to make ASP.Net aware of it. That might make things easier for the designer, if you want to be able to dynamically change the page, but still allow the designer to work on it.

<div id="myDiv" runat="server"></div>
<span id="mySpan" runat="server"></span>

Edit:

One thing that I forgot to mention (as pointed out by steve_c) is that adding runat="server" will change the ID for the tag, which can be a little bit of a pain. You're kind of out of luck if you're using the ID in your CSS, but in your JavaScript you can add something like <%= myDiv.ClientID %> to get the ID that was generated by .Net.

edited Jan 20, 2009 at 18:09

answered Jan 20, 2009 at 16:06

Matt Ephraim

1,3701 gold badge11 silver badges16 bronze badges

3 Comments

steve_c Over a year ago

To add to what Matt Ephraim said, you should be aware that by adding a runat="server" ASP.NET could potentially modify the id attribute of the tag in question, if that tag is inside an ASP.NET naming container.

Matt Ephraim Over a year ago

That's true. I should have mentioned that.

stephenbayer Over a year ago

this is true, you can add runat to virtually any control. Here we have aspx pages already created using asp.NET server controls. We have a new designer working on it now from the PHP/HTML world, and I'm looking to give him better understanding of the server controls.

Element · Accepted Answer · 2009-01-20 16:40:24Z

1

htmlgenericcontrol might be of help if you need to render a specific tag

answered Jan 20, 2009 at 16:40

Element

4,0597 gold badges45 silver badges51 bronze badges

1 Comment

iCodeSometime Over a year ago

What would be the purpose of using this rather than the actual html tag?

user1853517 · Accepted Answer · 2017-06-20 12:36:58Z

protected void CreateHeaders(List<Group_Info> group_Info)
{
    foreach (Group_Info gi in group_Info)
    {
        HtmlGenericControl groupContainer = new HtmlGenericControl("DIV");
        String lastLableID = "disp" + gi.GroupName.ToString().Replace(" ", "");
        groupContainer.ID = lastLableID;
        groupContainer.Attributes.Add("class", "content-groups");

        HtmlGenericControl groupTitle = new HtmlGenericControl("DIV");
        groupTitle.ID = lastLableID + "Sub1";
        if (gi.GroupName.Trim().Length == 0)
            groupTitle.Attributes.Add("class", "titlebar-hidden");
        else
        {
            groupTitle.Attributes.Add("class", "titlebar");
            groupTitle.InnerText = gi.GroupName.ToString().Trim();
        }

        groupContainer.Controls.Add(groupTitle);

        CreateFields(gi, ref groupContainer);

        this.pageContainer.Controls.Add(groupContainer);
    }
}

Collectives™ on Stack Overflow

ASP.NET Control to HTML tag equivalent

5 Answers 5

11 Comments

2 Comments

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

11 Comments

2 Comments

3 Comments

1 Comment

Comments

Linked

Related