ASP.NET Control to HTML tag equivalent

落花浮王杯 提交于 2019-11-28 02:53:50
Stephen Wrighton

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.

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.

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.

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

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);
    }
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!