|
Steps for creating Template class
1. Create a Template class
(MyTemplate class, Listing 2 –TemplateClass for DataList) that implements
ITemplate interface.
2. Create a constructor for the
class that takes ListItemType as argument so that we can determine whether we
are constructing HeaderTemplate or ItemTemplate or FooterTemplate. Also we can
make it through by exposing ListItemType as public property.
3. Implement the
InstantiateIn(Control container) method and construct the corresponding template
from the input got from the constructor. Refer the code (Listing 2
–TemplateClass for DataList) for clear understanding.
4. For data binding and child
control that requires data binding, create a data binding event to fill the data
with the control. This event will be raised after the template items are created
with all its controls.
The above 4 steps have been implemented in the code,
Listing 2 –TemplateClass for DataList.
Constructing Dynamic DataList
The DataList will have Header template with Category
Name displayed. For example, if it is displaying ASP.Net article the category
name will be ASP.Net. The articles will be displayed in the item template i.e.
for every article in the item template we will display the title of the article
as a hyperlink that links to the original URL of the article with a description
and author name. The footer will show the number of articles present in this
category. Refer “Figure 1 – Article Listing” for better understanding.
Listing 2 –TemplateClass for DataList
public class MyTemplate : ITemplate
{
ListItemType _itemType;
private string _no;
private string _categoryName;
public string NoOfArticles
{
get
{
return _no;
}
set
{
_no = value;
}
}
public string CategoryName
{
get
{
return _categoryName;
}
set
{
_categoryName = value;
}
}
public MyTemplate(ListItemType Type)
{
_itemType = Type;
}
public void InstantiateIn(System.Web.UI.Control
container)
{
Literal lc = new Literal();
switch (_itemType)
{
case ListItemType.Header:
lc.Text = "<div id=\"nifty\"
class=\"PostCategory\"> " + CategoryName + "</div>";
break;
case ListItemType.Item:
lc.DataBinding += new
EventHandler(TemplateControl_DataBinding);
break;
case ListItemType.Footer:
lc.Text = "<div
style=\"text-align:right\">" + NoOfArticles + " Article(s) present in
this category" + "</div>";
break;
}
container.Controls.Add(lc);
}
private void TemplateControl_DataBinding(object sender,
System.EventArgs e)
{
Literal lc;
lc = (Literal)sender;
DataListItem container =
(DataListItem)lc.NamingContainer;
lc.Text += "<div class=\"Post\"><div
class=\"PostTitle\"><A href=" + DataBinder.Eval(container.DataItem,
"URL") + ">" + DataBinder.Eval(container.DataItem, "Title") +
"</a></div><div class=\"PostSubtitle\">" +
DataBinder.Eval(container.DataItem, "Description") + "</div> <div
class=\"PostInfo\">Posted on " + DataBinder.Eval(container.DataItem,
"CreatedOn", "{0:d} @ {0:t}") + " By " + DataBinder.Eval(container.DataItem,
"CreatedBy") + " in " + DataBinder.Eval(container.DataItem, "Category") +
"</div> ";
}
}
In the above code (Listing 3 –TemplateClass for
DataList), I have used 2 public properties, CategoryName and NoOfArticle, for
displaying category name in Header Template and for displaying number of
articles in Footer Template. We can also specify this as a constructor argument
instead of giving as public properties. I have defined
TemplateControl_DataBinding event to bind the data that is in resultset.
Using the Constructed Template Class in DataList
The following steps will take us through to use the
above created MyTemplate class to create header, item and footer templates
dynamically.
1. Create DataList object.
2. Create an instance of our
created dynamic template class by passing the ListItemType corresponding to the
type of the item.
3. Assign the instance to the
datalist template property like,
Listing 3 – DataList Templates
DataListObject.HeaderTemplate = new
MyTemplate(ListItemType.Header);
DataListObject.ItemTemplate = new
MyTemplate(ListItemType.Item);
DataListObject.FooterTemplate = new
MyTemplate(ListItemType.Footer);
The below code (Listing 4- Using TemplateClass) contains
code that uses the MyTemplate class to build the DataList dynamically. I have
added a PlaceHolder in the Webform which will hold the dynamically created
DataList after the execution.
Listing 4 –Using TemplateClass
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < dsArticles.Tables.Count; i++)
{
if (dsArticles.Tables[i].Rows.Count > 0)
{
DataList dlArt =
ConstructDL(dsArticles.Tables[i].Rows[0]["Category"].ToString(),
dsArticles.Tables[i].Rows.Count);
dlArt.DataSource =
dsArticles.Tables[i];
dlArt.DataBind();
phArticles.Controls.Add(dlArt);
}
}
}
public DataList ConstructDL(string CategoryName,int
Count)
{
DataList dlArt = new DataList();
MyTemplate headTemplate = new
MyTemplate(ListItemType.Header);
headTemplate.CategoryName = CategoryName;
dlArt.HeaderTemplate = headTemplate;
dlArt.Width = Unit.Percentage(100);
dlArt.ItemTemplate = new
MyTemplate(ListItemType.Item);
MyTemplate footerTemplate = new
MyTemplate(ListItemType.Footer);
footerTemplate.NoOfArticles = Count.ToString();
dlArt.FooterTemplate = footerTemplate;
return dlArt;
}
In the above code, phArticles is the PlaceHolder id.
Thus, we have created the DataList dynamically.
|