Rendering a Web Control The HoverLabel Example | Developing Microsoft ASP.NET Server Controls and Components (Pro-Developer)

Rendering a Web Control ”The HoverLabel Example

We'll now develop a simple control, HoverLabel , shown in Figure 8-1, which derives from WebControl and binds JavaScript event handlers (for example, onmouseover ="handler script") on the rendered HTML tag. The example demonstrates a common technique that you can use to add basic client-side behavior to your server control. We'll look at more complex client-side behavior in Chapter 13, "Client-Side Behavior."

Figure 8-1. HoverLabelTest.aspx viewed in a browser

graphics/f08hn01.jpg

The HoverLabel example in Listing 8-3 overrides the AddAttributesToRender method to render the onmouseover and onmouseup DHTML attributes with JavaScript event handlers as values on the HTML tag. HoverLabel also overrides the RenderContents method to render text (inner HTML) within HTML tags. In addition , HoverLabel overrides the TagKey property to generate a <div> tag to demonstrate how to override the default <span> tag generated by WebControl .

Listing 8-3 HoverLabel.cs

 usingSystem; usingSystem.ComponentModel; usingSystem.Web.UI; usingSystem.Web.UI.WebControls; namespaceMSPress.ServerControls{ [ DefaultProperty("Text") ] publicclassHoverLabel:WebControl{ [ Bindable(true), Category("Appearance"), DefaultValue(""), Description("Thetextrenderedinthelabel."), ] publicvirtualstringText{ get{ strings=(string)ViewState["Text"]; return((s==null)?String.Empty:s);

 } set{ ViewState["Text"]=value; } } [ Bindable(true), Category("Appearance"), DefaultValue(""), Description("Thetexttodisplayinthestatusbar."), ] publicvirtualstringStatusBarText{ get{ strings=(string)ViewState["StatusBarText"]; return((s==null)?String.Empty:s); } set{ ViewState["StatusBarText"]=value; } } protectedoverrideHtmlTextWriterTagTagKey{ get{ returnHtmlTextWriterTag.Div; } } //Thisensuresthattherearenochildcontrols. protectedoverrideControlCollectionCreateControlCollection(){ returnnewEmptyControlCollection(this); } protectedoverride voidAddAttributesToRender(HtmlTextWriterwriter){ //Invokethemethodofthebaseclasstorender //styleandotherattributesthatWebControlrenders. base.AddAttributesToRender(writer); writer.AddAttribute("onmouseover",  "this.style.textDecoration='underline';status='" + StatusBarText+ "';"); //ThethirdparameteroftheAddAttributemethodisa //Booleanvariablethatspecifieswhetherthevalueof //theattributeshouldbeHTMLencoded.Bydefault, //attributesthatarenotlistedinthe //HtmlTextWriterAttributeenumeration(unknownattributes) //areHTMLencoded.onmouseoutisunknownbutdoesnot //requireHTMLencodingbecauseitsvaluedoesnotcontain //user-specifiedtext.Wedidnotspecifythethird //parameterwhenaddingtheonmouseoverattributebecause //weusedthedefaultvalue(true).Theonmouseover //attributecontainstheStatusBarTextproperty,which //shouldbeencodedbecauseitisauser-enteredstring //thatcouldcontaincharacterssuchasaquotationmark //oranampersand. writer.AddAttribute("onmouseout",  "this.style.textDecoration='none';status='';", false); } protectedoverridevoidRenderContents(HtmlTextWriterwriter){ writer.Write(Text); //WedonotinvoketheRenderContentsmethodofthebase //classbecausetherearenochildrentorender. } } }

Note that HoverLabel derives from WebControl instead of deriving from Label because we want to demonstrate how to render text within a Web control's tags. If you want to develop a label that has client-side behavior, you should derive from Label so that you can reuse its functionality. Label already exposes a Text property and renders it within the control's tags.

Listing 8-4 contains a page that uses the HoverLabel control.

Listing 8-4 HoverLabel.cs

 <%@PageLanguage="C#" %> <%@RegisterTagPrefix="msp" Namespace="MSPress.ServerControls"  Assembly="MSPress.ServerControls" %> <html> <body> <formrunat="server"> <br> <msp:HoverLabelid="HoverLabel1" runat="server"  StatusBarText="Youplacedthemouseonthehoverlabel."  Text="MyHoverLabel1" BackColor="WhiteSmoke" Font-Size="18pt"  BorderColor="Silver" Width="150px" /> <br> <msp:HoverLabelid="Hoverlabel2" runat="server"  StatusBarText="Youplacedthemouseonthehoverlabel."  Text="MyHoverLabel2" BackColor="WhiteSmoke"  Font-Size="18pt" BorderColor="Silver" Width="150px" />

 <br> </form> </body> </html>

In Figure 8-1, HoverLabelTest.aspx is viewed in a browser. The underlined text style in the first instance of HoverLabel and the message in the status bar are caused by the onmouseover and onmouseout client-side event handlers specified on the HTML tag rendered by HoverLabel .

If you look at the HTML source for the page, you will see content rendered by each HoverLabel instance that is similar to the HTML listed after this paragraph. The boldface attributes in the example are the result of overriding the AddAttributesToRender method in HoverLabel . The other attributes come from properties that HoverLabel inherits from WebControl and are rendered by WebControl 's implementation of AddAttributesToRender . These attributes are rendered because we invoked the base class's AddAttributesToRender method when overriding AddAttributesToRender . The text within the HTML element's tags corresponds to the Text property of HoverLabel , which we wrote out in the RenderContents method.

 <divid="HoverLabel1"  onmouseover="this.style.textDecoration= 'underline';status='Youplacedthemouseonthehoverlabel.';" onmouseout="this.style.textDecoration='none';status='';"  style="background-color:WhiteSmoke;border-color:Silver; font-size:18pt;width:150px;"> MyHoverLabel1 </div>