DataList的数据绑定

8.4.1  DataList的数据绑定

DataList控件中通过自定义模板来设置数据的显示样式，它支持如下模板类型：

ItemTemplate：包含一些 HTML元素和控件，将为数据源中的每一行呈现一次这些HTML元素和控件。

AlternatingItemTemplate：包含一些HTML元素和控件，将为数据源中的每两行呈现一次这些HTML元素和控件。通常，可以使用此模板来为交替行创建不同的外观，例如指定一个与在ItemTemplate属性中指定的颜色不同的背景色。

SelectedItemTemplate：包含一些元素，当用户选择DataList控件中的某一项时将呈现这些元素。通常，可以使用此模板来通过不同的背景色或字体颜色直观地区分选定的行，还可以通过显示数据源中的其他字段来展开该项。

EditItemTemplate：指定当某项处于编辑模式时的布局。此模板通常包含一些编辑控件，如TextBox控件。

HeaderTemplate和FooterTemplate：包含在列表的开始和结束处分别呈现的文本和控件。

SeparatorTemplate：包含在每项之间呈现的元素。典型的示例是一条直线(使用HR元素)。

通常根据不同的需要定义不同类型的项模板，DataList控件根据项的运行时状态自动加载相应的模板显示数据，例如当某一项被选定后将会以SelectedItemTemplate模板呈现数据，编辑功能被激活时将以EditItemTemplate模板呈现数据。

下面我们通过【例8-7】说明如何通过设置模板为DataList控件定义数据的呈现样式并完成数据绑定。

【例8-7】DataList控件的数据绑定。

(1) 在DataBinding网站中新建一个名为DataListBingding.aspx的页面，在页面上添加一个DataList控件。

(2) 编辑DataList控件，并设置项模板，进行显示字段影射。

在VS2008环境中使用DataList控件的快捷任务面板进入模板的编辑页面，如图8-27所示。

（点击查看大图）图8-27  打开DataList的模板编辑器

单击【编辑模板】按钮后进入模板编辑界面，如图8-28所示。

（点击查看大图）图8-28 模板编辑界面

在本例中只实现DataList控件的数据绑定，所以只简单地定义一个ItemTemplate即可，单击模板类型后编辑ItemTemplate模板样式如图8-29所示。

图8-29  ItemTemplate模板样式

ItemTemplate模板样式中，包含一个两行一列的HTML Table，第一行显示图片，第二行显示记录中的其他字段。回顾一下GridView控件，在设置绑定列时需要同时设置绑定列到数据字段之间的数据映射，DataList控件中的项模板显示数据源每条记录中的各个字段，也需要将模板中的显示控件影射到相应字段，才能在数据绑定后在模板项中显示正确的数据。数据影射通过绑定表达式完成，在项模板中各个显示控件的页面代码中添加如下绑定表达式：<%# Eval("XXX") %>，其中Eval方法用于读取数据绑定后当前显示项中所呈现的数据项(某条记录)的相应字段数据，Eval方法的参数"XXX"用于指定记录中要显示的字段名。我们可以这样来理解<%# Eval("XXX") %>表达式，当在后台代码中为某种数据绑定控件(如这里的DataList)设置数据源并进行数据绑定后，运行时数据源中的记录就会自动与显示项关联，有这种关联作为上下文，只要指定字段名就可以访问到该记录中的字段数据。因为Eval方法需要在数据上下文中读取数据，所以，<%# Eval("XXX") %>表达式只能用在数据绑定控件的模板定义中。

定义模板后的页面代码如下：

<div>
    <asp:DataList ID="DataList1" runat="server" Height="354px" RepeatColumns="3"
        HorizontalAlign="Justify" RepeatDirection="Horizontal">
        <ItemTemplate>
            <table style="width: 154px; height: 111px">
                <tr>
                    <td style="width: 100px">
                       <img alt="照片" src='./image/<%# Eval("photo") %>' /></td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        学号：<%# Eval("no") %><br />
                        姓名：<%# Eval("name") %><br />
                        年龄：<%# Eval("birth") %><br />
                        住址：<%# Eval("address") %></td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
 </div>

项模板第一行图片控件中的表达式<%# Eval("photo") %>表示读取数据源记录中的photo字段值作为图片名称。

(3) 设置DataList的布局属性，采用Table布局，每行显示5项，按行显示，如图8-30所示。

图8-30  设置DataList布局属性

(4) 在页面后台类中添加数据绑定代码，如下。

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack) listbind();
}
void listbind()
{
    string sqlconnstr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; ;
    DataSet ds = new DataSet();
    using (SqlConnection sqlconn = new SqlConnection(sqlconnstr))
    {
        SqlDataAdapter sqld = new SqlDataAdapter("select * from student", sqlconn);
        sqld.Fill(ds, "tabstudent");
    }
    //以数据集中名为tabstudent的DataTable作为数据源，为控件绑定数据
    DataList1.DataSource = ds.Tables["tabstudent"].DefaultView;
    DataList1.DataBind();
}

(5) 页面的运行效果如图8-31所示。

图8-31  DataListBinding.aspx页面运行效果