Summary:
This article is about to show how to create a template for control in ASP.NET. This is a small introduction to the subject of control templates. So after reading this article you will get basic knowledge needed for starting using this technology that could make site developing process significantly effective.
The motivation
So what do we need this for? The main propose of using control templates is to separate code from graphic design including HTML code. That makes our site more flexible and easy for change. You can replace graphic design on whole site without touching the code or recompiling it. Certainly there are other technologies helps you to achieve such things but this on my opinion is most effective at least for ASP.NET.
Let’s get started
In this article I will show how to create login user control using templates. We will start from creation abstract control class. Abstract class means that you can not create an object of this class you can only derive from it. Our feature login control and other custom controls on our site, will inherit properties from that control. Let’s take a look on our basic class:
public abstract class BaseControl : WebControl, INamingContainer
{
string templateFileName = null;
public override ControlCollection Controls
{
get
{
EnsureChildControls();
return base.Controls;
}
}
protected override void CreateChildControls()
{
Control template;
// Load the template
template = LoadTemplate();
// Initialize the template
InitializeTemplate(template);
Controls.Add(template);
}
protected Control LoadTemplate()
{
Control template = new Control();
string templatePath = "~/templates/" + TemplateFileName;
// Do we have a template?
try
{
template = Page.LoadControl(templatePath);
}
catch (FileNotFoundException)
{
// we do not have a template
}
return template;
}
protected abstract void InitializeTemplate(Control template);
public string TemplateFileName
{
get { return templateFileName; }
set { templateFileName = value; }
}
}
This control must inherit from WebControl class because we create new custom control, it will derive basic web control properties e.g. width, height. It also implements INamingContainer interface that allows you create few instances of control on the page.
Procedure LoadTemplate() loads template from given template path to the control object.
This control including all its child controls would be added to our custom control chld controls collection.
Protected procedure CreateChildControls() forces server controls to use composition-based implementation to create any child controls they contain in preparation for posting back or rendering.
The procedure InitializeTemplate(Control template) will be implemented by control derived from this class.
This is a code of UserLogin control that contain all control logic. As you can see it inherits BaseControl properties.
public class UserLogin : BaseControl
{
string tempelateFileName = "UserLogin_Tpl.ascx";
public UserLogin()
{
if(TemplateFileName==null)
TemplateFileName = tempelateFileName;
}
protected override void InitializeTemplate(Control template)
{
// add click event handler
Button button = (Button)template.FindControl("bttnLogin");
button.Click+=new EventHandler(bttnLogin_Click);
}
private void bttnLogin_Click(object sender, EventArgs e)
{
Control template;
string userEmail, userPassword;
TextBox textbox;
template = ((Control)sender).Parent;
textbox = (TextBox)template.FindControl("txtUserName");
userEmail = textbox.Text;
textbox = (TextBox)template.FindControl("txtPassword");
userPassword = textbox.Text;
// do something
}
Implemented procedure InitializeTemplate() is responsible for setup control’s pre render data. For example if you need to get some details stored in database this is a right place to do it. So if I want one of my text boxes to show something when page loads, I will add the following:
textbox = (TextBox)template.FindControl("txtUserName");
testbox.text = “Skiff”;
It is also place to add event handlers for objects like it shown in example above: button click event handler was added.
Next we create template for this control (see source code) that will consist of HTML and standard web controls. Now you can finally you add UserLogin control to web page.
In this article I described most important, on my opinion, points of control templates development. I skipped template creation and control add explanation on propose because I think it is too trivial. Any way you can always see it in demo project. I hope this article would help…