Dibbus.com

Where design meets development

Templated usercontrol

| 0 comments

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:

<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>

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

<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>

The Code behind

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,
}
}
}

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.

<uc1:boxControl ID="boxControl5" runat="server" containerClass="grid_8">
<TitleTemplate><h3>Box title</h3></TitleTemplate>
<BodyTemplate>
<p>container content</p>
</BodyTemplate>
</uc1:boxControl>

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:

<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 OnClick event:

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";
}

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!

Author: Folkert

I'm a webdeveloper, looking for the best experience, working between development and design. Just a creative programmer. When I'm getting tired of programming C#, i'd love to create 3D images in 3D Studio Max, play the guitar, create an app for Android or crush some plastics on a climbing wall or try to stay alive when i´m descending some nice white powdered snowy mountains on my snowboard.

Leave a Reply

Required fields are marked *.

*


Page optimized by WP Minify WordPress Plugin