碼上快樂

相關內容    簡體    繁體

【ASP.NET】ItemDataBound之repeater 和 listview

本文轉載自   查看原文   2012-04-23 08:54   3313    ASP.NET

listview ItemDataBound

例1：在listview中顯示數據庫中的信息，數據庫截圖如下：

實現效果：年齡大於30的一行背景設置為紅色；效果如圖所示：

 


首先在主界面添加一個ObjectDataSource，然后添加listview控件，數據源選擇ObjectDataSource。（也可以添加SqlDataSource但是筆者發現如果用SqlDataSource不可以在控件中實現數據的增刪改查）

 然后添加listview控件，選擇自己喜歡的樣式和布局，啟用編輯，插入，刪除，分頁；在前台會自動的生成一些代碼：

View Code 
  1         <asp:ListView ID="ListView1" runat="server" DataKeyNames="sno" 
  2             DataSourceID="ObjectDataSource1" InsertItemPosition="LastItem" 
  3             onitemdatabound="ListView1_ItemDataBound">
  4             <AlternatingItemTemplate>
  5                 <tr runat="server" id="trRow">
  6                     <td>
  7                         <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="刪除" />
  8                         <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編輯" />
  9                     </td>
 10                     <td>
 11                         <asp:Label ID="snoLabel" runat="server" Text='<%# Eval("sno") %>' />
 12                     </td>
 13                     <td>
 14                         <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
 15                     </td>
 16                     <td>
 17                         <asp:Label ID="ssexLabel" runat="server" Text='<%# Eval("ssex") %>' />
 18                     </td>
 19                     <td>
 20                         <asp:Label ID="sageLabel" runat="server" Text='<%# Eval("sage") %>' />
 21                     </td>
 22                     <td>
 23                         <asp:Label ID="saddressLabel" runat="server" Text='<%# Eval("saddress") %>' />
 24                     </td>
 25                 </tr>
 26             </AlternatingItemTemplate>
 27             <EditItemTemplate>
 28                 <tr style="background-color: #FFCC66;color: #000080;">
 29                     <td>
 30                         <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
 31                         <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
 32                     </td>
 33                     <td>
 34                         <asp:Label ID="snoLabel1" runat="server" Text='<%# Eval("sno") %>' />
 35                     </td>
 36                     <td>
 37                         <asp:TextBox ID="snameTextBox" runat="server" Text='<%# Bind("sname") %>' />
 38                     </td>
 39                     <td>
 40                         <asp:TextBox ID="ssexTextBox" runat="server" Text='<%# Bind("ssex") %>' />
 41                     </td>
 42                     <td>
 43                         <asp:TextBox ID="sageTextBox" runat="server" Text='<%# Bind("sage") %>' />
 44                     </td>
 45                     <td>
 46                         <asp:TextBox ID="saddressTextBox" runat="server" 
 47                             Text='<%# Bind("saddress") %>' />
 48                     </td>
 49                 </tr>
 50             </EditItemTemplate>
 51             <EmptyDataTemplate>
 52                 <table runat="server" 
 53                     style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
 54                     <tr>
 55                         <td>
 56                             未返回數據。</td>
 57                     </tr>
 58                 </table>
 59             </EmptyDataTemplate>
 60             <InsertItemTemplate>
 61                 <tr style="">
 62                     <td>
 63                         <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
 64                         <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
 65                     </td>
 66                     <td>
 67                         <asp:TextBox ID="snoTextBox" runat="server" Text='<%# Bind("sno") %>' />
 68                     </td>
 69                     <td>
 70                         <asp:TextBox ID="snameTextBox" runat="server" Text='<%# Bind("sname") %>' />
 71                     </td>
 72                     <td>
 73                         <asp:TextBox ID="ssexTextBox" runat="server" Text='<%# Bind("ssex") %>' />
 74                     </td>
 75                     <td>
 76                         <asp:TextBox ID="sageTextBox" runat="server" Text='<%# Bind("sage") %>' />
 77                     </td>
 78                     <td>
 79                         <asp:TextBox ID="saddressTextBox" runat="server" 
 80                             Text='<%# Bind("saddress") %>' />
 81                     </td>
 82                 </tr>
 83             </InsertItemTemplate>
 84             <ItemTemplate>
 85                 <tr runat="server" id="trRow" >
 86                     <td>
 87                         <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="刪除" />
 88                         <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編輯" />
 89                     </td>
 90                     <td>
 91                         <asp:Label ID="snoLabel" runat="server" Text='<%# Eval("sno") %>' />
 92                     </td>
 93                     <td>
 94                         <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
 95                     </td>
 96                     <td>
 97                         <asp:Label ID="ssexLabel" runat="server" Text='<%# Eval("ssex") %>' />
 98                     </td>
 99                     <td>
100                         <asp:Label ID="sageLabel" runat="server" Text='<%# Eval("sage") %>' />
101                     </td>
102                     <td>
103                         <asp:Label ID="saddressLabel" runat="server" Text='<%# Eval("saddress") %>' />
104                     </td>
105                 </tr>
106             </ItemTemplate>
107             <LayoutTemplate>
108                 <table runat="server">
109                     <tr runat="server">
110                         <td runat="server">
111                             <table ID="itemPlaceholderContainer" runat="server" border="1" 
112                                 style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
113                                 <tr runat="server" style="background-color: #FFFBD6;color: #333333;">
114                                     <th runat="server">
115                                     </th>
116                                     <th runat="server">
117                                         學號</th>
118                                     <th runat="server">
119                                         姓名</th>
120                                     <th runat="server">
121                                         性別</th>
122                                     <th runat="server">
123                                         年齡</th>
124                                     <th runat="server">
125                                         籍貫</th>
126                                 </tr>
127                                 <tr ID="itemPlaceholder" runat="server">
128                                 </tr>
129                             </table>
130                         </td>
131                     </tr>
132                     <tr runat="server">
133                         <td runat="server" 
134                             style="text-align: center;background-color: #FFCC66;font-family: Verdana, Arial, Helvetica, sans-serif;color: #333333;">
135                             <asp:DataPager ID="DataPager1" runat="server">
136                                 <Fields>
137                                     <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
138                                         ShowLastPageButton="True" />
139                                 </Fields>
140                             </asp:DataPager>
141                         </td>
142                     </tr>
143                 </table>
144             </LayoutTemplate>
145             <SelectedItemTemplate>
146                 <tr style="background-color: #FFCC66;font-weight: bold;color: #000080;">
147                     <td>
148                         <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="刪除" />
149                         <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編輯" />
150                     </td>
151                     <td>
152                         <asp:Label ID="snoLabel" runat="server" Text='<%# Eval("sno") %>' />
153                     </td>
154                     <td>
155                         <asp:Label ID="snameLabel" runat="server" Text='<%# Eval("sname") %>' />
156                     </td>
157                     <td>
158                         <asp:Label ID="ssexLabel" runat="server" Text='<%# Eval("ssex") %>' />
159                     </td>
160                     <td>
161                         <asp:Label ID="sageLabel" runat="server" Text='<%# Eval("sage") %>' />
162                     </td>
163                     <td>
164                         <asp:Label ID="saddressLabel" runat="server" Text='<%# Eval("saddress") %>' />
165                     </td>
166                 </tr>
167             </SelectedItemTemplate>
168             
169         </asp:ListView>

 

當啟用編輯，插入，刪除，分頁后。ObjectDataSource控件中也會自動生成一些代碼，因為在插入，編輯，刪除的過程中，需要訪問數據庫，通過ObjectDataSource來進行對數據庫的修改。ObjectDataSource自動生成的代碼如下：

View Code 
 1         <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
 2             DeleteMethod="Delete" InsertMethod="Insert" 
 3             OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" 
 4             TypeName="listviewText.dal.DataSetStudentInfoTableAdapters.studentinfoTableAdapter" 
 5             UpdateMethod="Update">
 6             <DeleteParameters>
 7                 <asp:Parameter Name="Original_sno" Type="Int32" />
 8             </DeleteParameters>
 9             <InsertParameters>
10                 <asp:Parameter Name="sno" Type="Int32" />
11                 <asp:Parameter Name="sname" Type="String" />
12                 <asp:Parameter Name="ssex" Type="String" />
13                 <asp:Parameter Name="sage" Type="Int32" />
14                 <asp:Parameter Name="saddress" Type="String" />
15             </InsertParameters>
16             <UpdateParameters>
17                 <asp:Parameter Name="sname" Type="String" />
18                 <asp:Parameter Name="ssex" Type="String" />
19                 <asp:Parameter Name="sage" Type="Int32" />
20                 <asp:Parameter Name="saddress" Type="String" />
21                 <asp:Parameter Name="Original_sno" Type="Int32" />
22             </UpdateParameters>
23         </asp:ObjectDataSource>

listview自動生成的模板：

  • AlternatingItemTemplate：編輯隔行顯示的效果；
  • EditItemTemplate：編輯模板；“Text='<%# Bind("sage") %>'”意思為雙向綁定，因為編輯的時候需要連接數據庫，實現數據的編輯；
  • InsertItemTemplate：插入數據模板；
  • ItemTemplate：顯示數據模板；
  • LayoutTemplate：編輯控件頭部，尾部的模板；里面有行代碼是這樣寫的：“ <tr ID="itemPlaceholder" runat="server">”在這行代碼上面相當於<HeaderTemplate>而下面相當於<FooterTemplate>

接下來找到listview的ItemDataBound事件，雙擊該事件，編輯代碼；

由於我們要實現的功能是年齡大於三十的一行顯示紅色，所以我們要在后台找到改行，因此我們要把相應的行設置為服務端控件；在listview中有一個ItemTemplate模板，我們要把他的<tr>改成<tr runat="server" id="trRow" >這樣就可以在后台修改改行的樣式；代碼如下：

 

View Code 
            if (e.Item.ItemType == ListViewItemType.DataItem)
            {
                ListViewDataItem lvDateItem = (ListViewDataItem)e.Item;
                DataRowView rowView = (DataRowView)lvDateItem.DataItem;
                var student = (listviewText.dal.DataSetStudentInfo.studentinfoRow)rowView.Row;
                if (student.sage > 30)
                {
                    HtmlTableRow trRow = (HtmlTableRow)e.Item.FindControl("trRow");
                    trRow.Attributes["class"] = "warning";
                }
            }

 

此代碼中設置了trRow的額外屬性，即css樣式；前台的css樣式代碼如下：

View Code 
1     <style type="text/css">
2         .warning{background-color:Red}
3        
4     </style>

然后在瀏覽器中查看發現竟然不能達到預想的效果，仔細研究才發現原來listview中有一個模板——AlternatingItemTemplate，我們需要在此模板中修改他的<tr>為<tr runat="server" id="trRow" >需要注意的一點是，在不同的模板中id可以相同，但是不會發生沖突；修改之后在瀏覽器中查看就可以達到預期的效果了；

例2：在repeater中實現上例的效果：使用相同的數據庫；


前面的操作都相同，先添加ObjectDataSource控件，再添加repeater控件，前台代碼如下：

View Code

后台代碼如下：

 

View Code 
            if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
            {
                DataRowView studentView = (DataRowView)e.Item.DataItem;
                var studentRow = (RepeaterText.dal.DataSetStudentInfo.studentinfoRow)studentView.Row;
                if (studentRow.sage > 30)
                {
                    HtmlTableRow trrow = (HtmlTableRow)e.Item.FindControl("trRow");
                    trrow.Attributes["class"] = "woring";
                }
            }

 

效果如圖所示：

如有錯誤請不吝賜教！


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 【ASP.NET】Repeater的那些事 asp.net repeater控件操作 ASP.NET中 Repeater嵌套 Repeater控件的ItemDataBound事件 asp.net中Repeater控件用法筆記 asp.net關於Repeater控件中的全選，批量操作 ASP.NET Repeater控件實現簡單分頁 Asp.net 通過Repeater嵌套Repeater循環添加對應的一組控件 Asp.Net Repeater的兩層嵌套以及遍歷取值的簡單實現 asp.net動態網站repeater控件使用及分頁操作介紹
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM