カスタムコントロールのレンダリング動作をスパンから変更する方法

Question

カスタムコントロールを書き込むときは、常にHTMLスパン要素としてレンダリングされます。 divなどに変更するにはどうすればよいですか？

ある

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

、使用するタグを受け付け基底クラスのコンストラクタを使用して次のように

Answer 1

はWebControlからあなたのコントロールを導出します。

Answer 2

私は通常、すべての私のコンポジットコントロールが継承した独自の基本クラスを持っています。これに追加するプロパティの1つに、ContainerElementがあります。公開されているので、開発者は外部要素を自由に選ぶことができます。内部的には、ベースコントロール上でこのレンダリングを管理するTagKeyプロパティを設定します。あなたのコントロール/ベースクラスのすべてを以下に示します。

HtmlTextWriterTag列挙内のすべての項目のインテリヘルプを持つHTMLContainerElementを設定するだけで済みます。

/// <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 3

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

このコードは、私は私のこの特定の複合コントロール、ReportViewerコントロールをラップするクラスを持つdiv要素のために必要な正確に何である

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

を生成します。私は、出力を見やすくするためにIDを含めるだけです。