如何更改自定义控件的呈现行为，使其不再是跨度

Question

编写自定义控件时，它始终呈现为 HTML span 元素。 例如，我如何将其更改为 div？

Answer 1

按如下方式从 WebControl 派生控件：

public class MyCustomControl : WebControl {
    public MyCustomControl() : base(HtmlTextWriterTag.Div) {}
}

即，使用接受要使用的标记的基类构造函数。

Answer 2

如果从 CompositeControl 派生，则没有采用标记类型的构造函数。 您可以重写 TagKey （我没有尝试过），但更灵活的选择是重写 RenderBeginTag 方法并使其执行您想要的操作。 基类呈现一个“span”开始元素，但您不必调用基类方法。 如果您不想渲染任何内容，则不必调用任何内容（在这种情况下也覆盖 RenderEndTag 并且也不在那里调用任何内容）。 例如，

public override void RenderBeginTag(HtmlTextWriter writer)
    {
        writer.AddAttribute(HtmlTextWriterAttribute.Class, "reportViewer");
        writer.AddAttribute(HtmlTextWriterAttribute.Id, "QueryViewerWrapper");
        writer.RenderBeginTag(HtmlTextWriterTag.Div); 
    }

这段代码生成的

<div class="reportViewer" id="QueryViewerWrapper">

正是我的这个特定复合控件所需要的，一个带有类来包装 ReportViewer 控件的 div。 我添加 ID 只是为了使输出更易于识别。

Answer 3

我通常有自己的基类，所有复合控件都继承自该基类。 我添加到其中的属性之一是 ContainerElement。 公开暴露后，开发人员可以选择他们想要的外部元素。 它在内部设置了 TagKey 属性，该属性控制基本控件上的呈现。 以下所有内容均属于您的控件/基类。

您只需要设置 HTMLContainerElement 即可获得 HtmlTextWriterTag 枚举中所有项目的智能帮助。

/// <summary>
/// Local variable for storing what the container element for the rendered control will be.
/// </summary>
private HtmlTextWriterTag hosTagKey = HtmlTextWriterTag.Span;

/// <summary>
/// HTMLContanerElement is the tag key used to set the controls outer html control which appears in the markup.
/// The default is a span, but you can change this to be any HTML control you choose.
/// </summary>
public HtmlTextWriterTag HTMLContainerElement
{
  get { return this.hosTagKey; }
  set { this.hosTagKey = value; }
}

/// <summary>
/// Makes it so this control is a "div" element instead of the
/// standard "span" element.
/// </summary>
protected override HtmlTextWriterTag TagKey
{
  get { return this.hosTagKey; }
}

Answer 4

此更改呈现包装 div 而不是 span

public class MyControl : WebControl
{
    protected override HtmlTextWriterTag TagKey
    {
        get { return HtmlTextWriterTag.Div; }
    }
}