Thông tin tài liệu
ptg 674 CHAPTER 14 Using the ListView and DataPager Controls Text=”Title” CommandName=”Sort” CommandArgument=”Title” Runat=”server” /> </th> <th> <asp:LinkButton id=”LinkButton1” Text=”Director” CommandName=”Sort” CommandArgument=”Director” Runat=”server” /> </th> </tr> </thead> <tbody id=”itemContainer” runat=”server”> </tbody> </table> </LayoutTemplate> <ItemTemplate> <tr> <td><%# Eval(“Title”) %></td> <td><%# Eval(“Director”) %></td> </tr> </ItemTemplate> <EmptyDataTemplate> No records found </EmptyDataTemplate> </asp:ListView> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title, Director FROM Movie” ConnectionString=’<%$ ConnectionStrings:con %>’ Runat=”server” /> </div> </form> </body> </html> The two LinkButtons used for sorting the items in the ListView are contained in the LayoutTemplate. Both LinkButtons have a CommandName property set to the value Sort. The first LinkButton sorts by the Title property and the second LinkButton sorts by the Director property. From the Library of Wow! eBook ptg 675 Using the ListView Control 14 Editing Database Data You can use the ListView control to update, delete, and insert items. The page in Listing 14.6 illustrates how you can use the ListView to modify or delete the records in the Movie database table (see Figure 14.6). LISTING 14.6 EditListView.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <style type=”text/css”> .movie { border: solid 1px black; padding:5px; margin:3px; } .edit { background-color:lightyellow; FIGURE 14.6 Editing database data with the ListView control. From the Library of Wow! eBook ptg 676 CHAPTER 14 Using the ListView and DataPager Controls } </style> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title>Edit ListView</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListView ID=”lstMovies” DataSourceId=”srcMovies” DataKeyNames=”Id” runat=”server”> <LayoutTemplate> <div id=”itemContainer” runat=”server”> </div> </LayoutTemplate> <ItemTemplate> <div class=”movie”> <strong><%# Eval(“Title”) %></strong> <br /> <em>Directed by <%# Eval(“Director”) %></em> <br /> <asp:LinkButton id=”lnkEdit” Text=”{Edit}” CommandName=”Edit” Runat=”server” /> <asp:LinkButton id=”lnkDelete” Text=”{Delete}” CommandName=”Delete” OnClientClick=”return confirm(‘Delete this movie?’)” Runat=”server” /> </div> </ItemTemplate> <EditItemTemplate> <div class=”movie edit”> From the Library of Wow! eBook ptg 677 Using the ListView Control 14 <asp:Label id=”lblTitle” Text=”Title:” AssociatedControlID=”txtTitle” Runat=”server” /> <br /> <asp:TextBox id=”txtTitle” Text=’<%# Bind(“Title”) %>’ Runat=”server” /> <br /><br /> <asp:Label id=”lblDirector” Text=”Director:” AssociatedControlID=”txtDirector” Runat=”server” /> <br /> <asp:TextBox id=”txtDirector” Text=’<%# Bind(“Director”) %>’ Runat=”server” /> <br /><br /> <asp:LinkButton id=”lnkUpdate” Text=”Save” CommandName=”Update” Runat=”server” /> <asp:LinkButton id=”lnkCancel” Text=”Cancel” CommandName=”Cancel” Runat=”server” /> </div> </EditItemTemplate> </asp:ListView> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title, Director FROM Movie” UpdateCommand=”Update Movie SET Title=@Title, Director=@Director WHERE Id=@Id” From the Library of Wow! eBook ptg 678 CHAPTER 14 Using the ListView and DataPager Controls DeleteCommand=”Delete Movie WHERE Id=@Id” ConnectionString=’<%$ ConnectionStrings:con %>’ Runat=”server” /> </div> </form> </body> </html> The ListView control in Listing 14. 6 has an ItemTemplate that contains two LinkButtons. The first LinkButton has a CommandName property set to the value Edit and the second LinkButton has a CommandName property set to the value Delete. When you click the first LinkButton, the ListView control’s EditItemTemplate displays. When you click the second LinkButton, the current database record is deleted (after you confirm that you really want to delete the movie record). The EditItemTemplate contains a form for editing a movie record. The form contains two TextBox controls that have two-way data-binding expressions assigned to their Text prop- erties. The form also contains two LinkButton controls. The first LinkButton control has a CommandName of Update. When you click this button, the database is updated with the form changes and the EditItemTemplate switches back to the normal ItemTemplate. If you click the Cancel button, the EditItemTemplate switches to an ItemTemplate without updating the database. When editing with a ListView, you need to assign the primary key column names to the ListView control’s DataKeyNames property. The ListView control uses this to determine which database record to update. Notice that all the ListView editing is driven by the following magic command names: Edit, Delete, Update, and Cancel. By setting button control CommandName properties to these magic command names, you can control how the ListView edits items. You also can use the ListView control to insert new records into a database table. The ListView control supports an InsertItemTemplate. The page in Listing 14.7 illustrates how you can use the InsertItemTemplate to create a simple customer feedback form (see Figure 14.7). From the Library of Wow! eBook ptg 679 Using the ListView Control 14 LISTING 14.7 InsertListView.aspx <%@ Page Language=”C#” %> <!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 id=”Head1” runat=”server”> <title>Insert ListView</title> <style type=”text/css”> .comment { margin:10px; padding: 10px; border-left:solid 1px gray; border-bottom:solid 1px gray; } </style> </head> <body> <form id=”form1” runat=”server”> <div> FIGURE 14.7 Inserting new records with the ListView control. From the Library of Wow! eBook ptg 680 CHAPTER 14 Using the ListView and DataPager Controls <asp:ListView ID=”lstFeedback” DataSourceId=”srcFeedback” InsertItemPosition=”FirstItem” runat=”server”> <LayoutTemplate> <div id=”itemContainer” runat=”server”> </div> </LayoutTemplate> <ItemTemplate> <div class=”comment”> <%# Eval(“Comment”) %> </div> </ItemTemplate> <InsertItemTemplate> <div> Please enter any comments about our website here: <br /> <asp:Label id=”lblComments” Text=”Comments:” AssociatedControlID=”txtComment” Runat=”server” /> <br /> <asp:TextBox id=”txtComment” Text=’<%# Bind(“Comment”) %>’ TextMode=”MultiLine” Columns=”40” Rows=”3” Runat=”server” /> <br /> <asp:Button id=”lnkInsert” Text=”Add Comment” CommandName=”Insert” Runat=”server” /> </div> </InsertItemTemplate> </asp:ListView> <asp:SqlDataSource id=”srcFeedback” From the Library of Wow! eBook ptg 681 Using the DataPager Control 14 SelectCommand=”SELECT Id, Comment FROM Feedback” InsertCommand=”INSERT Feedback (Comment) VALUES (@Comment)” ConnectionString=’<%$ ConnectionStrings:con %>’ Runat=”server” /> </div> </form> </body> </html> The InsertItemTemplate appears only when you set the ListView control’s InsertItemPosition property. You can set this property to the value FirstItem, LastItem, or None. In Listing 14.7, it’s set to the value FirstItem so that the insert form appears above all the current items. The InsertItemTemplate contains a single TextBox control that has its Text property set to a data-binding expression. The template also contains a Button control that has a CommandName property set to the value Insert. When you click the button, the new item is inserted into the database. Using the DataPager Control The DataPager control displays a user interface for navigating through multiple pages of items. The DataPager control works with any control that supports the IPageableItemContainer interface. Unfortunately, there is currently only a single control that supports this interface: the ListView control. So this means that you can only use the DataPager with the ListView control. The DataPager control includes the following properties: . PageSize—Gets or sets the number of items to display at a time. . PagedControlId—Gets or sets the control to page. (The control must implement IPageableItemContainer.) . Fields—Gets the fields contained by the DataPager. . StartRowIndex—Gets the index of the first item to show. . MaximumRows—Gets the maximum number of rows to retrieve from the data source. . TotalRowCount—Gets the total number of items available from the data source. You set the PageSize to control the number of items to display per page. The PagerControlId property is optional. If you place the DataPager within the ListView control’s LayoutTemplate, you don’t need to set the PagerControlId property. If, on the other hand, you place the DataPager outside of the ListView control, you need to set the PagerControlId property to the ID of the ListView. From the Library of Wow! eBook ptg 682 CHAPTER 14 Using the ListView and DataPager Controls If you add a DataPager to a page and do nothing else, the DataPager won’t render anything. To display a user interface for the DataPager, you need to add one or more fields to the DataPager. The DataPager control supports the following fields: . NextPreviousPagerField—Used to display Next, Previous, First, and Last links. . NumericPagerField—Used to display Next, Previous, and page numbers links. . TemplatePagerField—Used to create a custom user interface for paging. The page in Listing 14.8 demonstrates how you can use the DataPager control to page through movies displayed by a ListView control (see Figure 14.8). LISTING 14.8 DataPagerListView.aspx <%@ Page Language=”C#” %> <!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 id=”Head1” runat=”server”> <title>DataPager ListView</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:ListView ID=”lstMovies” DataSourceId=”srcMovies” runat=”server”> <LayoutTemplate> <ol FIGURE 14.8 Using a DataPager control with the ListView control. From the Library of Wow! eBook ptg 683 Using the DataPager Control 14 id=”itemContainer” runat=”server”> </ol> <asp:DataPager id=”pg” PageSize=”2” Runat=”server”> <Fields> <asp:NextPreviousPagerField ShowFirstPageButton=”true” ShowPreviousPageButton=”true” ShowNextPageButton=”false” ShowLastPageButton=”false” /> <asp:NumericPagerField /> <asp:NextPreviousPagerField ShowFirstPageButton=”false” ShowPreviousPageButton=”false” ShowNextPageButton=”true” ShowLastPageButton=”true” /> </Fields> </asp:DataPager> </LayoutTemplate> <ItemTemplate> <li> <%# Eval(“Title”) %> </li> </ItemTemplate> </asp:ListView> <asp:SqlDataSource id=”srcMovies” SelectCommand=”SELECT Id, Title, Director FROM Movie” ConnectionString=’<%$ ConnectionStrings:con %>’ Runat=”server” /> </div> </form> </body> </html> The DataPager contains three fields: NextPreviousPagerField, NumericPagerField, and NextPreviousPagerField. Notice that the DataPager contains two NextPreviousPagerFields. The first one displays the First and Previous links, and the second one displays the Next and Last links. From the Library of Wow! eBook . ShowFirstPageButton=”true” ShowPreviousPageButton=”true” ShowNextPageButton=”false” ShowLastPageButton=”false” /> < ;asp: NumericPagerField /> < ;asp: NextPreviousPagerField ShowFirstPageButton=”false” ShowPreviousPageButton=”false”. eBook ptg 683 Using the DataPager Control 14 id=”itemContainer” runat=”server”> </ol> < ;asp: DataPager id=”pg” PageSize=”2” Runat=”server”> <Fields> < ;asp: NextPreviousPagerField. DataPager control to page through movies displayed by a ListView control (see Figure 14. 8). LISTING 14. 8 DataPagerListView.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD
Ngày đăng: 06/07/2014, 18:20
Xem thêm: ASP.NET 4 Unleased - p 71 pps
