Creating a Templated User Control in Asp.net 2.0

Presently we are using many Templated we b control in asp.net as GridView, Detailview etc. In Templeted Control developer is free to change the appearance of control according to their reqiurment. So basically a Templeted Control provide sepration between data and presentation. Similarly we can also design Templeted Web User Control. So the appearance of control will depend on developer. The step creating template webn user control is given below.
Like user controls, the templated user control is only reusable in the same Web site.
The templated user control must provide a container class that is a naming container and has properties that are accessible to the host page. The template contains the user interface for the templated user control and is supplied by the page developer at design time. A template can contain controls and markup.
Here I am creating a templated web user control for User Address
1. In Visual studio open a web project it will contain a default.aspx by default. Add a web user control and place an ASP.NET Placeholder control where you want the template to appear.
2.(UserAddress.cs) Add a new class to the App_Code folder in your Web site that contains the template's naming container class. This class inherits from Control, implements the INamingContainer, and contains a public property for each data element that is visible to the template. The container control contains an instance of the template when it is rendered.
3. In the user control's code-behind page, add public properties to add data to Templates’naming contailer.Implement a public property of type Itemplate and ITemplate.Apply the TemplateContainerAttribute to the ITemplate property and pass the type of the template's( Eg. UserAddress) naming container class as the argument to the constructor of the attribute. Also, apply the PersistenceModeAttribute to the ITemplate property and pass the enumeration value of PersistenceMode.InnerProperty into its constructor.
4.(TempletedUserControl.ascx.cs) In the Page_Init method of the user control, test for the ITemplate property being set. If the ITemplate property is set, create an instance of the naming container class and create an instance of the template in the naming container. Add the naming container instance to the Controls property of the PlaceHolder server control.In Page_Load method call Databind method.
6. In Default.aspx page set the properies to read data and define the template for data presentation.


Sample code for creating Templated Web User control is given below.

UserAddress.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

/// <summary>
/// Summary description for UserAddress
/// </summary>
public class UserAddress:Control,INamingContainer
{
public UserAddress(string name,string address,string city , string state,string country,int zip)
{
Name = name;
Address = address;
City = city;
State = state;
Country = country;
Zip = zip;
}
public string Address
{
get
{
return _address;
}
set
{
_address = value;
}
}
string _address;
public string Name
{
get
{ return _name; }
set
{
_name = value;
}

}
string _name;
public string State
{
get
{
return _state;
}
set
{
_state = value;
}
}
string _state;
public string City
{
get
{
return _City;
}
set
{
_City = value;
}
}
string _City;

public string Country
{
get
{
return _Country;
}
set
{
_Country = value;
}
}
string _Country;
public int Zip
{
get
{
return _zip;
}
set
{
_zip = value;
}
}
int _zip;


}

TemplatedUserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TepletedUserControl.ascx.cs" Inherits="TepletedUserControl" %>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

TemplatedUserControl.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class TepletedUserControl : System.Web.UI.UserControl
{
ITemplate userAddress;
[TemplateContainer(typeof(UserAddress))]
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate UserAddressTempete
{
get
{
return userAddress;
}
set
{
userAddress = value;
}
}
public string Address
{
get
{
return _address;
}
set
{
_address = value;
}
}
string _address;
public string Name
{
get
{ return _name; }
set
{
_name = value;
}

}
string _name;
public string State
{
get
{
return _state;
}
set
{
_state = value;
}
}
string _state;
public string City
{
get
{
return _City;
}
set
{
_City = value;
}
}
string _City;

public string Country
{
get
{
return _Country;
}
set
{
_Country = value;
}
}
string _Country;
public int Zip
{
get
{
return _zip;
}
set
{
_zip = value;
}
}
int _zip;
protected void Page_Load(object sender, EventArgs e)
{
DataBind();
}
protected void Page_Init(object sender, EventArgs e)
{
PlaceHolder1.Controls.Clear();
if (UserAddressTempete == null)
{
PlaceHolder1.Controls.Add(new LiteralControl("No Template is defined"));
return;
}
UserAddress uadd = new UserAddress(Name, Address, City, State, Country, Zip);
UserAddressTempete.InstantiateIn(uadd);
PlaceHolder1.Controls.Add(uadd);
}
}

Default.aspx.cs
there is no need to write any thing regarding thisin this file.


Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="TepletedUserControl.ascx" TagName="TepletedUserControl" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:TepletedUserControl id="TepletedUserControl1" runat="server" Name="Som Nath" Address="CST " City="Mumbai" State="Maharashtra" Country="India" Zip="400079">
<UserAddressTempete>
<h1> User Address</h1>
<div style="background-color:Red"><h2> Name: </h2>
<%#Container.Name %>
</div>

<div style="background-color:Green"><h2>Address:</h2>
<%#Container.Address %></div>
<div style="background-color:Green " ><h2> City: </h2>
<%#Container.City%>
</div>
<div style="background-color:Red"><h2>State:</h2>
<%#Container.State%>
</div>

<div style="background-color:Green"><h2>Country:</h2>
<%#Container.Country%>
</div>
<div style="background-color:Red"><h2>Zip:</h2>
<%#Container.Zip%>
</div>
</UserAddressTempete>
</uc1:TepletedUserControl> </div>
</form>
</body>
</html>