使用Repeater在HTML表中生成列

时间:2013-04-10 22:20:49

标签: asp.net repeater html-table

我需要在同一个html表中将两个单独查询的结果显示为并排列。两个数据集中的每一个都来自通过ASP.NET SqlDataSource的存储过程,它们每个都返回相同数量的行。我希望输出看起来像这样:

 <table>
   <tr>
    <td>Row 1 from Stored Procedure 1</td>
    <td>Row 1 from Stored Procedure 2</td>
   </tr>
   <tr>
    <td>Row 2 from Stored Procedure 1</td>
    <td>Row 2 from Stored Procedure 2</td>
   </tr>
   ...
   <tr>
    <td>Row n from Stored Procedure 1</td>
    <td>Row n from Stored Procedure 2</td>
   </tr>
 </table>

是否可以使用“备用行”功能在单个ASP Repeater控件中完成此操作? 是否可以并排执行两个ASP中继器? 是否有其他控件可以实现此目的?

3 个答案:

答案 0 :(得分:1)

我认为用桌子不可能。

你可以这样做:

<div style="width:500px;float:left;">
    <asp:Repeater ID="Repeater1">
        <div style="width:100%;height:25px;"><asp:Label ID="RowDataLabel"></asp:Label></div>
    </asp:Repeater>
</div>
<div style="width:500px;float:left;">
    <asp:Repeater ID="Repeater2">
        <div style="width:100%;height:25px;"><asp:Label ID="RowDataLabel"></asp:Label></div>
    </asp:Repeater>
</div>

(我知道我错过了一些标记)

这实际渲染的方式取决于每行数据的数量和相似程度......一个真正长的数据可能会摒弃整个布局。如果您在使用CSS时遇到问题,也可以使用<ul>代替<div>

另一种选择是在代码中获取两个数据集,使用LINQ将它们组合起来,然后将单个组合数据集渲染到网格或转发器。

答案 1 :(得分:1)

由于两个DataTable具有相同的行数,因此您可以将第一个表设置为数据源,并使用e.Item.ItemIndex访问第二个表中的值。

所以这将是你的Repeater标记:

<asp:Repeater ID="rptData" runat="server" OnItemDataBound="rptData_ItemDataBound">
    <HeaderTemplate>
        <table border="1" >
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><asp:Label ID="lblFirst" runat="server" /></td>
            <td><asp:Label ID="lblSecond" runat="server" /></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

你可以这样处理OnItemDataBound

protected void rptData_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        ((Label)e.Item.FindControl("lblFirst")).Text = ((DataRowView)e.Item.DataItem)["Value"].ToString();
        ((Label)e.Item.FindControl("lblSecond")).Text = this.dtSecond.Rows[e.Item.ItemIndex]["Value"].ToString();
    }
}

以下是代码隐藏的其余部分,因此您有一个完整的工作示例:

//PAGE-LEVEL VARIABLES
DataTable dtFirst = new DataTable();
DataTable dtSecond = new DataTable();

protected void Page_Load(object sender, EventArgs e)
{
    this.PopulateDatasources();
    this.rptData.DataSource = this.dtFirst;
    this.rptData.DataBind();
}

private void PopulateDatasources()
{
    DataRow row = null;
    dtFirst.Columns.Add(new DataColumn("Value"));
    dtSecond.Columns.Add(new DataColumn("Value"));
    row = dtFirst.NewRow();
    row["Value"] = "First - 01";
    dtFirst.Rows.Add(row);
    row = dtFirst.NewRow();
    row["Value"] = "First - 02";
    dtFirst.Rows.Add(row);
    row = dtSecond.NewRow();
    row["Value"] = "Second - 01";
    dtSecond.Rows.Add(row);
    row = dtSecond.NewRow();
    row["Value"] = "Second - 02";
    dtSecond.Rows.Add(row);
}

请告诉我这是否适合您。

答案 2 :(得分:0)

您是否有任何可以加入他们的专栏? 如果是,您可以做的是使用DataRelation连接DataSet中的表,并在页面中使用此关系获取Childs或父级,按照示例

代码背后的代码:

    protected void Page_Load(object sender, EventArgs e)
{
    DataSet ds1 = new DataSet();
    DataSet ds2 = new DataSet();

    DataTable dt1 = new DataTable("Table1");
    DataTable dt2 = new DataTable("Table2");

    DataSet ds = new DataSet("DataSet");

    dt1.Columns.Add("Eno", typeof(Int32));
    dt1.Columns.Add("Ename", typeof(String));
    dt1.Columns.Add("Salary", typeof(Double));
    dt1.Columns.Add("Deptno", typeof(Int32));
    dt1.PrimaryKey = new DataColumn[] { dt1.Columns["Eno"] };

    dt2.Columns.Add("Deptno", typeof(Int32));
    dt2.Columns.Add("Dname", typeof(String));
    dt2.PrimaryKey = new DataColumn[] { dt2.Columns["Deptno"] };

    ds1.Tables.Add(dt1);
    ds2.Tables.Add(dt2);

    // Loading data into dt1, dt2:

    object[] o1 = { 1, "dvs.kiran kumar", 50000.50, 10 };
    object[] o2 = { 2, "Raj", 4000.50, 20 };
    object[] o3 = { 3, "Gary", 10000.50, 30 };

    object[] c1 = { 10, "MFG" };
    object[] c2 = { 20, "EAS" };
    object[] c3 = { 30, "E&U" };
    object[] c4 = { 40, "PES" };

    dt2.Rows.Add(c1);
    dt2.Rows.Add(c2);
    dt2.Rows.Add(c3);
    dt2.Rows.Add(c4);

    dt1.Rows.Add(o1);
    dt1.Rows.Add(o2);
    dt1.Rows.Add(o3);

    DataSet dsJoined = new DataSet();
    dsJoined.Tables.Add(ds1.Tables[0].Copy());
    dsJoined.Tables.Add(ds2.Tables[0].Copy());
    DataRelation drel = new DataRelation("EquiJoin", dsJoined.Tables[1].Columns["Deptno"], dsJoined.Tables[0].Columns["Deptno"]);
    dsJoined.Relations.Add(drel);

    rptJoined.DataSource = dsJoined.Tables[1];
    rptJoined.DataBind();


}

标记:

        <asp:Repeater runat="server" ID="rptJoined">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>

            <tr>
                <td>
            Depto: <%# ((System.Data.DataRowView) Container.DataItem)["Dname"] %>
                </td>
            <asp:Repeater runat="server" ID="rptChild" DataSource='<%# ((System.Data.DataRowView) Container.DataItem).Row.GetChildRows("EquiJoin") %>'>
                <ItemTemplate>
                    <td>
                Ename: <%# ((System.Data.DataRow) Container.DataItem)["Ename"] %>
                    </td>
                </ItemTemplate>
            </asp:Repeater>
            <tr>

        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

另一种选择是使用转发器中的OnItemDataBound事件并获取后面代码中的值。

代码背后:

    protected void rptJoined_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {

        DataRowView drv = (DataRowView)e.Item.DataItem;

        Literal ltrColumn1 = (Literal)e.Item.FindControl("ltrColumn1");
        Literal ltrColumn2 = (Literal)e.Item.FindControl("ltrColumn2");

        ltrColumn1.Text = drv["Dname"].ToString();

        var childs = drv.Row.GetChildRows("EquiJoin");

        if (childs.Count() > 0)
        {
            ltrColumn2.Text = childs[0]["Ename"].ToString();
        }
    }
}

标记:

<asp:Repeater runat="server" ID="rptJoined" OnItemDataBound="rptJoined_ItemDataBound">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <asp:Literal runat="server" ID="ltrColumn1" />
                </td>
                <td>
                    <asp:Literal runat="server" ID="ltrColumn2" />
                </td>
            <tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

干杯