动态ItemTemplate的实现(译) - item,template

原文: Implementing Dynamic ItemTemplates

By: Scott Watermasysk

Published: 4/10/2002

翻译: Drason

模版控件能让用户几乎不用花费任何时间就创建出复杂的用户界面. Asp.net有很多控件都使用了模版技术(DataGrid就是一个例子). 而这些控件都工作得很好, 通常, 模版可以被保存为ascx文件以增加复用性. 很有可能, 事前你是不知道你的控件是怎么布局的, 而且你需要动态的添加一些模版以应付不同的事件.

使用模版的另一个优势,就是它们能动态的添加到你的控件里面去. 这样的话, 你可以事先设计好模版, 然后通过简单的几行代码就添加到你的控件中.

下面这篇文章就要告诉你如何如何一步步的添加一个动态的ItemTemplate和EditItemTemplate到DataGrid中. 另外, 还会告诉你怎么获取和更新用户对EditItemTemplate所做的改变. 例子将会是很简单的. 然后, 我很快就会在TripleASP上面正式发布一个改进后的TableEditor版本. 这个版本将更好的说明如何使用动态模版.

ITempalte的实现 
为了能动态的添加ItemTemplate和EditItemTemplate, 我们需要创建2个类来实现ITemplate的接口(Interface). 第一个类是GenericItem. 这个类的主要工作就是: 取数据源的列名, 创建一个文本控件(literal contral), 为这个文本控件赋值, 最后把这个文本控件加到父控件(在这里父控件就是DataGrid了). 

到目前为止还是很顺利. 在继续下面的讨论之前, 我们来看看代码和完成的步骤.

using System;

using System.Web;

using System.Data; using System.Web.UI;

using System.Web.UI.WebControls;

namespace TripleASP.ItemTemplates

{

/// <summary>

/// Summary description for GenericItem.

/// </summary>

public class GenericItem : ITemplate

{

private string column;

//private bool validate;

public GenericItem(string column)

{

this.column = column;

}

public void InstantiateIn(Control container)

{

Literal l = new Literal();

l.DataBinding += new EventHandler(this.BindData);

container.Controls.Add(l);

}

public void BindData(object sender, EventArgs e)

{

Literal l = (Literal) sender;

DataGridItem container = (DataGridItem) l.NamingContainer;

l.Text = ((DataRowView) container.DataItem)[column].ToString();

}

}

}

正如你看到的, GenericItem类实现了ITemplate的接口(interface). 因为我们是实现接口, 所以必须包括InstantiateIn这个方法. 这个方法是用来定义所有子控件和模版所属的控件对象的. 在这个方法里面, 我们创建了一个新的Literal控件来保存DataGrid的单元值. 接着, 我们添加了DataBinding事件处理函数. 这个事件处理函数实际上就是在DataGrid绑定数据的时候, 把单元值放到Literal控件的Text属性中. 最后, 把这个Literal控件加入到控件的容器集合中. 很简单吧?

动态EditItemTemplate 

动态EditItemTemplate类ValidateEditItem跟GenericItem很类似, 但是有3个地方不同.

第一个不同的地方是, 我们添加的是Textbox控件而不是Literal控件. 这样的话, 在编辑模式下, 用户可以做任何修改.

第二个不同的地方, 你会发现我们会显式地命名控件. 这会使我们能够获取更新事件中的任何数据变化.

最后一个不同, 你会看到一个跟Textbox相联系的RequiredFieldValidator控件. 这是可选的. 但是, 这的确让你知道有些事是可以这样做的.

下面就是ValidateEditItem的代码:

using System;

using System.Data;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web;

namespace TripleASP.ItemTemplates

{

/// <summary>

/// Summary description for ValidateEditItem.

/// </summary>

public class ValidateEditItem : ITemplate

{

private string column;

public ValidateEditItem(string column)

{

this.column = column;

}

public void InstantiateIn(Control container)

{

TextBox tb = new TextBox();

tb.DataBinding += new EventHandler(this.BindData);

container.Controls.Add(tb);

tb.ID = column;

RequiredFieldValidator rfv = new RequiredFieldValidator();

rfv.Text = "Please Answer";

rfv.ControlToValidate = tb.ID;

rfv.Display = ValidatorDisplay.Dynamic;

rfv.ID = "validate" + tb.ID;

container.Controls.Add(rfv); 

}

public void BindData(object sender, EventArgs e)

{

TextBox tb = (TextBox) sender;

DataGridItem container = (DataGridItem)tb.NamingContainer;

tb.Text = ((DataRowView) container.DataItem)[column].ToString();

}

}

}

动态模版的实现 

现在我们已经有两个实现了ITempalte接口的类了. 一切准备好了! 我们现在要做的就是把它们加入到我们的datagrid里面.

我们把BindData和DynamicColumns两个方法放在一起. BindData主要是创建SQL查询语句, 往datagrid添加列(动态列), 然后把数据表绑定到datagrid.

void BindData()

{

string sql = "Select * from publishers Where State Is not null";

DataGrid1.Columns.Add(DynamicColumns("pub_id",false));

DataGrid1.Columns.Add(DynamicColumns("pub_name",true));

DataGrid1.Columns.Add(DynamicColumns("city",true));

DataGrid1.Columns.Add(DynamicColumns("state",true));

DataGrid1.Columns.Add(DynamicColumns("country",true));

DataGrid1.DataKeyField = "pub_id";

DataGrid1.DataSource = GetDataTable(sql);

DataGrid1.DataBind();

}

DynamicColumns有两个参数: column(字符类型)和isEditable(布尔类型). column变量当然就是我们要加入TemplateColumn的列名. isEditable变量是用作测试的, 如果我们希望这个列是允许编辑的话.

protected TemplateColumn DynamicColumns(string column, bool isEditable)

{

TemplateColumn genericcolumn = new TemplateColumn();

genericcolumn.HeaderText = column;

genericcolumn.ItemTemplate = new GenericItem(column);

if(isEditable)

{

genericcolumn.EditItemTemplate = new ValidateEditItem(column);

}

return genericcolumn;

}

正如你所看到的, 首先我们实例化一个TemplateColumn(genericcolumn), 根据我们要添加的列的名字设置HeaderText属性(当然,你可以设置为任何东西都可以). 接着, 我们通过添加新的GenericItem的参考(reference), 把ItemTemplate添加到genericcolumn, 并把名称传入. 最后, 我们必须检查isEditable, 以便看看我们需不需要允许编辑这个列. 如果为真, 我们要往ValidateEditItem添加新的参考, 而且把列名也传过去.

DataGrid事件 

我们的编辑和取消事件是很标准的. 你有可能已经看过它们100遍了. 在我们的编辑事件里面, 我们简单地取出被选中的行的编号, 然后重新绑定数据.

protected void Edit_Click(Object sender, DataGridCommandEventArgs e)

{

DataGrid1.EditItemIndex = e.Item.ItemIndex;

BindData();

}

我们的取消事件是把当前所选行号设为-1. 这样就等于告诉datagrid, 不在是编辑模式了. 然后, 我们重新绑定数据.

protected void Cancel_Click(Object sender, DataGridCommandEventArgs