显示被选择记录的详细信息可以通过SelectItemTemplate模板来完成,使用该模板来显示信息时,需要一个控件激发DataList控件的ItemCommand事件
【步骤1】新建一个网站,默认主页为Default.aspx。在default.aspx页中添加一个DataList控件。打开DataList控件的项模板编辑模式,在ItemTemplate模板中添加一个LinkButton控件,用于显示用户选择的数据项;在SelectItemTplate模板中添加一个Linkbutton控件和4个Label控件,分别用于取消对该数据项的选择和该数据项详细信息的显示,设计图如下:
【步骤2】
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind();//数据绑定
}
}
【步骤3】//进行数据绑定的方法
public void Bind()
{
//实例化SqlConnection对象
SqlConnection sqlCon = new SqlConnection();
//实例化SqlConnection对象连接数据库的字符串
sqlCon.ConnectionString = "server=你的服务器r;uid=sa;pwd=;database=db_Student";
//定义SQL语句
string SqlStr = "select * from tb_StuInfo";
//实例化SqlDataAdapter对象
SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
//实例化数据集DataSet
DataSet ds = new DataSet();
da.Fill(ds, "tb_StuInfo");
this.DataList1.DataSource = ds;
this.DataList1.DataKeyField = "stuID";
this.DataList1.DataBind();
}
【步骤4】用户单击模板中的按钮时,会引发DataList控件中的ItemCommand事件,在该事件的程序代码中根据不同按钮的CommandName属性设置DataList控件的SelectIndex属性的值,决定显示详细信息或者取消显示,最后重新绑定到数据源中。
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "select")
{
//设置选中行的索引为当前选择行的索引
DataList1.SelectedIndex = e.Item.ItemIndex;
//数据绑定
Bind();
}
if (e.CommandName == "back")
{
//设置选中行的索引为-1,取消该数据项的选择
DataList1.SelectedIndex = -1;
//数据绑定
Bind();
}
}
【步骤5】调试结果如下
点击名字显示详细信息前
点击名字显示详细信息后
【补充Default.aspx代码】
<body>
<form id="form1" runat="server">
<div>
<table style="width: 255px; height: 198px">
<tr>
<td>
<asp:DataList ID="DataList1" runat="server" OnItemCommand="DataList1_ItemCommand">
<SelectedItemStyle BackColor="Teal" ForeColor="White" />
<ItemTemplate>
<table>
<tr>
<td style="width: 100px; height: 21px">
学生姓名:</td>
<td style="width: 100px; height: 21px">
<asp:LinkButton ID="lnkbtnName" runat="server" CommandName="select" Text='<%# DataBinder.Eval(Container.DataItem,"stuName") %>'></asp:LinkButton></td>
</tr>
</table>
</ItemTemplate>
<SelectedItemTemplate>
<table>
<tr>
<td style="width: 77px">
编号:</td>
<td style="width: 100px">
<asp:Label ID="lblID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"stuID") %>'></asp:Label>
<asp:LinkButton ID="lnkbtnBack" runat="server" CommandName="back">返回</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 77px">
姓名:</td>
<td style="width: 100px">
<asp:Label ID="lblName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"stuName") %>'></asp:Label></td>
</tr>
<tr>
<td style="width: 77px">
性别:</td>
<td style="width: 100px">
<asp:Label ID="lblSex" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"stuSex") %>'></asp:Label></td>
</tr>
<tr>
<td style="width: 77px">
爱好:</td>
<td style="width: 100px">
<asp:Label ID="lblHobby" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"stuHobby") %>'></asp:Label></td>
</tr>
</table>
</SelectedItemTemplate>
</asp:DataList></td>
</tr>
</table>
</div>
</form>
</body>
【步骤1】新建一个网站,默认主页为Default.aspx。在default.aspx页中添加一个DataList控件。打开DataList控件的项模板编辑模式,在ItemTemplate模板中添加一个LinkButton控件,用于显示用户选择的数据项;在SelectItemTplate模板中添加一个Linkbutton控件和4个Label控件,分别用于取消对该数据项的选择和该数据项详细信息的显示,设计图如下:
【步骤2】
{
if (!IsPostBack)
{
Bind();//数据绑定
}
}
【步骤3】//进行数据绑定的方法
public void Bind()
{
//实例化SqlConnection对象
SqlConnection sqlCon = new SqlConnection();
//实例化SqlConnection对象连接数据库的字符串
sqlCon.ConnectionString = "server=你的服务器r;uid=sa;pwd=;database=db_Student";
//定义SQL语句
string SqlStr = "select * from tb_StuInfo";
//实例化SqlDataAdapter对象
SqlDataAdapter da = new SqlDataAdapter(SqlStr, sqlCon);
//实例化数据集DataSet
DataSet ds = new DataSet();
da.Fill(ds, "tb_StuInfo");
this.DataList1.DataSource = ds;
this.DataList1.DataKeyField = "stuID";
this.DataList1.DataBind();
}
【步骤4】用户单击模板中的按钮时,会引发DataList控件中的ItemCommand事件,在该事件的程序代码中根据不同按钮的CommandName属性设置DataList控件的SelectIndex属性的值,决定显示详细信息或者取消显示,最后重新绑定到数据源中。
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "select")
{
//设置选中行的索引为当前选择行的索引
DataList1.SelectedIndex = e.Item.ItemIndex;
//数据绑定
Bind();
}
if (e.CommandName == "back")
{
//设置选中行的索引为-1,取消该数据项的选择
DataList1.SelectedIndex = -1;
//数据绑定
Bind();
}
}
【步骤5】调试结果如下
点击名字显示详细信息前
【补充Default.aspx代码】
<body>
<form id="form1" runat="server">
<div>
<table style="width: 255px; height: 198px">
<tr>
<td>
<asp:DataList ID="DataList1" runat="server" OnItemCommand="DataList1_ItemCommand">
<SelectedItemStyle BackColor="Teal" ForeColor="White" />
<ItemTemplate>
<table>
<tr>
<td style="width: 100px; height: 21px">
学生姓名:</td>
<td style="width: 100px; height: 21px">
<asp:LinkButton ID="lnkbtnName" runat="server" CommandName="select" Text='<%# DataBinder.Eval(Container.DataItem,"stuName") %>'></asp:LinkButton></td>
</tr>
</table>
</ItemTemplate>
<SelectedItemTemplate>
<table>
<tr>
<td style="width: 77px">
编号:</td>
<td style="width: 100px">
<asp:Label ID="lblID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"stuID") %>'></asp:Label>
<asp:LinkButton ID="lnkbtnBack" runat="server" CommandName="back">返回</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 77px">
姓名:</td>
<td style="width: 100px">
<asp:Label ID="lblName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"stuName") %>'></asp:Label></td>
</tr>
<tr>
<td style="width: 77px">
性别:</td>
<td style="width: 100px">
<asp:Label ID="lblSex" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"stuSex") %>'></asp:Label></td>
</tr>
<tr>
<td style="width: 77px">
爱好:</td>
<td style="width: 100px">
<asp:Label ID="lblHobby" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"stuHobby") %>'></asp:Label></td>
</tr>
</table>
</SelectedItemTemplate>
</asp:DataList></td>
</tr>
</table>
</div>
</form>
</body>