DataList 用法详解
2016-12-16 15:48 若藜520 阅读(3085) 评论(0) 编辑 收藏 举报
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataList.aspx.cs" Inherits="FileUpload自动上传文件.DataList" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .style1{ width:784px; } .style2 { width:126px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:DataList ID ="dataList1" runat ="server" RepeatColumns ="1" GridLines ="Both" RepeatLayout ="Table" RepeatDirection ="Horizontal" onitemcommand="dataList1_ItemCommand" oneditcommand="dataList1_EditCommand" oncancelcommand="dataList1_CancelCommand" ondeletecommand="dataList1_DeleteCommand" onselectedindexchanged="dataList1_SelectedIndexChanged" onupdatecommand="dataList1_UpdateCommand" DataKeyField ="Id" > <HeaderTemplate ><%--页眉模版，和Repeater稍微不同，一般每个模版如果用到了table都应该在当前模版闭合，即当前模版用<table></table>包裹，而不是把<table>放在HeaderTemplate</table>放在FooterTemplate闭合，--%> <table><%--因为如果按照后者做会使得RepeatColumns不生效，RepeatColumns意思的每行显示的项个数，即显示多少个ItemTemplate，一般只会显示一项因为这样每列的标题和每列的内容容易对齐，如果不对齐需要用样式设置每列的宽度使其对齐--%> <tr class="style1"> <th class="style2">标题1</th> <th class="style2">标题2</th> <th class="style2">标题3</th> <th class="style2">标题4</th> <th class="style2">时间</th> </tr> </table> </HeaderTemplate> <ItemTemplate> <table > <tr class="style1"> <td class="style2"><%#DataBinder.Eval(Container.DataItem,"title1")%></td> <td class="style2"><%#DataBinder.Eval(Container.DataItem, "title2")%></td> <td class="style2"><%#DataBinder.Eval(Container.DataItem, "title3")%></td> <td class="style2"><%#DataBinder.Eval(Container.DataItem, "title4")%></td> <td class="style2"><%#DateTime.Now.ToString()%></td> <td class="style2" id ="td"> <ul> <li><asp:LinkButton id ="LinkButton2" runat ="server" CommandName ="edit" Text ="edit" ></asp:LinkButton></li> <li><asp:LinkButton id ="LinkButton1" runat ="server" CommandName ="select" Text ="select" ></asp:LinkButton></li> <li><asp:LinkButton id ="LinkButton3" runat ="server" CommandName ="delete" Text ="删除" ></asp:LinkButton></li> </ul> </td> </tr> </table> </ItemTemplate> <SelectedItemTemplate ><%--SelectedItemTemplate一般选中后需要呈现不同的控件才需要使用这个模版，如果只是样式不同只需要设置SelectedItemStyle--%> <table > <tr class="style1"> <td class="style2" style="color:Red;"><asp:TextBox ID ="txtTitle1" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title1")%>'></asp:TextBox></td> <td class="style2"><asp:TextBox ID ="txtTitle2" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title2")%>'></asp:TextBox></td> <td class="style2"><asp:TextBox ID ="txtTitle3" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title3")%>'></asp:TextBox></td> <td class="style2"><asp:TextBox ID ="txtTitle4" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title4")%>'></asp:TextBox></td> <td class="style2"><%#DateTime.Now.ToString()%></td> <td class="style2" id ="td"> <ul> <li><asp:LinkButton id ="Linkcancel" runat ="server" CommandName ="cancelselect" Text ="取消选中" ></asp:LinkButton></li> </ul> </td> </tr> </table> </SelectedItemTemplate> <EditItemTemplate ><%--EditItemTemplate一般用于编辑时程序文本框给用户输入--%> <table > <tr class="style1"> <td class="style2" style="color:Red;"><asp:TextBox ID ="txtTitle1" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title1")%>'></asp:TextBox></td> <td class="style2"><asp:TextBox ID ="txtTitle2" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title2")%>'></asp:TextBox></td> <td class="style2"><asp:TextBox ID ="txtTitle3" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title3")%>'></asp:TextBox></td> <td class="style2"><asp:TextBox ID ="txtTitle4" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title4")%>'></asp:TextBox></td> <td class="style2"><%#DateTime.Now.ToString()%></td> <td class="style2" id ="td"> <ul> <li><asp:LinkButton id ="Linkupdate" runat ="server" CommandName ="update" Text ="更新" ></asp:LinkButton></li> <li><asp:LinkButton id ="Linkcancel" runat ="server" CommandName ="cancel" Text ="取消" ></asp:LinkButton></li> </ul> </td> </tr> </table> </EditItemTemplate> <FooterStyle BackColor="#990000" Font-Bold="true" ForeColor="White" /> <AlternatingItemStyle BackColor="White" /> <ItemStyle BackColor="#FFFBD6" ForeColor="#333333" /> <SeparatorStyle BorderStyle="Dashed" /> <SelectedItemStyle BackColor="#FFCC66" Font-Bold="true" ForeColor="Navy" /> <FooterTemplate ></FooterTemplate> </asp:DataList> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; namespace FileUpload自动上传文件 { public partial class DataList : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindRptData(); } } private void BindRptData() { DataTable dt = new DataTable(); dt.Columns.Add("Id"); dt.Columns.Add("title1"); dt.Columns.Add("title2"); dt.Columns.Add("title3"); dt.Columns.Add("title4"); for (int i = 1; i < 5; i++) { DataRow row = dt.NewRow(); row["id"] = i; row["title1"] = "title1" + i; row["title2"] = "title2" + i; row["title3"] = "title3" + i; row["title4"] = "title4" + i; dt.Rows.Add(row); } dataList1.DataSource = dt; dataList1.DataBind(); } protected void dataList1_ItemCommand(object source, DataListCommandEventArgs e) { //所有的操作都可以放在这个方法进行，比如编辑，取消，更新，删除都可以放到此处进行，也可以用单独的方法，如dataList1_EditCommand switch (e.CommandName.ToLower()) { case "select": //选中控件时如果使用了SelectedItemTemplate需要重新绑定数据，绑定数据可以在此处进行，也可以在dataList1_SelectedIndexChanged进行，若在此处进行需要设置dataList1.SelectedIndex = e.Item.ItemIndex;，因为此时dataList1.SelectedIndex为-1 //dataList1.SelectedIndex = e.Item.ItemIndex; //BindRptData(); break; //取消操作要根据取消的操作类型做不同动作，如取消选中应该把SelectedIndex设置为-1，取消编辑，应该把EditItemIndex设置为-1，并且设置后都要重新绑定数据 case "cancelselect": dataList1.SelectedIndex = -1; BindRptData(); break; } } protected void dataList1_EditCommand(object source, DataListCommandEventArgs e) { //datalist编辑需要设置编辑索引，然后重新绑定数据，只要用到EditItemTemplate， SelectedItemTemplate这两个模版点击对应的操作时都要重新绑定数据 dataList1.EditItemIndex = e.Item.ItemIndex; BindRptData(); } protected void dataList1_CancelCommand(object source, DataListCommandEventArgs e) { //这里只对应CommandName 为cancel的动作，每个方法都对应着特定的CommandName，如dataList1_EditCommand对应的CommandName为edit， //如果有多种取消动作则需要取不同的CommandName放到dataList1_ItemCommand方法去做 dataList1.EditItemIndex = -1; BindRptData(); } protected void dataList1_SelectedIndexChanged(object sender, EventArgs e) { BindRptData(); } protected void dataList1_UpdateCommand(object source, DataListCommandEventArgs e) { TextBox txtTitle1 = e.Item.FindControl("txtTitle1") as TextBox; TextBox txtTitle2 = e.Item.FindControl("txtTitle2") as TextBox; TextBox txtTitle3 = e.Item.FindControl("txtTitle3") as TextBox; TextBox txtTitle4 = e.Item.FindControl("txtTitle4") as TextBox; /*** 更新到数据库代码 * * * * ***/ //更新后取消编辑状态，重新绑定数据显示到界面 dataList1.EditItemIndex = -1; BindRptData(); } protected void dataList1_DeleteCommand(object source, DataListCommandEventArgs e) { //DataKeys 存放的是每行记录的主键，需要设置DataKeyField字段 string id = dataList1.DataKeys[e.Item.ItemIndex].ToString(); //删除当前记录，重新绑定数据 //SqlCommand cmd = new SqlCommand("Delete From Union_User Where ID=" + id, conn); //cmd.ExecuteNonQuery(); BindRptData(); } } }
相关参考资料：
http://halesir.blog.163.com/blog/static/204612069201223174854257/
http://halesir.blog.163.com/blog/static/20461206920122317514384/
http://halesir.blog.163.com/blog/static/20461206920123865357191/
http://blog.csdn.net/ranlianjie/article/details/1618073
