数据呈现控件——DataLst。
DataList控件可以使用模板和样式对数据的显示样式进行定义。该控件对于显示和维护数据行十分有用，可以根据需要将其配置为各种复杂的非表格显示样式，而且还支持数据的选择、修改和删除等功能。
一般的产品展示就可以使用该控件实现。接下来capucivar就将使用DataList控件实现产品展示的功能（现已有以数据库名为capucivar，有一表名为product并且表里已有数据）并且使用三层结构：
首先新建一个网站，然后从工具箱中拖放一个DataList控件放到页面，界面如下：
按照上面显示的步骤操作会出来如下界面：
在ItemTemplate项里可以放入自己想放的数据。现在就来在它里面显示商品信息。
数据访问层（DAL）
在该层中新建一个类（DBA.cs），该类是专门用来连接数据库：
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using System.Data.OleDb;
namespace DAL
{
public class DBA
{
OleDbConnection conn = null;
public void openconn()//打开数据库连接的方法
{
if (conn == null)
{
conn = new OleDbConnection();
conn.ConnectionString =” provider=sqloledb.1;data source=.;initial catalog=capucivar;user id=sa;pwd=”;//连接数据库的字符串
}
if (conn.State == ConnectionState.Closed)
{
conn.Open();//如果当前状态是关闭的话，就将它打开
}
}
public void closeconn()//关闭数据库连接的方法
{
if (conn.State == ConnectionState.Open)
{
conn.Close();//如果当前的状态是打开的话，就关闭
}
}
public DataSet querySql(string sql)//执行查询数据的方法
{
openconn();//打开连接
DataSet ds = new DataSet();
OleDbDataAdapter da = new OleDbDataAdapter(sql, conn);//实例化适配器对象用来填充dataset
da.Fill(ds);//填充数据
closeconn();//关闭连接
return ds;//返回结果集
}
public int update(string sql)//执行更新数据的方法
{
openconn();//打开连接
OleDbCommand cmd = new OleDbCommand();
cmd.Connection = conn;//设置命令的连接
cmd.CommandText = sql;//设置命令的sql文本
int x = cmd.ExecuteNonQuery();//执行sql
closeconn();//关闭连接
return x;//返回执行结果
}
}
}
业务逻辑层（BLL）Sql.cs：
using System.Web;
using System.Web.SessionState;
using System.Collections;
namespace BLL
{
public class Sql
{
public DataSet selAll()//查询所有商品的方法
{
return new DAL.DBA().querySql("select * from product");//返回查询的结果集
}
}
}
最后就要将数据在页面中显示了：
在页面中放制作一个四行两列的表格，将前三行的第一列合并放商品的图片，第二列第一行是商品名称，第二列第二行放商品的价格，第二列第三行则是商品的信息，最后一行是两个按钮：购买和收藏。表格做好之后，将它拖放到DataList里。然后我们就需要在后台(即cs文件)得到数据库中的所有数据，具体代码如下：
protected void Page_Load(object sender, EventArgs e)//页面一载入就触发
{
if (!IsPostBack)//判断是否回发
{
bind();//调用自己写的数据绑定的方法
}
}
public void bind()//将数据绑定到控件上的方法
{
DataSet ds = new BLL.Sql().selAll();//得到数据的结果集
this.DataList1.DataSource = ds;//设置控件要绑定的数据源
this.DataList1.DataBind();//将数据绑定到控件上
}
后台得到数据之后，我们就需要在源里将数据分别绑定到控件：
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" Height="469px" Width="633px" >
<ItemTemplate>//每一项的样式
<table border="1">
<tr>
<td style="width: 100px" rowspan="3"><img src='images/<%# ("pimg") %>' alt='<%# ("pname") %>' width="100" height="100" />
</td>
<td style="width: 183px; height: 21px">
产品名称：<%# ("pname") %></td>
</tr>
<tr>
<td style="width: 183px; height: 21px">
产品价格：<%# ("pprice") %></td>
</tr>
<tr>
<td style="width: 183px">
产品简介：<%# ("pinfo") %></td>
</tr>
<tr>
<td align="center" colspan="2" rowspan="1">
<asp:Button ID="buy" runat="server" Text="购买" />
<asp:Button ID="shoucang" runat="server" Text="收藏" /></td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
数据绑定好了之后，商品就可以展示出来了。界面如下：
接下来我们要做的就是点击按钮触发事件，比如点击购买按钮，就显示“购买了几号商品”，而点击收藏按钮则显示“收藏了几号商品”。但是，界面上的商品表格都是有一个表格循环出来的，如何判断你点击的是“购买”，还是“收藏”，即使判断出了点击的是“购买”或是“收藏”，又如何判断点击的是哪个“购买”按钮或是“收藏”按钮呢。所以就需要在按钮里添加属性：先来判断点击的是“购买”还是“收藏”，我们在购买按钮的属性里添加CommandName="buy"，而在收藏按钮里添加CommandName="shoucang"，在后台得到你点击按钮的CommandName属性值就可以区分出点击的是什么按钮。然后再给两个按钮添加另外一个属性以区分点击的是哪一个按钮：CommandArgument='<%# ("pid") %>'，因为id是唯一的，是不可能重复的，将商品的id作为参数赋给该属性。这样就可以在确定了点击的是什么按钮之后再度判断点击的是该类按钮的哪一个。下一步就是要触发事件：ItemCommand事件。
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{// e.CommandName:得到点击按钮的命令名字
// e.CommandArgument:得到点击按钮的参数值
if (e.CommandName == "buy")//如果点击的是“购买”
{
Response.Write("您购买了" + e.CommandArgument + "号商品");
}
else//否则的话，点击的就是“收藏”
{
Response.Write("您收藏了"+e.CommandArgument+"号商品");
}
}
最终的执行结果如下所示：
点击“西瓜”产品下的购买按钮，上面就出现了“您购买了4号商品”。这就是我们想要的结果。这只是将产品展示了出来，下一次capucivar将在这个产品展示的基础上实现购物车的功能。
