zoukankan      html  css  js  c++  java
  • {Repeater控件} Repeater控件的用法流程及实例

    一、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,在该页面显示信息。

  • 相关阅读:
    明白python文件如何组织,理解建立源文件
    Python特殊语法:filter、map、reduce、lambda [转]
    html标签属性大全
    使用Webdriver执行JS小结
    Sublime Text ——3200破解补丁
    JavaScript——JS屏蔽F12和右键
    Typecho——数据库无法连接问题
    vscode——配置git的path
    windows电脑连接蓝牙耳机的正确步骤
    eolinker——添加项目成员
  • 原文地址:https://www.cnblogs.com/Areas/p/5488673.html
Copyright © 2011-2022 走看看