• Repeater嵌套使用实例


    Repeater嵌套前台页面部分:

    CODE:

    <asp:Repeater id="rptCategories" runat="server">
    <HeaderTemplate>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
    </HeaderTemplate>
    <ItemTemplate>
        <!--分类名称-->
        <tr><th><%# DataBinder.Eval(Container.DataItem, "TypeName") %></th></tr>
        <!--分类下的产品-->
        <asp:Repeater id="rptProduct" runat="server">
          <ItemTemplate>
            <tr><td><a href='ProductInfo.aspx?Id=<%# DataBinder.Eval(Container.DataItem, "ID") %>'><%# DataBinder.Eval(Container.DataItem, "ProductName") %></a></td></tr>
          </ItemTemplate>
        </asp:Repeater>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
    </asp:Repeater>


    后台代码部分(部分代码):

    CODE:

    //在绑定分类品名时,绑定分类下的产品
    private void rptCategories_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        BLL.Products products =new BLL.Products();
        if (e.Item.ItemType == ListItemType.Item ||    e.Item.ItemType == ListItemType.AlternatingItem)
        {
            Repeater rptProduct = (Repeater) e.Item.FindControl("rptProduct");
            //找到分类Repeater关联的数据项
            DataRowView rowv = (DataRowView)e.Item.DataItem;
            //提取分类ID
            int CategorieId = Convert.ToInt32(rowv["ID"]);
            //根据分类ID查询该分类下的产品,并绑定产品Repeater
            rptProduct.DataSource = products.GetProductsByCategorieId(CategorieId);
            rptProduct.DataBind();
        }
    }


    另一种方法:
    前台:

    CODE:

    <!-- start parent repeater -->
    <asp:repeater id="parentRepeater" runat="server">
      <itemtemplate>
          <b><%# DataBinder.Eval(Container.DataItem,"au_id") %></b><br>
          <!-- start child repeater -->
          <asp:repeater id="childRepeater" datasource='<%# ((DataRowView)Container.DataItem)
          .Row.GetChildRows("myrelation") %>' runat="server">
            <itemtemplate>
                <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%><br>
            </itemtemplate>
          </asp:repeater>
          <!-- end child repeater -->
      </itemtemplate>
    </asp:repeater>
    <!-- end parent repeater -->


    后台:

    CODE:

    public partial class NestedRepeater : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.Repeater childRepeater;//parentRepeater;
        public NestedRepeater()
        {
            Page.Init += new System.EventHandler(Page_Init);
        }
        public void Page_Load(object sender, EventArgs e)
        {
            //Create the connection and DataAdapter for the Authors table.
            SqlConnection cnn = new SqlConnection("server=.;database=pubs; user id=sa;pwd=;");
            SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors", cnn);
            //Create and fill the DataSet.
            DataSet ds = new DataSet();
            cmd1.Fill(ds, "authors");
            //Create a second DataAdapter for the Titles table.
            SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor", cnn);
            cmd2.Fill(ds, "titles");
            //Create the relation bewtween the Authors and Titles tables.
            ds.Relations.Add("myrelation",
            ds.Tables["authors"].Columns["au_id"],
            ds.Tables["titles"].Columns["au_id"]);
            //Bind the Authors table to the parent Repeater control, and call DataBind.
            parentRepeater.DataSource = ds.Tables["authors"];
            Page.DataBind();
            //Close the connection.
            cnn.Close();//51aspx.com
        }
        private void Page_Init(object sender, EventArgs e)
        {
            InitializeComponent();
        }
        private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this.Page_Load);
        }
    }
  • 相关阅读:
    Bootsrap 的 Carousel
    Bootstrap 的 Tooltip 和 Popover
    JavaScript 继承
    Bootstrap 的 Collapse
    Bootstrap 组件之 Panel
    Bootstrap 组件之 List group
    Bootstrap 组件之 Nav
    使用 classList API
    Bootstrap 的 Dropdown
    Bootstrap 的 Modal
  • 原文地址:https://www.cnblogs.com/top5/p/1551552.html
Copyright © 2020-2023  润新知