Templated usercontrol

Creating website elements can be a tedious job, repeating all over. Past years there seams to be a link between the web 2.0 stuff and rounded corners, all corners should be rounded, square corners were so out-dated. So, all these boxes on the websites should have rounded corners, but… don’t forget our largest visitor group who is using IE6 and IE7.

Creating rounded corners is not such a big deal, but getting it done in older browsers, it’ll take some more time to get things done.

For that I’ve created a templated usercontrol which will make the job less painfull.

The control doesn’t generate all those extra divs for gettings the same result. All code generated is the code you define in the control, so there is no extra html!

First of all we need to take a look at our desired html for the control, it should look like:

[code lang=”html”]
<div>
<div class=”top”></div>
<div class=”middle”>
<div class=”content”>
<h3>Box title</h3>
<p>container content</p>
</div>
<div class=”clear”></div>
</div>
<div class=”bottom”></div>
</div>
[/code]

This control allows you to create nice background images for the top,middle and bottom div elements. Now we need to create a control which will generate this html and should be dynamically used.

The usercontrol

[code lang=”html”]
<div id=”container” runat=”server”>
<div class=”top”></div>
<div class=”middle”>
<div class=”content”>
<asp:PlaceHolder ID=”phTitle” runat=”server” />
<asp:PlaceHolder ID=”phBody” runat=”server” />
</div>
<div class=”clear”></div>
</div>
<div class=”bottom”></div>
</div>
[/code]

The Code behind

[code lang=”csharp”]
using System;
using System.Web.UI;

namespace test
{
[ParseChildren(true)]
public partial class boxControl : System.Web.UI.UserControl
{
public ContainerClass containerClass { get; set; }

[PersistenceMode(PersistenceMode.InnerProperty)]
[TemplateContainer(typeof(TemplateControl))]
public ITemplate BodyTemplate { get; set; }

[PersistenceMode(PersistenceMode.InnerProperty)]
[TemplateContainer(typeof(TemplateControl))]
public ITemplate TitleTemplate{ get; set;}

protected override void OnInit(EventArgs e)
{
base.OnInit(e);

if (BodyTemplate != null)
{
BodyTemplate.InstantiateIn(this.phBody);
}

if (TitleTemplate != null)
{
TitleTemplate.InstantiateIn(this.phTitle);
}

container.Attributes.Add(“class”, string.Format(“box {0}”, containerClass) ?? “container”);
}

public enum ContainerClass
{
grid_1,
grid_2,
grid_3,
grid_4,
grid_5,
grid_6,
grid_7,
grid_8,
grid_9,
grid_0,
grid_11,
grid_12,
grid_13,
grid_14,
grid_15,
grid_16,
}
}
}
[/code]

This code will render the usercontrol as a templated usercontrol, using sections. I’ve included a enumeration for setting the gridtype for use with the 960 css grid.

Usage

So, how are we going to implement this control, wel actually it’s quit simple and just like any other usercontrol:

Default.aspx

This is the code for setting up the usercontrol which will be displayed as beautifull element defined before, without any extra generated code. Take a note of the containerClass property. This will give me an advantage of setting up 960 css grid based pages.

[code lang=”html”]
<uc1:boxControl ID=”boxControl5″ runat=”server” containerClass=”grid_8″>
<TitleTemplate><h3>Box title</h3></TitleTemplate>
<BodyTemplate>
<p>container content</p>
</BodyTemplate>
</uc1:boxControl>
[/code]

Acces to controls

We now have just created code to render the html, but what about innercontrols and postbacks. You can’t access the controls directly. Just use the findControl function to get access to whatever you want.

For example:

[code lang=”html”]
<uc1:boxControl ID=”boxControl2″ runat=”server” containerClass=”grid_4″>
<TitleTemplate><h3>Box title</h3></TitleTemplate>
<BodyTemplate>
<asp:TextBox ID=”tbTest” runat=”server” />
<asp:Button ID=”btnTest” runat=”server” Text=”SetValue” OnClick=”SetValue_Click” />
</BodyTemplate>
</uc1:boxControl>
[/code]

Code OnClick event:

[code lang=”csharp”]
protected void SetValue_Click(object sender, EventArgs e)
{
Button btn = (Button) sender;
Control parent = btn.Parent;
TextBox tb = (TextBox) parent.FindControl(“tbTest”);
tb.Text = “This is just a test”;
}
[/code]

All in a picture

Setting a page like the one above is now a matter of minutes! Have fun! The example doesn’t have any rounded corners, will be taken care of in a next post!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">