ASP.NET Custom Server Controls: Combining ImageHoverButton and RoundCorneredButton - Starting with the usual TABLE
(Page 3 of 8 )
The default “Render” method (when not overridden by us) usually calls “RenderBeginTag” before calling any other methods. Let us examine the “RenderBeginTag” method in my control step by step:
MyBase.AddAttributesToRender(writer)
'registering JavaScripts
If Not Page.IsStartupScriptRegistered(Me.ClientID &
"_MouseOver") Then
Page.RegisterStartupScript(Me.ClientID &
"_MouseOver", getJS4MouseOver(Me.ClientID & "_MouseOver"))
End If
If Not Page.IsStartupScriptRegistered(Me.ClientID &
"_MouseOut") Then
Page.RegisterStartupScript(Me.ClientID & "_MouseOut",
getJS4MouseOut(Me.ClientID & "_MouseOut"))
End If
Within the above method, I am trying to call the “MyBase.AddAttributesToRender(Writer)” statement to add any design-time attributes to my control. This is a must when we use the control with the Visual Studio.NET designer. You can also override with any other attributes you want (as shown in my previous articles of the same series). The next two “if” structures will register two “hover” JavaScripts for the control. Further proceeding, we have the following:
'opening table
writer.AddStyleAttribute("text-Align", "center")
writer.AddStyleAttribute("vertical-Align", "middle")
writer.AddStyleAttribute("cursor", "hand")
writer.AddAttribute(HtmlTextWriterAttribute.Name,
Me.UniqueID)
writer.AddAttribute(HtmlTextWriterAttribute.Border,
"0px")
writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding,
"0px")
writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing,
"0px")
writer.AddAttribute("onMouseOver", Me.ClientID &
"_MouseOver();")
writer.AddAttribute("onMouseOut", Me.ClientID &
"_MouseOut();")
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,
Page.GetPostBackEventReference(Me, String.Empty))
writer.RenderBeginTag(HtmlTextWriterTag.Table)
From all the above statements, the conclusion would be something like: I am trying to render a “<TABLE>” tag with some attributes. I am also emitting “javascript” events at this stage itself, which means that the “hover” event applies to the whole table! Another of the most important statements to concentrate on from above is this:
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,
Page.GetPostBackEventReference(Me, String.Empty))
That is the main trick I played to convert the “table” to “button.” Once the above statement is executed, it now supports a post back when clicked!
Starting simply with “<TABLE>” is not enough. We need to frame a 3x3 set of cells within the table. I call the first row of cells header, second row of cells body (or content) and third row footer for a better understanding.
In our next section, we shall see how to implement the header.
Next: Creating the header >>
More ASP.NET Articles
More By Jagadish Chaterjee
