October 2017 : Online course in ASP.NET MVC / Core. Conducted by Bipin Joshi. Read more...
Registration for October 2017 batch of ASP.NET MVC / Core online course has already started. Conducted by Bipin Joshi. Book your seat today ! Click here for more details.

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. 


Bipin Joshi is a software consultant, an author and a yoga mentor having 22+ years of experience in software development. He also conducts online courses in ASP.NET MVC / Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Meditation and Mindfulness to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 11 November 2007


Tags : ASP.NET Custom Controls