Adding support for styles
Introduction
In the
previous lesson you learnt to develop a basic control. Your control
inherited from the Control base class and emitted some HTML markup by overriding
the Render() method of the base class. Though the control worked fine it lacked
one important feature - support for formatting properties such as Font and ForeColor. Fortunately, the WebControl class from System.Web.UI.WebControls
namespaces comes with inbuilt support for such properties. Instead of inheriting
your control from the Control base class if you inherit from the WebControl
control then your custom control can also avail these features. This lesson will
teach you to do just that.
HyperLinkGroup Control with style support
In this article you will change the HyperLinkGroup custom control of the
previous lesson. This time the HyperLinkGroup control inherits from WebControl
base class.
public class HyperLinkGroupWithStyles:WebControl
{
public HyperLinkGroupWithStyles()
: base(HtmlTextWriterTag.Table)
{
}
...
}
Notice that the constructor of HyperLinkGroupWithStyles calls the base class
constructors by passing the base HTML tag. The base HTML tag is specified via
HtmlTextWriterTag enumeration. All the style attributes you specify later are
added to this base tag.
Adding styles support
The HyperLinkGroupWithStyles class overrides two methods of the WebControl
base class viz. AddAttributesToRender and RenderContents. The former method is
used to add style attributes to the base HTML tag whereas the later method emits
the HTML content of the control. In our example the AddAttributesToRender()
looks as shown below:
protected override void AddAttributesToRender
(HtmlTextWriter writer)
{
base.AddAttributesToRender(writer);
writer.AddAttribute(HtmlTextWriterAttribute.
Border,"1");
writer.AddAttribute(HtmlTextWriterAttribute.
Cellpadding, "3");
}
The AddAttributesToRender() method receives a parameter of type
HtmlTextWriter using which you can add style attributes to the base tag. Inside
you first call AddAttributesToRender() method on the base class so that any
implementation written in the base class gets executed. Then you add Border and
CellPadding attributes using AddAttribute() method. This way your base HTML
<table> tag will have Border attribute set to 1 and CellPadding attribute set to
3.
Rendering contents
The RenderContents() overridden method does the job of reading the XML file
and rendering required number of hyperlinks. This time, however, it uses
different methods to emit the contents. Have a look below:
protected override void RenderContents
(HtmlTextWriter writer)
{
base.RenderContents(writer);
DataSet ds = new DataSet();
ds.ReadXml(HttpContext.Current.Server.MapPath
(strSource));
if (enumDir == HyperLinkGroupDirection.Horizontal)
{
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
foreach (DataRow row in ds.Tables[0].Rows)
{
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.AddAttribute(HtmlTextWriterAttribute.Href,
row["url"].ToString());
writer.RenderBeginTag(HtmlTextWriterTag.A);
writer.Write(row["title"].ToString());
writer.RenderEndTag();
writer.RenderEndTag();
}
writer.RenderEndTag();
}
else
{
foreach (DataRow row in ds.Tables[0].Rows)
{
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.AddAttribute(HtmlTextWriterAttribute.Href,
row["url"].ToString());
writer.RenderBeginTag(HtmlTextWriterTag.A);
writer.Write(row["title"].ToString());
writer.RenderEndTag();
writer.RenderEndTag();
writer.RenderEndTag();
}
}
}
Recollect that in the preceding lesson you used methods such as WriteBeginTag()
and WriteEndTag(). This time you use RenderBeginTag(), AddAttribute() and
RenderEndTag() methods instead. The RenderBeginTag() method allows you to
specify tag to be rendered using HtmlTextWriterTag enumeration. Note the use of
AddAttribute() method. This method emits an attribute as specified by
HtmlTextWriterAttribute enumeration to the following tag emitted by
RenderBeginTag() method. The RenderEndTag() simply closes the nearest tag opened
using RenderBeginTag() method.
This completes the control. You can now use it on your web forms as
illustrated in the previous lesson. When you drag and drop an instance of
HyperLinkGroupWithStyles control on the web form it shows various additional
properties in the properties window.
These properties are supplied by the WebControl base class. The following
figure shows a sample run of the web form that contains an instance of
HyperLinkGroupWithStyles control.
