在代码隐藏（ASPX 页面）中构建一个表（包含行和列）

Question

在 ASPX 页面的代码隐藏中，我获得了一些有关员工的详细信息（从外部数据源读取）。最后我想以下面的方式展示。下面的显示可能不正确，但它是一个带有标题/列方法的简单表格。

___________________________________________________________________________________
|                        DEPT        | HR                                          | |__________________________________________________________________________________|
|     Employee Image                 | Emp Name       | Hire Date                  |
|____________________________________|_____________________________________________|
|        Steve.gif                   | Steve Jobs     |  22/05/1979                |
|____________________________________|_____________________________________________|
|        Mark.gif                    | Mark Miller    |  22/05/1949                |
|____________________________________|_____________________________________________|
|                        DEPT        | Operations                                  | |__________________________________________________________________________________|
|     Employee Image                 | Emp Name       | Hire Date                  |
|____________________________________|_____________________________________________|

数据是从各种数据源收集的，并最终在代码隐藏中可用。我想以上述方式显示。

最好的方法是什么？我想创建一个 htmldivcontrol 并添加所有这些值。最后我将 div 标签绑定到页面。

目前我正在尝试方法，但想知道是否有更好的方法。

请分享您的观点和例子。 _

Answer 1

在我看来，最好的方法是使用这样的中继器：

<asp:Repeater ID="rpt" runat="server" OnItemDataBound="rpt_RowDataBound">
        <ItemTemplate>
            <table runat="server" style="color: White; background-color: #3A4F63;" visible="false"
                id="headerTable">
                <tr>
                    <td colspan="3" align="center">
                        <asp:Label ID="headerTitle" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td style="width: 200px; background-color: #3A4F63; color: White;">
                        Image 
                    </td>
                    <td style="width: 200px;">
                        Name
                    </td>
                    <td style="width: 200px;">
                        Hire Date
                    </td>
                </tr>
            </table>
            <!-- These are the actual data items -->
            <!-- Bind to your specific properties i.e. Employees. -->
            <table>
                <tr>
                    <td style="width: 200px;">
                        <asp:Image ID="img" runat="server" ImageUrl='<%#Eval("ImageUrl") %>'></asp:Image>
                    </td>
                    <td style="width: 200px;">
                        <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
                    </td>
                    <td style="width: 200px;">
                        <asp:Label ID="lblHireDate" runat="server" Text='<%#Eval("HireDate") %>'></asp:Label>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:Repeater>

然后在后面的代码中，类似：

private string currentDepartment =string.Empty;

protected void rpt_RowDataBound(object sender, RepeaterItemEventArgs e)
{

    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
        //Binding to Employee object.
        if (currentDepartment!= (e.Item.DataItem as Employee).Department) {
        currentDepartment = (e.Item.DataItem as Employee).Department;
            e.Item.FindControl("headerTable").Visible = true;
            (e.Item.FindControl("headerTitle") as Label).Text = (e.Item.DataItem as Employee).Department;
        }
            else {
            e.Item.FindControl("headerTable").Visible = false;
        }
    }
}

您需要将网格绑定到 List 其中 Employee 的定义如下：

public class Employee
{
   public string Department {get;set;}
   public string ImageUrl {get;set;}
   public DateTime HireDate {get;set;}
   public string Name {get;set;}
}

但是他们必须在绑定之前按部门排序。

填充转发器的示例代码

private void bindGridView()
{
    List<Employee> emps = new List<Employee>();
    for (int i = 0; i < 5; i++)
    {
        Employee e = new Employee();
        if (i % 2 == 0)
        {
            e.Department = "Human resources";
            e.HireDate = DateTime.Now.AddDays(-i);
            e.ImageUrl = @"http://www.freedigitalphotos.net/images/gal_images/av-_146.jpg";
        }
        else
        {
            e.Department = "Information Technology";
            e.HireDate=DateTime.Now.AddMonths(-i);
            e.ImageUrl = "http://www.freedigitalphotos.net/images/gal_images/av-_314.jpg";

        }

        e.Name = "Employee " + i;
        emps.Add(e);

    }
    rpt.DataSource = emps.OrderBy(x=>x.Department);
    rpt.DataBind();
}

生成

Answer 2

GridView 可能是最好的

Answer 3

您是否正在考虑动态地制作表格？以后你编辑它会很困难。为什么不在标记（.aspx）中制作一个普通的 HtmlTable，放置一些标签和图像，然后将其填充到代码隐藏中？有什么特殊原因吗？

Answer 4

你有几个选择。

一种方法是将所有不同的数据合并到一个动态创建的数据表中并绑定到数据源。

另一种方法是简单地执行您的建议并发出包含相关信息的 div。

第三种方法是在 aspx 文件中定义表格并使用 asp:label 控件。在后面的代码中，填充来自各种数据源的标签控件。

考虑到这些选择，我可能会选择第三个。听起来最容易在需要时重新配置/更改显示。