ASP.NET 控件到 HTML 标记等效

ASP.NET Control to HTML tag equivalent

提问by stephenbayer

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.

我正在寻找一个备忘单，它可以让我向 HTML 设计者展示标准 HTML 标签的等效 asp.net 控件。例如，<asp:Panel> 将呈现为 HTML <div>，而 <asp:Label> 将呈现为 HTML <span>。我一直在谷歌上搜索这个无济于事。有人可以张贴一个好的备忘单的链接，以便这个项目的设计师可以更清楚地理解 aspx 页面上的标记。

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".

明确地说，我想要一个指向主要 ASP.NET 控件列表的链接，并说明它们与标准 HTML 的关系。如果这是 PDF 格式或易于阅读和打印的网页，那就太好了。就我而言，原因是我们有一个非常熟悉 HTML 的 PHP 开发人员来处理我们的项目，我觉得如果可以的话，更好地了解标准 ASP.NET 服务器控件会很有用递给他这样一个“备忘单”。

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

我主要指的是 .NET 2.0 框架，但我们也在使用 3.0/3.5。

回答by 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.

这不是一个简单的问题，因为这取决于您所谈论的 .NEt 版本以及有时的控件状态。例如，面板在 1 和 1.1 中呈现为 TABLE，而在更高版本中呈现为 DIV。

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

但总的来说（2/3），这里是：

• 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.

• 面板 - Div
• 面板 -- GroupingText="###" 是字段集、图例
• 标签 - 跨度
• 按钮 - 输入、类型按钮
• 链接按钮 - 带有 JS 回传脚本的 Href
• 超链接 - 标准 HREF
• 图像按钮 - 输入，输入图像
• 文本框 -- 默认为输入，输入文本
• 文本框 -- Mode = Password is Input，输入密码
• 文本框 -- Mode= Multiline 是 Textarea
• 下拉列表 - 选择
• 列表框 - 选择
• RadioButton - 输入，带有 GroupName 的 Radio
• 复选框 - 输入，复选框
• 中继器/列表视图——复杂。
• 网格视图 - 表格
• 表 - 表

• 文件 - 输入，类型=文件

  这就是基础知识。更深奥的控件（例如 LOGIN 控件）是一个表格，其中包含一堆赔率。

回答by Zhaph - Ben Duguid

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

斯蒂芬的清单非常全面。不过，我会为其添加以下注释：

Mostly it depends on the known BrowserCaps.

主要取决于已知的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.

1.x 面板将在 IE6+ 中呈现为 div - 但是在 Firefox（或其他“下游”浏览器 - 被视为下游，因为默认情况下 Machine.Config 中没有它的详细信息）它将呈现为单个单元格表 -这可以通过在 Machine.Config 或 Web.Configs 中为 Firefox/Opera/Safari/等提供更新的 BrowserCaps 来解决。

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

此外，控件适配器可以更改输出 - 例如，CSS 控件适配器将为大多数表格控件（登录、注册、转发器等）输出样式化的 div。

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

请注意，在 TechEd/PDC 上宣布 ASP.NET 4.0 将默认内置 CSS 控件适配器。

回答by Matt Ephraim

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.

这并不能直接回答您的问题，但在很多情况下，您可以将 runat="server" 添加到常规 HTML 标记中，以使 ASP.Net 意识到它。如果您希望能够动态更改页面，但仍允许设计人员对其进行处理，那么这可能会使设计人员的工作更轻松。

<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.

我忘记提及的一件事（正如 steve_c 所指出的）是添加 runat="server" 将更改标签的 ID，这可能有点麻烦。如果您在 CSS 中使用 ID，那您有点不走运，但是在您的 JavaScript 中，您可以添加类似 <%= myDiv.ClientID %> 的内容来获取由 .Net 生成的 ID。

回答by Element

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

如果您需要呈现特定标签，htmlgenericcontrol 可能会有所帮助

回答by Switch

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);
    }
}