You are on page 1of 14

Phn trang DataList, GridView, Repeater vi CollectionPager ASP.

Net C#
Tm tt: C 1 iu m cc lp trnh vin rt hay gp phi khi lp trnh vi ASP.Net, l phn trang khi s dng DataList v Repeater ( cn GridView th VS 2005 h tr sn) Trong bi vit ny ti gii thiu vi cc bn 1 class library c vit sn s l cc vn ny mt cch ht sc n gin, kh nng ty bin ca n cng l kh hay, chnh l CollectionPager.dll
Gi cho bn b|

Gi bi: Scorpion -- Thi gian: 1/22/2011 6:10:48 PM

C 1 iu m cc lp trnh vin rt hay gp phi khi lp trnh vi ASP.Net, l phn trang khi s dng DataList

Repeater ( cn GridView th VS 2005 h tr sn) Trong bi vit ny ti gii thiu vi cc bn 1 class library

vit sn s l cc vn ny mt cch ht sc n gin, kh nng ty bin ca n cng l kh hay, chnh CollectionPager.dll Trc ht bn phi download file dll trn y: Download Cch s dng ht sc n gin: 1) To 1 website mi trong VS. 2) Kch chut phi vo tn Website chn Add References, chn n file dll m bn va gii nn ra, ri OK. Ti trang code .aspx khai bo s dng CollectionPager <%@ Register TagPrefix="cc1" Namespace="SiteUtils" Assembly="CollectionPager" %> Tip theo, ko vo 1 DataList, t tn l dtlMessages <asp:DataList ID="dtlMessages" runat="server"></asp:DataList> Gi 1 control CollectionPager (ci ny bn c th t mt v tr bt k trong trang) <cc1:CollectionPager ID="CollectionPager1" runat="server" BackText=" Trc" FirstText="-u"LabelText="Trang:" LastText="Cui" NextText="Sau " ResultsFormat="Kt qu t {0}-{1} (ca {2}) bi vit" ShowFirstLast="True" SliderSize="5" PagingMode="PostBack"></cc1:CollectionPager> Bn c th ty bin cc Label theo mun ca bn, nh y ti customize v ting Vit. Nh vy l bn xong bc khai bo, v a cc control cn s dng vo trong trang web ca mnh.

Ti trang codebehind, cc bn ly ra mt DataSet cha d liu cn phn trang, t tn l ds, sau vit on c sau: CollectionPager1.MaxPages = 10000;

CollectionPager1.PageSize = 10; // s items hin th trn mt trang CollectionPager1.DataSource = ds.Tables[0].DefaultView; CollectionPager1.BindToControl = dtlMessages; dtlMessages.DataSource = CollectionPager1.DataSourcePaged; dtlMessages.DataBind(); Rt n gin phi khng cc bn, chc cc bn thnh cng! Chuong 12. S dng Repeater v DataList

C hai iu khin ny u cho php hin th tp hp cc mc d liu ti mt thi im, ni cch khc l c th hin th tt c cc dng trong bng d liu.

I. s dng iu khin Repeater


1. Hin th d liu vi Repeater hin th d liu vi Repeater bn phi to mt ItemTemplate V d: trang Repeater.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFil e="Repeater.aspx.cs" Inherits="_Default"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Repeater</title> </head> <body> <form id="form1" runat="server"> <div id="navcontain"> <asp:Repeater DataSourceID="SqlDataSource1" ID="Repeater1" runat ="server"> <ItemTemplate> <div class="navpage"> <h3><%#Eval("sTitle") %></h3> Tm tt<br /> <%#Eval("sSummary")%><br /><br /> Ni dung<br /> <%#Eval("sContent") %> </div> </ItemTemplate> </asp:Repeater> <asp:SqlDataSource ID="SqlDataSource1"ConnectionString="<% $ConnectionStrings:hcubiuData %>" SelectCommand="select sTitle,sSummary,sContent from tblIntrodure" runat="server"></asp:SqlDataSource> </div> </form>

</body> </html> Bn a iu khin Repeater vo Form v t thuc tnh DataSourceID=SqlDataSource1 v thm vo mt ItemTemplate trong ny bn c th iu chnh cch hin th d liu theo mun ca bn vi cc th ca Asp.Net hoc HTML. Kt xut ca on Code trn s nh sau:

2. S dng Template vi iu khin Repeater iu khin Repeater h tr 5 kiu ca Templates ItemTemplate: nh dng mi item t ngun d liu AlternatingItemTemplate: nh dng tt c cc item d liu khc t ngun d liu SeparatorTemplate: nh dng gia hai item t ngun c s d liu HeaderTemplate: nh dng header cho tt c cc item FooterTemplate: nh dn Footer cho tt c cc item. V d: trang RepeaterDP.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFil e="RepeaterDP.aspx.cs"Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Repeater</title> <style type="text/css"> html{background-color:silver;} .content{width:600px;border:solid 1px black;backgroundcolor:white;} .intro{border-collapse:collapse;} .intro th,.intro td{padding:10px;border-bottom:1px solid black;} .alternating{background-color:#eeeeee;} </style> </head> <body> <form id="form1" runat="server"> <div id="navcontain"> <asp:Repeater DataSourceID="SqlDataSource1" ID="Repeater1" runat ="server"> <HeaderTemplate> <table class="intro"> <tr> <th>Tiu </th> <td>Tm tt</td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%#Eval("sTitle") %></td> <td><%#Eval("sSummary")%></td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr class="alternating"> <td><%#Eval("sTitle") %></td> <td><%#Eval("sSummary") %></td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> <asp:SqlDataSource ID="SqlDataSource1"ConnectionString="<% $ConnectionStrings:hcubiuData %>" SelectCommand="select sTitle,sSummary,sContent from tblIntrodure" runat="server"></asp:SqlDataSource>

</div> </form> </body> </html>

Kt xut ca chng trnh:

3. iu khin Repeater vi cc s kin iu khin Repeater h tr cc s kin sau: DataBinding: xy ra khi Repeater c rng buc n d liu ItemCommand: xy ra khi bn trong Repeater cha ng iu khin Command v iu khin ny a ra s kin. ItemCreate: xy ra khi mi RepeaterItem c to ItemDataBound: xy ra khi mi item ca Repeater c rng buc V d trang RepeaterEvent.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFil e="RepeaterEvent.aspx.cs"Inherits="_Default" %> <script runat="server"> void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) { Response.Write("<li>D liu ang c to</li>"); } void repeater1_DataBinding(object sender, EventArgs e) { Response.Write("Rng buc d liu cho Repeater"); } void Repeater1_ItemCommand(object sender, RepeaterCommandEventArgs e) { switch (e.CommandName) { case "insert": Response.Write(e.CommandArgument.ToString() + ": Bn chn xo d liu");

break; case "update": Response.Write(e.CommandArgument.ToString() + ": Bn chn cp nht d liu"); break; case "delete": Response.Write(e.CommandArgument.ToString() + ": Bn chn xo d liu"); break; } } </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Repeater</title> <style type="text/css"> html{background-color:silver;} .content{width:600px;border:solid 1px black;backgroundcolor:white;} .intro{border-collapse:collapse;} .intro th,.intro td{padding:10px;border-bottom:1px solid black;} .alternating{background-color:#eeeeee;} </style> </head> <body> <form id="form1" runat="server"> <div id="navcontain"> <asp:Repeater OnItemDataBound="Repeater1_ItemDataBound"OnDataBi nding="repeater1_DataBinding" OnItemCommand="Repeater1_ItemCommand"Data SourceID="SqlDataSource1" ID="Repeater1" runat="server"> <HeaderTemplate> <table class="intro"> <tr> <th>Tiu </th> <td>Tm tt</td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td><%#Eval("sTitle") %></td> <td><%#Eval("sSummary")%></td> </tr> <tr> <td colspan="2">

<asp:LinkButton ID="lbninsert" CommandName="ins ert"CommandArgument="insert" runat="server">Insert</asp:LinkButton> | <asp:LinkButton ID="lbnupdate" CommandName="upd ate"CommandArgument="update" runat="server">Update</asp:LinkButton> | <asp:LinkButton ID="lbndelete" CommandName="del ete"CommandArgument="delete" runat="server">Delete</asp:LinkButton> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr class="alternating"> <td><%#Eval("sTitle") %></td> <td><%#Eval("sSummary") %></td> </tr> <tr> <td colspan="2"> <asp:LinkButton ID="lbninsert" CommandName="ins ert"CommandArgument="insert" runat="server">Insert</asp:LinkButton> | <asp:LinkButton ID="lbnupdate" CommandName="upd ate"CommandArgument="update" runat="server">Update</asp:LinkButton> | <asp:LinkButton ID="lbndelete" CommandName="del ete"CommandArgument="delete" runat="server">Delete</asp:LinkButton> </td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> <asp:SqlDataSource ID="SqlDataSource1"ConnectionString="<% $ConnectionStrings:hcubiuData %>" SelectCommand="select sTitle,sSummary,sContent from tblIntrodure" runat="server"></asp:SqlDataSource> </div> </form> </body> </html> V d trn bn a vo 3 s kin cho iu khin Repeater, tng ng vi n l 3 s kin c kch hot: s kin Repeater1_ItemDataBound c a ra lm v n c thc hin mi khi d liu hay mt item c a vo Repeater vi v d trn n s in ra d liu ang c to x(s hng trong bng d liu) ln. repeater1_DataBinding thc hin cng vic khi d liu c in vo Repeater. Repeater1_ItemCommand: ph thuc vo tn CommandName a ra cng vic thch hp(nu cha r CommandName bn xem li phn Cc iu khin c bn ca ASP.NET)

II. S dng iu khin DataList


1. Hin th d liu vi DataList V d: trang DataList.aspx <%@ Page Language="C#" AutoEventWireup="true" e="DataList.aspx.cs" Inherits="_Default"%>

CodeFil

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Repeater</title> </head> <body> <form id="form1" runat="server"> <div id="navcontain"> <asp:DataList ID="DataList1" DataSourceID="SqlDataSource1" runat ="server"> <ItemTemplate> <h3><%#Eval("sTitle") %></h3> Tm tt: <%#Eval("sSummary") %> </ItemTemplate> </asp:DataList> <asp:SqlDataSource ID="SqlDataSource1"ConnectionString="<% $ConnectionStrings:hcubiuData %>" SelectCommand="select sTitle,sSummary,sContent from tblIntrodure" runat="server"></asp:SqlDataSource> </div> </form> </body> </html>

2. Hin th d liu trong nhiu ct

Bn c th hin th d liu trong iu khin DataList trong nhiu ct ging nh mi item nm trong mt Cells vi 2 thuc tnh ca Repeater l: RepeaterColumns: s ct hin th RepeateDirection: hng hin th cc . C th gi tr l Horizontal hoc Verical V d sau y s hin th d liu trong DataList vi 3 ct V d trang DataListMutilColumn.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFil e="DataListMutilColumn.aspx.cs"Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Repeater</title> </head> <body> <form id="form1" runat="server"> <div id="navcontain"> <asp:DataList ID="DataList1" GridLines="Both" RepeatColumns="3" DataSourceID="SqlDataSource1" runat="server"> <ItemTemplate> <h3><%#Eval("sTitle") %></h3> Tm tt: <%#Eval("sSummary") %> </ItemTemplate> </asp:DataList> <asp:SqlDataSource ID="SqlDataSource1"ConnectionString="<% $ConnectionStrings:hcubiuData %>" SelectCommand="select sTitle,sSummary,sContent from tblIntrodure" runat="server"></asp:SqlDataSource> </div> </form> </body> </html> y bn ch cn thm vo hai thuc tnh RepeaterColumns=3 v GridLines=Both kt xut ca chng trnh sau:

3. S dng Template vi iu khin DataList DataList h tr tt c cc templates ging vi Repeater v n c thm vo hai templates: EditItemTemplate: hin th khi dng c chn chnh sa SelectedItemTemplate: c hin th khi 1 dng c la chn 4. Chn d liu vi iu khin DataList Bn c th s dng DataList nh mt menu bng vic thm vo thuc tnh SelectedValue
V d: trang DataListselect.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFil e="DataListselect.aspx.cs"Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Repeater</title> </head> <body> <form id="form1" runat="server"> <div id="navcontain"> <asp:DataList ID="DataList1" DataKeyField="pkIntrodureID"DataSo urceID="SqlDataSource1" runat="server"> <ItemTemplate>

<asp:LinkButton ID="lbnselect" CommandName="Select" run at="server"Text='<%#Eval("sTitle") %>' /> </ItemTemplate> </asp:DataList> <asp:DataList ID="datalist2" runat="server" DataSourceID="SqlDa taSource2"> <ItemTemplate> <h3><%#Eval("sTitle") %></h3> Tm tt: <%#Eval("sSummary") %><br /><br /> Ni dung: <%#Eval("sContent") %> </ItemTemplate> </asp:DataList> <asp:SqlDataSource ID="SqlDataSource1"ConnectionString="<% $ConnectionStrings:hcubiuData %>" SelectCommand="select pkIntrodureID,sTitle,sSummary,sContent from tblIntrodure"runat="server"></asp:SqlDataSource> <asp:SqlDataSource ID="SqlDataSource2"ConnectionString="<% $ConnectionStrings:hcubiuData %>" SelectCommand="select pkIntrodureID,sTitle,sSummary,sContent from tblIntrodure where pkIntrodureID=@pkIntrodureID" runat="server"> <SelectParameters> <asp:ControlParameter Name="pkIntrodureID" ControlID="D ataList1"PropertyName="SelectedValue" /> </SelectParameters> </asp:SqlDataSource> </div> </form> </body> </html> Trong v d trn Datalist1 dng lm menu trong ItemTemplate chng ta a vo mt LinkButton v cung cp cho n thuc tnh CommandName=Select. Ta tip tc a thm vo mt SqlDataSource2 vi vic a vo mt tham s nhn gi tr v t Datalist1 vi tham s truyn pkIntrodureID, v chng ta a thm vo mt Datalist2 vi DataSourceID=SqlDataSource2. Nh vy khi chy chng trnh bn nhn vo mi mc trong Datalist1 th d liu y tng ng s hin trong trong DataList2 Thay i d liu vi iu khin DataList Bn c th s dng DataList thay i d liu bn ghi. Tuy nhin chnh sa d liu ca bn ghi n yu cu nhiu phi vit nhiu code hn so vi cc iu khin rng buc d liu khc nh GridView, FormView hay DetailView. V d sau y s hng dn bn cch thay i v xo d liu t DataList. <%@ Page Language="C#" AutoEventWireup="true" CodeFil e="Repeateredit.aspx.cs"Inherits="Repeateredit" %> <script runat="server"> void DataList1_EditCommand(object sender, DataListCommandEventArgs e)

{ DataList1.EditItemIndex = e.Item.ItemIndex; DataList1.DataBind(); } void DataList1_DeleteCommand(object sender, DataListCommandEventArgs e) { SqlDataSource1.DeleteParameters["pkIntrodureID"].DefaultValue = DataList1.DataKeys[e.Item.ItemIndex].ToString(); SqlDataSource1.Delete(); } void DataList1_UpdateCommand(object sender, DataListCommandEventArgs e) { TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle"); TextBox txtSummary = (TextBox)e.Item.FindControl("txtSummary"); SqlDataSource1.UpdateParameters["pkIntrodureID"].DefaultValue = DataList1.DataKeys[e.Item.ItemIndex].ToString(); SqlDataSource1.UpdateParameters["sTitle"].DefaultValue = txtTitle.Text; SqlDataSource1.UpdateParameters["sSummary"].DefaultValue = txtSummary.Text; SqlDataSource1.Update(); DataList1.EditItemIndex = -1; } void DataList1_CancelCommand(object sender, DataListCommandEventArgs e) { DataList1.EditItemIndex = -1; DataList1.DataBind(); } </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Repeater</title> </head> <body> <form id="form1" runat="server"> <div> <asp:DataList ID="DataList1" DataSourceID="SqlDataSource1" DataKeyField="pkIntrodureID" GridLines="None" OnEditCommand="DataList1_EditCommand"

OnDeleteCommand="DataList1_DeleteCommand" OnUpdateCommand="DataList1_UpdateCommand" OnCancelCommand="DataList1_CancelCommand" runat="server"> <ItemTemplate> <h3><%#Eval("sTitle") %></h3> <%#Eval("sSummary") %><br /><br /> <asp:LinkButton ID="lbnedit" runat="server" Text="Edit" Comman dName="Edit" /> | <asp:LinkButton ID="lbndelete" runat="server" Text="Delete" On ClientClick="return confirm('Bn c chc chn xo mc ny khng?');" CommandName="Delete" /> </ItemTemplate> <EditItemTemplate> Tiu :<br /> <asp:TextBox ID="txtTitle" runat="server" Text='< %#Eval("sTitle") %>'/><br /><br/> Tm tt:<br /> <asp:TextBox ID="txtSummary" runat="server" Text='< %#Eval("sSummary") %>' /><br /><br /> <asp:LinkButton ID="lbnUpdate" runat="server" CommandName=" Update" Text="Update"/> | <asp:LinkButton ID="lbncancel" runat="server" CommandName=" Cancel" Text="Cancel"/> </EditItemTemplate> </asp:DataList> <asp:SqlDataSource ID="SqlDataSource1"ConnectionString="<% $ConnectionStrings:hcubiuData %>" UpdateCommand="Update tblIntrodure set sTitle=@sTitle, sSummary=@sSummary where pkIntrodureID=@pkIntrodureID" DeleteCommand="Delete from tblIntrodure where pkIntrodureID=@pkIntrodureID" SelectCommand="select * from tblIntrodure" runat="server"> <UpdateParameters> <asp:Parameter Name="pkIntrodureID" /> <asp:Parameter Name="sTitle" /> <asp:Parameter Name="sSummary" /> </UpdateParameters> <DeleteParameters> <asp:Parameter Name="pkIntrodureID" /> </DeleteParameters> </asp:SqlDataSource> </div> </form> </body> </html>

Cch thao tc d liu vi DataList gn ging vi FormView. lm c vic ny bn cn cung cp cc button c CommandName ng vi cc phng thc m c DataList h tr . cng vi vic a vo cc tham s tng ng trong thnh phn UpdateParameter v DeleteParameter ca SqlDataSource.

You might also like