Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.NET Control to HTML tag equivalent

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.

like image 767
stephenbayer Avatar asked Jan 20 '09 15:01

stephenbayer


People also ask

Is ASP.NET similar to HTML?

HTML allows web browsers to interpret display content written between tags. It allows images and objects to be embedded in the webpage. ASP is used to design user-interactive or dynamic web pages. HTML is basically used to create static web pages.

What is ASP tag in HTML?

ASP stands for Active Server Pages. ASP is a development framework for building web pages. ASP supports many different development models: Classic ASP. ASP.NET Web Forms.

What is the difference between Htmlhelper and TagHelper?

Unlike HtmlHelpers, a tag helper is a class that attaches itself to an HTML-compliant element in a View or Razor Page. The tag helper can, through its properties, add additional attributes to the element that a developer can use to customize the tag's behavior.

What is an ASP.NET control?

An ASP.NET control is a . NET class that executes on the server and renders certain content to the browser. For example, in the first ASP.NET page created at the beginning of this chapter, a Label control was used to display the current date and time.


2 Answers

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.

like image 71
Stephen Wrighton Avatar answered Sep 21 '22 03:09

Stephen Wrighton


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.

like image 23
Zhaph - Ben Duguid Avatar answered Sep 21 '22 03:09

Zhaph - Ben Duguid