詳解ASP.NET-----Repeater資料控制項的用法總結_實用技巧

來源:互聯網
上載者:User

一、Repeater控制項的用法流程及執行個體:

1、首先建立一個網站,建立一個網頁index.aspx。

2、添加或者建立APP_Data資料檔案,然後將用到的資料庫檔案放到APP_Data檔案夾中。

3、開啟資料庫企業管理器,資料庫伺服器為local(.),然後將APP_Data檔案夾中的資料庫附加到資料庫伺服器中。

4、添加Ling to  SQL類。

5、開啟視圖,伺服器總管,右擊資料庫伺服器,選擇添加串連,然後選擇資料庫伺服器、資料庫類型,及資料庫表,然後完成。

6、將需要用到的表,全部選中,然後拖動到.dbml為尾碼的檔案中,然後儲存。到這一步,資料表的附加及與網站的串連就完成了。

目標:通過使用Repeater資料控制項,讓資料表中的資料在表格中顯示。

1、添加樣式檔案,然後在樣式檔案中,書寫表格的樣式代碼。

2、在index.aspx的設計模式下,插入表格,通常插入兩行(一行為標題列,一行為內容行),因為Repeater控制項會自動迴圈的。然後在原始碼介面中,將剛插入的表格的第一行的儲存格改為,標題儲存格,即將<td>改為<th>。

3、選中表格,然後選擇格式,然後選擇附加樣式表。接下來,需要將原始碼中的頭部中樣式代碼刪除,將行樣式刪除,並且書寫建立的樣式表中的類或這ID到表格中。

4、然後,將游標放到table前面,雙擊repeater控制項,這樣Repeater控制項的代碼就添加到了Table代碼的前面,然後分別為Repeater控制項添加頭部模版(<HeaderTemplate></HeaderTemplate>  )、列表模版(<ItemTemplate></ItemTemplate>)和尾部模版( <FooterTemplate> </FooterTemplate>)。

注意:

頭部模版放置表格開始及第一列名行(<table><tr><th></th></tr>);列表模版放置表格第二行(<tr></tr>);尾部模版放置表個結束(</table>)。

插入表格時只需插入兩行即可,顯示資料時是根據資料庫表迴圈顯示的。項目模板,會進行迴圈顯示,放置表格第二行。

5、然後在標題列的儲存格中書寫將要顯示的資料庫中欄位的別名,在內容行的儲存格中書寫資料庫中的欄位名,方式為:

<td><%#Eval("資料庫欄位名") %></td>

核心代碼為:

<body>  <form id="form1" runat="server">  <div>  <!--游標放到table前面,雙擊repeater控制項,三個缺一不可-->    <asp:Repeater ID="Repeater1" runat="server">    <HeaderTemplate><!--頭部模板,放表格開始及第一列名-->    <table class="ts"><!--插入表格時只需插入兩行即可,顯示資料時是根據資料庫表迴圈顯示的-->      <tr>        <th>          學號</th>        <th>          姓名</th>        <th>          性別</th>        <th>          籍貫</th>        <th>          年齡</th>      </tr></HeaderTemplate>      <ItemTemplate><!--項目模板,會進行迴圈顯示,放置表格第二行-->    <tr>        <td>          <%#Eval("number") %> <!--HTMl中插入其他代碼需要用<% %>括起來,Eval("資料庫中的欄位名")-->          </td>        <td>         <%#Eval("name")%> </td>        <td>          <%#Eval("sex")%> </td>        <td>           <%#Eval("place")%></td>        <td>          <%#Eval("age")%> </td>      </tr>    </ItemTemplate>        <FooterTemplate><!--底部模板-->    </table>    <!--表格結束部分-->    </FooterTemplate>      </asp:Repeater>  </div>  </form></body>

注意:

HTMl中插入其他代碼需要用<% %>括起來。

6、然後在index.aspx.cs的Page_Load()事件中綁定資料來源。

核心代碼為:

public partial class citynumber : System.Web.UI.Page{  DataClassesDataContext dc = new DataClassesDataContext();  protected void Page_Load(object sender, EventArgs e)  {    var query = from c in dc.city select c;    Repeater1.DataSource = query;    Repeater1.DataBind();  }}

7、運行index.aspx頁面即可看到資料庫中各欄位資訊。

二、通過Table顯示資料庫中的欄位時,為欄位添加超連結。

1、建立兩個頁面,index.aspx 頁面和Cities.aspx頁面。

index.aspx頁面代碼:

<body>  <asp:Repeater ID="Repeater1" runat="server">  <HeaderTemplate>  <table class="ts">    <tr>      <th>        省份名稱</th>      <th>        省份編號</th>    </tr>  </HeaderTemplate>  <ItemTemplate>  <tr>      <td>        <a href='Cities.aspx?pro=<%#Eval("proID") %>' target="_blank"><%#Eval("proName") %></a></td><!--添加超連結,超連結放到內容的兩邊-->      <td>      <%#Eval("proID")%></td>    </tr>  </ItemTemplate>  <FooterTemplate>  </table>  </FooterTemplate>  </asp:Repeater>  <form id="form1" runat="server">  <div>  </div>  </form></body>

index.aspx.cs中的代碼:

public partial class index : System.Web.UI.Page{  DataClassesDataContext dc = new DataClassesDataContext();  protected void Page_Load(object sender, EventArgs e)  {    var query = from c in dc.province select c;    Repeater1.DataSource = query;    Repeater1.DataBind();  }}

Cities.aspx頁面中的代碼:

<body>  <form id="form1" runat="server">  <div>      <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"       GridLines="None" Width="909px">      <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />      <RowStyle BackColor="#EFF3FB" />      <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />      <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />      <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />      <EditRowStyle BackColor="#2461BF" />      <AlternatingRowStyle BackColor="White" />    </asp:GridView>    </div>  </form></body>

Cities.aspx.cs頁面中的代碼:

public partial class Cities : System.Web.UI.Page{  DataClassesDataContext dc = new DataClassesDataContext();  protected void Page_Load(object sender, EventArgs e)  {    int id =Convert.ToInt32(Request.QueryString["pro"].ToString());    var query = from c in dc.city where c.proID == id select c;    GridView1.DataSource = query;    GridView1.DataBind();  }}

然後運行index.aspx頁面,通過單擊超連結就跳轉到了Cities.aspx,在該頁面顯示資訊。

以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支援雲棲社區。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.