Browse DevX
Sign up for e-mail newsletters from DevX


Creating ASP.NET Custom Controls with Style

Getting your custom control to behave the way you want it to is only half the work. You have to create the logic that generates the actual HTML shown in the browser. It's tedious work, especially if you're supporting multiple browsers.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

aving a custom control display properly is a challenge in itself—and getting your custom control to behave the way you want it to is only half the work. Once you get to the visual side of things you have to create the logic that generates the actual HTML shown in the browser. If you want the control to display properly, this can be a tedious task, especially if you want it to render properly in different browsers.

A control's Render method will render a control in the last step of a control's life cycle, just before the control is disposed. You can override the Render method to create custom output. If you create a new Web Custom Control in Visual Studio .NET (VS.NET), the skeleton code already overrides this method, so all you have to do is fill in the blanks. The only parameter for the Render method is an HtmlTextWriterobject. This is a specific TextWriterobject that writes HTML to the output stream. The HtmlTextWriterobject provides a set of Write methods that you can use to create your output. The most basic methods are Write and WriteLine, part of all TextWriterobjects. So if you would want to render your control showing the Text property in red, you could use the methods shown in Listing 1, which yields the following HTML:

<p> <font color="red">My Text</font> </p>

You can see how error prone this code is, as it requires you to create all the tags by hand. The HtmlTextWriter object provides several methods to make this easier. Methods such as WriteBeginTag, WriteEndTag, and WriteAttribute will write tags and attributes for you, so you don't have to worry about quotes and such. Listing 2 shows how you can use these methods to create the same HTML as before.

By default ASP.NET renders HTML 3.2 for all non-Microsoft browsers, even for Netscape 6 that does support HTML 4.0 and CSS properly.
You may have noticed that the HTML rendered with Listing 1 and Listing 2 is HTML 3.2 without CSS styles. My samples use a <font> tag to change the font color. Although this works, it is considered better practice these days to use CSS. You could, of course, write style tags yourself, but again there's a method that can help you: WriteStyleAttribute. This method write the values for the Style attribute, so in order to add styles to a tag, you actually still have to write the attribute itself, as shown in Listing 3. This latest listing renders the HTML below, which is equivalent to the HTML 3.2 shown earlier (for browsers supporting CSS).

<p style="color:red">My Text</p>

With the different Write methods you can create any HTML or non-HTML output you desire.

The next step is differentiating between different browsers, so you can actually create different HTML for different browsers. To check the type of the requesting browser you can use the HttpBrowserCapabilitiesobject. This object, accessible through Page.Request.Browser, contains all sorts of properties about the client browser. You can check the browser's name and version, whether it supports frames, tables, Java-applets, etc. Strangely absent from this list is whether or not the browser supports CSS (and if so what version), even though that information is stored in machine.config where all browser capabilities are listed. To get around this you have two options, each equally undesirable. The first is using your own knowledge of browsers to decide whether or not you should use CSS, for example:

HttpBrowserCapabilities client; client = Page.Request.Browser; if(client.MajorVersion > 3 && (client.Browser == "IE" || client.Browser == "Netscape")) { //Render CSS } else //Render HTML 3.2 }

Obviously the preceding code can never cover all browsers, so you may end up rendering HTML 3.2 to a browser supporting CSS. If your styles are more complex, for instance labels with background colors, the HTML 3.2 experience will be less than perfect.

Rendering tags is much easier and quicker than writing everything by hand. You are, however, subject to the quirks of ASP.NET's rendering mechanism.
You second option is checking the type of the HtmlTextWriter passed to the Render method, which can be either HtmlTextWriter or Html32TextWriter. The former indicates that a browser supports HTML 4.0 with CSS, and the latter indicates that the browser only supports HTML 3.2 without CSS. You could therefore limit your browser check to the following code:

if(output.GetType().ToString()== "HtmlTextWriter") { //Render CSS } else //Render HTML 3.2 }

The downside to checking the type of the passed HtmlTextWriter is that virtually all non-Microsoft browsers, including Netscape versions that do support CSS, pass Html32TextWriter to the Render method. So even a Netscape 6 browser would receive HTML 3.2, even though it supports CSS perfectly. The only way to get around this is by changing machine.config to add:


to each browser that supports CSS. This is risky though, because this may not only impact CSS support. So test if your application still works properly after changing machine.config.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date