DataList 控件概述
DataList控件可以使用模板与定义样式来显示数据,并可以进行数据的选择、删除以及编辑。DataList控件的最大特点就是一定要通过模板来定义数据的显示格式。如果想要设计出美观的界面,就需要花费一番心思。正因为如此,DataList控件显示数据时更具灵活性,开发人员个人发挥的空间也比较大。DataList控件支持的模板如下。
AlternatingItemTemplate:如果已定义,则为DataList中的交替项提供内容和布局;如果未定义,则使用ItemTemplate。内容会以交替的形式呈现在页面中
EditItemTemplate:如果已定义,则为DataList中的当前编辑项提供内容和布局;如果未定义,则使用ItemTemplate。
FooterTemplate:如果已定义,则为DataList的脚注部分提供内容和布局;如果未定义,将不显示脚注部分。
HeaderTemplate:如果已定义,则为DataList的页眉节提供内容和布局;如果未定义,将不显示页眉节。
ItemTemplate:为DataList中的项提供内容和布局所要求的模板。
SelectedItemTemplate:如果已定义,则为DataList中的当前选定项提供内容和布局;如果未定义,则使用ItemTemplate。
SeparatorTemplate:如果已定义,则为DataList中各项之间的分隔符提供内容和布局;如果未定义,将不显示分隔符。
前台页面部分:要显示的内容放在itemTemplate中
<asp:DataList ID="DataList1" runat="server" OnSelectedIndexChanged="DataList1_SelectedIndexChanged" OnItemCommand="DataList1_ItemCommand" OnItemDataBound="DataList1_ItemDataBound">
<FooterTemplate>
<div class="btnPage" style="margin:10px 5px">
<asp:Button runat="server" CssClass="btn btn-2" Text="" ID="btnPre" CommandName="pre"/>//翻页按钮
<asp:Button runat="server" CssClass="btn btn-2" ID="btnNext" CommandName="next" Text="" οnmοuseοver="this.value=''" οnmοuseοut="this.value=''"/>
</div>
</FooterTemplate>
<ItemTemplate>
//显示内容
<div class="product" style="margin:0px 0px;padding:10px 0px">
<div class="image" style="margin:0px">
<a href='product.aspx?id=<%#Eval("productID")%>' target="_blank"><img src="<%#Eval("ProductURL")%>" width="140px" height="180px"/></a>
</div>
<%--<div class="">--%>
<asp:Button cssClass="buttons btn cart" runat="server" ID="btncart" CommandName="cartIndex" Text="+"/><asp:Label Text='<%#Eval("ProductID") %>' runat="server" ID="proID" Visible="false"/>
<a class="btn wishlist" href='product.aspx?id=<%#Eval("ProductID")%>'target="_blank"><span class="glyphicon glyphicon-pencil"></span></a>
<a class="btn compare" href="#"><span class="glyphicon glyphicon-transfer"></span></a>
<%--</div>--%>
<div class="caption" style="margin:0px 10px">
<div class="name"><h3 style="font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, '\5b8b\4f53', sans-serif;font-size:14px"><%#Eval("BrandName") %> <%#Eval("ProductName") %></h3></div>
<div class="price" style="font-size:18px;color:red;">¥ <%#Eval("HotPrice")%><span style="color:#ccc;font-size:16px;">¥ <%#Eval(" MarketPrice")%></span></div>
</div>
</div>
</ItemTemplate>
</asp:DataList>
后台代码数据绑定:
SqlHelper.cs
/**/
/// <summary>
/// 执行查询语句,返回DataSet
/// </summary>
/// <param name="SQLString">查询语句</param>
/// <returns>DataSet</returns>
public static DataSet Query(string SQLString)
{
using (SqlConnection connection = new SqlConnection(conn))
{
DataSet ds = new DataSet();
try
{
connection.Open();
SqlDataAdapter command = new SqlDataAdapter(SQLString, connection);
command.Fill(ds, "ds");
}
catch (System.Data.SqlClient.SqlException ex)
{
connection.Close();
throw new Exception(ex.Message);
}
return ds;
}
}
绑定数据到datalist 控件,不包括分页显示数据的方法
public void bind(){
DataList1.DataSource = SqlHelper.Query(sql);
DataList1.DataBind();
}
加分页效果
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
switch (e.CommandName)
{
case "pre":
ps.CurrentPageIndex = ps.CurrentPageIndex - 1;
Bind(ps.CurrentPageIndex);
// Response.Write("<script>alert('rrr')</script>");
break;
case "next":
ps.CurrentPageIndex = ps.CurrentPageIndex + 1;
Bind(ps.CurrentPageIndex);
break;
}
}
protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Button btncart = e.Item.FindControl("btncart") as Button; if (Session["username"] == null) { btncart.Enabled = false; } } if (e.Item.ItemType == ListItemType.Footer) { Button previous = e.Item.FindControl("btnPre") as Button; Button next = e.Item.FindControl("btnNext") as Button; if (ps.IsFirstPage) { previous.Enabled = false; } if (ps.IsLastPage) { next.Enabled = false; } } }
public void Bind(int CurrentPage) { string conn = ConfigurationManager.ConnectionStrings["B2CdataConnectionString"].ConnectionString; string sql = "select * from tb_Product where classid=2"; using (SqlConnection sqlcon = new SqlConnection(conn)) { sqlcon.Open(); using (SqlDataAdapter da = new SqlDataAdapter(sql, sqlcon)) { DataSet ds = new DataSet(); da.Fill(ds, "tb_Product"); ps.DataSource = ds.Tables["tb_Product"].DefaultView; ps.AllowPaging = true; ps.PageSize = 4; ps.CurrentPageIndex = CurrentPage; this.DataList1.DataSource = ps; this.DataList1.DataKeyField = "ProductID";//数据库主键 this.DataList1.RepeatColumns = 4;//显示数量 this.DataList1.RepeatDirection = RepeatDirection.Horizontal;//显示方式,此处是横向 this.DataList1.DataBind(); } } }