数据绑定控件之DataList
生活随笔
收集整理的這篇文章主要介紹了
数据绑定控件之DataList
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
上篇博客討論了Repeater控件的基本用法，它是最基本的數(shù)據(jù)綁定控件，只提供了數(shù)據(jù)綁定的功能，熟練運(yùn)用Repeater控件后，其它類似的數(shù)據(jù)綁定控件就很簡單了。接著我們上篇博客的內(nèi)容繼續(xù)，今天來討論下DataList的基本使用方法。
<div>?? ????<asp:DataList?ID="DataList1"?runat="server"?OnItemCommand="DataList1_ItemCommand"?OnCancelCommand="DataList1_CancelCommand"?OnUpdateCommand="DataList1_UpdateCommand"?OnEditCommand="DataList1_EditCommand"?OnDeleteCommand="DataList1_DeleteCommand">?? ????????<HeaderTemplate>?? ????????????<table?border="1px"?cellpadding="1px"?cellspacing="5px"?style="text-align:center;border-collapse:collapse;border-color:red;">?? ????????????????<tr?style="background-color:yellow;">?????? ????????????????????<th>ID</th>?? ????????????????????<th>內(nèi)容</th>?? ????????????????????<th>編輯</th>?? ????????????????</tr>?? ????????</HeaderTemplate>?? ????????<ItemTemplate>?? ????????????<tr?onmouseover="backcolor=this.style.backgroundColor;this.style.backgroundColor='#6699ff'"?onmouseout="this.style.backgroundColor=backcolor">?? ????????????????<td><%#?Eval("id")?%></td>?? ????????????????<td><%#?Eval("name")?%></td>?? ????????????????<td>?? ????????????????????<asp:LinkButton?ID="lbtDelete"?runat="server"?CommandName="Delete"?CommandArgument='<%#Eval("id")?%>'>刪除</asp:LinkButton>?? ????????????????????<asp:LinkButton?ID="lbtEdit"?runat="server"?CommandName="Edit"?CommandArgument='<%#Eval("name")?%>'>編輯</asp:LinkButton>?? ????????????????????<asp:LinkButton?ID="lbtAdd"?runat="server"?CommandName="Add">添加</asp:LinkButton>?? ????????????????</td>?? ????????????</tr>?? ????????????<!--添加新行時動態(tài)添加文本框-->?? ????????????<asp:Literal?ID="litAdd"?runat="server"></asp:Literal>???????????????? ????????</ItemTemplate>?? ?????????????? ????????<EditItemTemplate>?? ????????????<tr>?? ????????????????<td>?? ????????????????????<asp:TextBox?ID="id"?runat="server"?Text='<%#Eval("id")?%>'></asp:TextBox>?? ????????????????</td>?? ????????????????<td>?? ????????????????????<asp:TextBox?ID="name"?runat="server"?Text='<%#Eval("name")?%>'></asp:TextBox>?? ????????????????</td>?? ????????????????<td>?? ????????????????????<asp:LinkButton?ID="lbtCancel"?runat="server"?Text="取消"?CommandName="Cancel"></asp:LinkButton>?? ????????????????????<asp:LinkButton?ID="lbtUpdate"?runat="server"?Text="更新"?CommandName="Update"??CommandArgument='<%#Eval("id")?%>'></asp:LinkButton>?? ????????????????</td>?? ????????????</tr>?? ?????????????????? ????????</EditItemTemplate>?? ????????<FooterTemplate>?? ????????????</table>?? ????????</FooterTemplate>?? ????</asp:DataList>?? ?? ????<!--分頁控件-->?? ????<div?class="pageBar">?? ????????<asp:Literal?ID="lit"?runat="server"></asp:Literal>?? ????</div>?? </div>??
protected?void?Page_Load(object?sender,?EventArgs?e)?? {?? ????if?(!Page.IsPostBack)?? ????{?? ????????string?strName?=?string.Empty;??//聲明添加的內(nèi)容?? ?? ????????try?? ????????{?? ????????????//獲取需要添加的內(nèi)容?? ????????????strName?=?Request.QueryString["name"].ToString();?? ????????}?? ????????catch?? ????????{?? ?? ????????}?? ?? ????????//判斷如果要添加的內(nèi)容不為空將會進(jìn)行添加操作?? ????????if?(strName!=string.Empty)?? ????????{?? ????????????this.Insert(strName);?? ????????}?? ?? ????????//**********************************************************************?? ????????//分頁效果實(shí)現(xiàn)?? ????????PagedDataSource?pds?=?new?PagedDataSource();?//聲明分頁類?? ????????//設(shè)置分頁屬性?? ????????pds.AllowPaging?=?true;?? ????????pds.PageSize?=?3;?? ????????pds.DataSource?=?this.GetDT().DefaultView;?? ????????pds.CurrentPageIndex?=?pageIndex?-?1;?? ????????//**********************************************************************?? ?? ????????//綁定分頁數(shù)據(jù)源?? ????????this.DataList1.DataSource?=?pds;?? ????????this.DataList1.DataBind();?? ????}?? }?? ?? ///?<summary>?? ///?添加新的數(shù)據(jù)行內(nèi)容?? ///?</summary>?? ///?<param?name="strName">獲取要插入的內(nèi)容</param>?? private?void?Insert(string?strName)?{?? ????//向數(shù)據(jù)庫中插入新內(nèi)容?? ????using?(SqlConnection?con?=?this.GetSqlCon())?? ????{?? ????????con.Open();?//打開數(shù)據(jù)庫連接?? ????????//設(shè)置命令對象?? ????????SqlCommand?sqlcom?=?new?SqlCommand();?? ????????sqlcom.Connection?=?con;?? ????????sqlcom.CommandText?=?"insert?match?values(@name)";?? ????????//添加參數(shù)?? ????????sqlcom.Parameters.Add(new?SqlParameter("@name",?strName));?? ????????//執(zhí)行插入?? ????????sqlcom.ExecuteNonQuery();?? ????}?? }?? ?? ///?<summary>?? ///?獲取綁定的數(shù)據(jù)源?? ///?</summary>?? ///?<returns>DataTable，從match表中獲取的內(nèi)容</returns>?? private?DataTable?GetDT()?? {?? ????DataTable?dt?=?new?DataTable();?//聲明數(shù)據(jù)庫表?? ????//獲取數(shù)據(jù)源?? ????using?(SqlConnection?con?=?this.GetSqlCon())?? ????{?? ????????con.Open();?? ????????//聲明數(shù)據(jù)源命令?? ????????SqlCommand?sqlCom?=?new?SqlCommand();?? ????????sqlCom.CommandText?=?"select?*?from?match";?? ????????sqlCom.Connection?=?con;?? ????????SqlDataAdapter?sqlDa?=?new?SqlDataAdapter(sqlCom);?? ????????SqlCommandBuilder?sqlCb?=?new?SqlCommandBuilder(sqlDa);?? ????????sqlDa.Fill(dt);?? ????}?? ?? ????return?dt;?? }?? ?? ///?<summary>?? ///?聲明數(shù)據(jù)庫鏈接對象?? ///?</summary>?? ///?<returns>SqlConnection，返回數(shù)據(jù)庫連接對象</returns>?? private?SqlConnection?GetSqlCon()?? {?? ????SqlConnection?sqlCon?=?new?SqlConnection("server=.;database=myblog;uid=sa;pwd=1");?? ????return?sqlCon;?? }?? ?? ///?<summary>?? ///?編輯命令事件?? ///?</summary>?? ///?<param?name="source"></param>?? ///?<param?name="e"></param>?? protected?void?DataList1_EditCommand(object?source,?DataListCommandEventArgs?e)?? {?? ????this.DataList1.EditItemIndex?=?e.Item.ItemIndex;????//設(shè)置編輯的索引行?? ????//重新綁定數(shù)據(jù)源?? ????this.DataList1.DataSource?=?this.GetDT();?? ????this.DataList1.DataBind();?? }?? ?? ///?<summary>?? ///?刪除命令事件?? ///?</summary>?? ///?<param?name="source"></param>?? ///?<param?name="e"></param>?? protected?void?DataList1_DeleteCommand(object?source,?DataListCommandEventArgs?e)?? {?? ????if?(e.CommandName?==?"Delete")?? ????{?? ????????string?id?=?e.CommandArgument.ToString();???//獲取要刪除行的id號?? ????????//執(zhí)行刪除命令?? ????????using?(SqlConnection?con?=?this.GetSqlCon())?? ????????{?? ????????????con.Open();?? ?? ????????????SqlCommand?sqlcom?=?new?SqlCommand();?? ????????????sqlcom.Connection?=?con;?? ????????????sqlcom.CommandText?=?"delete?from?match?where?id=@id";?? ?? ????????????sqlcom.Parameters.Add(new?SqlParameter("@id",?id));?? ????????????sqlcom.ExecuteNonQuery();?? ????????}?? ?? ????????//重新綁定數(shù)據(jù)?? ????????this.DataList1.DataSource?=?this.GetDT();?? ????????this.DataList1.DataBind();?? ????}?? }?? ?? ///?<summary>?? ///?取消更新事件?? ///?</summary>?? ///?<param?name="source"></param>?? ///?<param?name="e"></param>?? protected?void?DataList1_CancelCommand(object?source,?DataListCommandEventArgs?e)?? {?? ????if?(e.CommandName?==?"Cancel")?? ????{?? ????????this.DataList1.EditItemIndex?=?-1;?? ????????//重新綁定數(shù)據(jù)?? ????????this.DataList1.DataSource?=?this.GetDT();?? ????????this.DataList1.DataBind();?? ????}?? }?? ?? ///?<summary>?? ///?更新按鈕事件?? ///?</summary>?? ///?<param?name="source"></param>?? ///?<param?name="e"></param>?? protected?void?DataList1_UpdateCommand(object?source,?DataListCommandEventArgs?e)?? {?? ????//判斷如果是更新命令的話，將會執(zhí)行更新命令?? ????if?(e.CommandName?==?"Update")?? ????{?? ????????int?intId?=?int.Parse(e.CommandArgument.ToString());?//獲取更新行的索引號?? ????????string?strname?=?((TextBox)e.Item.FindControl("name")).Text;????//獲取更新的內(nèi)容?? ?? ????????//更新數(shù)據(jù)庫中的值?? ????????using?(SqlConnection?sqlcon?=?this.GetSqlCon())?? ????????{?? ????????????sqlcon.Open();?? ????????????SqlCommand?sqlcom?=?new?SqlCommand();?? ????????????sqlcom.CommandText?=?"update?match?set?name=@name?where?id=@id";?? ????????????sqlcom.Connection?=?sqlcon;?? ?? ????????????SqlParameter[]?sqlParam?=?new?SqlParameter[]?{?new?SqlParameter("@name",?strname),?new?SqlParameter("@id",?intId)?};?? ????????????sqlcom.Parameters.AddRange(sqlParam);?? ?? ????????????sqlcom.ExecuteNonQuery();?? ?? ????????}?? ????????//更新完成后跳轉(zhuǎn)頁面?? ????????this.DataList1.EditItemIndex?=?-1;?? ????????//重新綁定數(shù)據(jù)?? ????????this.DataList1.DataSource?=?this.GetDT();?? ????????this.DataList1.DataBind();?? ?? ????}?? }?? ?? ///?<summary>?? ///?事件回發(fā)命令?? ///?</summary>?? ///?<param?name="source"></param>?? ///?<param?name="e"></param>?? protected?void?DataList1_ItemCommand(object?source,?DataListCommandEventArgs?e)?? {?? ????//判斷如果命令名稱為Add，將會添加新行?? ????if?(e.CommandName?==?"Add")?? ????{?? ????????Literal?lit?=?(Literal)e.Item.FindControl("litAdd");????//獲取頁面的對象?? ?? ????????//向頁面中添加新行標(biāo)簽?? ????????StringBuilder?strAdd?=?new?StringBuilder("<tr><td><input?type=\"text\"?id=\"45\"></td><td><input?type=\"text\"?id='name'?οnchange='InputKey()'></td>");?? ????????strAdd.Append("<td><a?href='Default.aspx'?id='CancelInsert'>取消</a>");?? ????????strAdd.Append("<a?id='ok'>確認(rèn)</a>");?? ????????strAdd.Append("</td></tr>");?? ?? ????????//將新行標(biāo)簽日俺家到html中?? ????????lit.Text?=?strAdd.ToString();?? ????}?? }??
<head?runat="server">?? ????<title></title>?? ????<script?src="Scripts/jquery-1.7.1.js"></script>?? ?????? ????<script?type="text/javascript"?language="javascript">?? ?? ????????$(function?()?{?? ????????????$("#ok").css("text-decoration",?"underline").css("color",?"blue");???? ????????????$("#CancelInsert").attr("href","Default.aspx");?? ????????});?? ?? ????????function?InputKey()?{?? ????????????var?vartext?=?document.getElementById("name").value;?? ????????????$("#ok").attr("href","Default.aspx?name="?+?vartext);????????? ????????}???????? ????</script>?? ?? ????<style?type="text/css">?? ????????.pageBar?{?? ????????????margin-top:50px;?? ????????}?? ????????.pageBar?a{?? ????????????margin-top:50px;?? ????????????margin-left:20px;?? ????????????border-collapse:collapse;?? ????????????border:solid?1px?black;?? ????????????background-color:#fbf9f9;?? ????????????padding:4px?4px?4px?4px;?? ????????}?? ????</style>?? </head>?? <body>?? ????<form?id="form1"?runat="server">?? ?????????? ????????<div>?? ????????????<!--分頁控件-->?? ????????????<div?class="pageBar">?? ????????????????<asp:Literal?ID="lit"?runat="server"></asp:Literal>?? ????????????</div>?? ????????</div>?? ????</form>?? </body>?? </html>??
protected?void?Page_Load(object?sender,?EventArgs?e)?? {?? ????if?(!Page.IsPostBack)?? ????{?? ????????int?pageIndex?=?1;??//聲明頁索引?? ????????try?? ????????{?? ????????????//獲取要跳轉(zhuǎn)頁的索引號?????? ????????????pageIndex?=?int.Parse(Request.QueryString["Page"].ToString());?? ????????????//如果是第零頁，將會賦值為第一頁?? ????????????if?(pageIndex<0)?? ????????????{?? ????????????????pageIndex?=?1;?? ????????????}?? ????????}?? ????????catch?? ????????{?? ????????????//默認(rèn)顯示的是第一頁?? ????????????pageIndex?=?1;?? ????????}?? ?? ????????//判斷如果要添加的內(nèi)容不為空將會進(jìn)行添加操作?? ????????if?(strName!=string.Empty)?? ????????{?? ????????????this.Insert(strName);?? ????????}?? ?? ????????//**********************************************************************?? ????????//分頁效果實(shí)現(xiàn)?? ????????PagedDataSource?pds?=?new?PagedDataSource();?//聲明分頁類?? ????????//設(shè)置分頁屬性?? ????????pds.AllowPaging?=?true;?? ????????pds.PageSize?=?3;?? ????????pds.DataSource?=?this.GetDT().DefaultView;?? ????????pds.CurrentPageIndex?=?pageIndex?-?1;?? ????????//**********************************************************************?? ?? ????????//綁定分頁數(shù)據(jù)源?? ????????this.DataList1.DataSource?=?pds;?? ????????this.DataList1.DataBind();?? ????????//添加分頁標(biāo)簽?? ????????this.lit.Text?=?this.GetPageBar(pds);?? ????}?? }?? ///?<summary>?? ///?添加并設(shè)置分頁命令?? ///?</summary>?? ///?<param?name="pds">分頁數(shù)據(jù)源</param>?? ///?<returns>包含分頁連接的a標(biāo)簽</returns>?? private?string?GetPageBar(PagedDataSource?pds)?{?? ????string?Page?=?string.Empty;?? ????int?intCurrent?=?pds.CurrentPageIndex?+?1;?? ?? ????//設(shè)置首頁鏈接地址?? ????if?(intCurrent==1)?? ????{?? ????????Page?+=?"<a?href=\"javascript:void(0)\">首頁</a>";//?轉(zhuǎn)義字符：\"為雙引號?? ????}?? ????else?? ????{?? ????????Page?+=?"<a?href=\""?+?Request.CurrentExecutionFilePath?+?"?Page=1\">首頁</a>";?? ????}?? ?? ????//設(shè)置上一頁鏈接地址?? ????if?((intCurrent-1)<1)?? ????{?? ????????Page?+=?"<a?href=\"javascript:void(0)\">上一頁</a>";?? ????}?? ????else?? ????{?? ????????Page?+=?"<a?href=\""?+?Request.CurrentExecutionFilePath?+?"?Page="?+?(intCurrent?-?1)?+?"\">上一頁</a>";?? ????}?? ?? ????//設(shè)置下一頁鏈接地址?? ????if?((intCurrent+1)>pds.PageCount)?? ????{?? ????????Page?+="<a?href=\"javascript:void(0)\">下一頁</a>";?? ????}?? ????else?? ????{?? ????????????Page?+="<a?href=\""+Request.CurrentExecutionFilePath?+"?Page="+(intCurrent+1)+"\">下一頁</a>";????? ????}?? ?? ????//設(shè)置末頁的鏈接?? ????if?(intCurrent==pds.PageCount)?? ????{?? ????????Page?+=?"<a?href=\"javascript:void(0)\">末頁</a>";?? ????}?? ????else?? ????{?? ????????Page?+=?"<a?href=\""?+?Request.CurrentExecutionFilePath?+?"?Page="?+?pds.PageCount?+?"\">末頁</a>";?? ????}?? ?? ????return?Page;????//返回也標(biāo)簽?? }??
一、綁定控件之DataList
???????該控件可以以自定義的格式顯示各種數(shù)據(jù)源的字段，其顯示數(shù)據(jù)的格式在創(chuàng)建的模板中定義，可以為項(xiàng)、交替項(xiàng)、選定項(xiàng)和編輯項(xiàng)創(chuàng)建模板。該控件也可以使用標(biāo)題、腳注和分隔符模板自定義整體外觀，還可以一行顯示多個數(shù)據(jù)行。雖然DataList控件擁有很大的靈活性，但其本身不支持?jǐn)?shù)據(jù)分頁，編程者需要通過自己編寫方法完成分頁的功能。僅用于數(shù)據(jù)的顯示，不支持編輯、插入、刪除。
???????優(yōu)點(diǎn)：自定義格式顯示數(shù)據(jù)、比較靈活。
???????缺點(diǎn)：不支持分頁，編輯插入。
?? 1、DataList簡介
????????上文說到DataList控件不僅能夠靈活的顯示數(shù)據(jù)，而且還支持編輯、插入、刪除操作。想要顯示數(shù)據(jù)基本的模板是必不可少的，相同的該控件也為開發(fā)人員提供了基本的模板使用。另外DataList不但提供了基本的ItemCommand事件，而且還封裝了刪除、取消、編輯、更新事件。通過將數(shù)據(jù)綁定到EditItemTemplate模板中能夠容易的進(jìn)入編輯狀態(tài)，具體方法將會在下文中講到。
??????? 對于基本的模板和事件的使用方法上篇文章已經(jīng)討論，在此將不會深入的討論。
二、控件使用技巧
?1、基本操作--增刪改
????? 下面的代碼示例使用Asp.net實(shí)現(xiàn)，能夠?qū)?shù)據(jù)進(jìn)行增加、刪除、修改。DataList控件封裝了基本的刪除和修改模板，但沒有繼承插入功能，示例中的插入使用的是Asp.net的Literal控件來實(shí)現(xiàn)的，具體實(shí)現(xiàn)方法如下。
????? 刪除頁面：
??? 添加頁面：
??? 編輯頁面：
????? 前臺代碼：和Repeater控件基本用法相同，不同的是新增加了編輯模板，在編輯模板中綁定了數(shù)據(jù)，在進(jìn)行編輯操作時只要跳轉(zhuǎn)到編輯模板即可。代碼中在基本模板ItemTemplate中添加了Literal控件，當(dāng)點(diǎn)擊添加按鈕時再后臺動態(tài)的添加新行，并在新行中添加數(shù)據(jù)控件。具體后臺代碼如下。
?????? 后臺代碼：添加新行的操作是在ItemCommand事件中指定的，將新行的代碼添加到Literal控件上實(shí)現(xiàn)了添加新行，并為新行指定控件。另外的基本編輯命令是在單獨(dú)的事件中編寫的，因?yàn)镈ataList為開發(fā)人員提供了基本的操作事件，如果想要進(jìn)入某一個狀態(tài)只需要將狀態(tài)的ItemIndex值。
[csharp] view plain copy
?2、分頁實(shí)現(xiàn)
????? 分頁的實(shí)現(xiàn)效果和Repeater控件分頁類似。在前臺頁面中添加Literal控件，并在后臺使用PagedataSource類將數(shù)據(jù)進(jìn)行分頁。
????? 前臺代碼：在頁面的最后添加了一個分頁的div標(biāo)記，并在div中添加了Literal控件，控件中標(biāo)簽的鏈接地址是在后臺動態(tài)指定的。
????? 后臺代碼：每次向后臺請求數(shù)據(jù)都會重新為<a>標(biāo)簽指定鏈接頁面的地址，這樣能夠使得PagedataSource能夠鏈接到想要的頁面。
具體代碼示例，請下載：DataList示例。
三、對比升華
?????? 結(jié)合前篇文章來對比下這兩個數(shù)據(jù)綁定控件，對于Repeater控件它是微軟開發(fā)的最基礎(chǔ)的綁定控件只為開發(fā)人員提供了基本的事件流和基本的模板，各個子項(xiàng)完全可以由開發(fā)人員自己編寫，而且不會生成冗余代碼，唯一美中不足的是微軟沒封裝向分頁、編輯之類的功能，想要實(shí)現(xiàn)該功能必須自己編寫了。
?????? 相較Repeater控件，DataList控件不僅在Repeater基礎(chǔ)上封裝了編輯、刪除、更新、取消之類的事件，而且還添加了Selectedtemplate模板，能夠在后臺代碼中編寫被選中行的顯示效果，而且應(yīng)用靈活，美中不足的是它也沒有封裝分頁、插入的功能，只能由開發(fā)人員自己編寫了，另外采用可視化窗口設(shè)計(jì)DataList樣式后會生成冗余的代碼，不便于閱讀。
???????總之在使用時它們兩個各有利弊，如果只想綁定和顯示數(shù)據(jù)那Repeater控件當(dāng)然是我們的首選，當(dāng)然如果有編輯、刪除之類的操作，并想提前設(shè)計(jì)綁定樣式的話不妨使用DataList。
結(jié)語
???????
總結(jié)
以上是生活随笔為你收集整理的数据绑定控件之DataList的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据绑定控件之Repeater
- 下一篇： 数据绑定控件之ListView