c# - 在 ASP.NET 页面上填充表格

Question

关于表(在本例中为单列)人口的简单问题。 尽管这看起来是一个简单的问题，但我从未参与过前端领域，所以就这样吧。

布局为 2 列 8 行。 类似的东西。

Name        A
LastName    B
Age         C
BirthDate   D
...

第 1 列是稳定的，如果您愿意，可以使用“标题”，这不会改变。

A,B,C,D 是查询数据库的结果。所以，我能想到的选项是:

1. 绘制一个 2 列 - 8 行的表格并将文本框放置在 A、B、C、D... 字段中。因此，稍后可以用查询结果填充它们(此选项不是最“漂亮”的选项，因为文本框更改了旨在通过使用 .CSS 文件的整个页面吸收的设计。

2. 设置数据网格。我认为这里的问题是某些 A、B、C、D 字段必须更改以供以后查询使用。我不确定 Datagrids 是否适用于此。

我有解决这个问题的“好方法”吗？ 提前致谢。

编辑。

A、B、C、D 数据保存在数据集中。

Answer 1

对我来说，您描述数据的方式并不太适合 DataGrid。此控件最适合您计划以标准表格样式显示的数据，其中列名称位于顶部，然后您在下方显示值的行。如果您打算将对象的一个​​或多个实例(我现在将其称为 Person)绑定(bind)到 UI，我也不太清楚。

让我们继续定义该对象:

public class Person {
    public String Name { get; set; }
    public String LastName { get; set; }
    public int Age { get; set; }
    public DateTime BirthDate { get; set; }
}

要将 Person 的单个实例绑定(bind)到您的 UI，一个简单的 HTML 表格应该可以正常工作。我正在使用 TextBoxes 来显示此处的值，但如果您不需要编辑它们，则只需使用 Labels 即可。

<table>
    <tr><td>Name:</td><td><asp:TextBox ID="txtName" runat="server" /></td></tr>
    <tr><td>Last Name:</td><td><asp:TextBox ID="txtLastName" runat="server" /></td></tr>
    <tr><td>Age:</td><td><asp:TextBox ID="txtAge" runat="server" /></td></tr>
    <tr><td>Birthdate:</td><td><asp:TextBox ID="txtBirthDate" runat="server" /></td></tr>                  
</table>  

此时使用代码隐藏将 Person 的属性绑定(bind)到页面上它们各自的控件是非常简单的。

如果您想使用相同的布局在页面上显示多个 Person 实例，请使用 ASP.net Repeater .这个标记看起来更像:

 <asp:Repeater ID="repPeople" runat="server">
    <ItemTemplate>
        <table>
            <tr><td>Name:</td><td><asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>' /></td></tr>
            <tr><td>Last Name:</td><td><asp:TextBox ID="txtLastName" runat="server" Text='<%# Eval("LastName") %>' /></td></tr>
            <tr><td>Age:</td><td><asp:TextBox ID="txtAge" runat="server" Text='<%# Eval("Age") %>' /></td></tr>
            <tr><td>Birthdate:</td><td><asp:TextBox ID="txtBirthDate" runat="server" Text='<%# String.Format("{0:d}", Eval("BirthDate")) %>' /></td></tr>                  
        </table>                
    </ItemTemplate>
</asp:Repeater>

在代码隐藏中，您只需将 Person 的集合绑定(bind)到 Repeater 上的 DataSource 属性:

protected void Page_Load(object sender, EventArgs e) {

    // A simple example using Page_Load
    List<Person> people = new List<Person>();
    for (int i = 0; i < 10; i++) {
        people.Add(new Person() {Name = "Test", Age = 10, BirthDate=DateTime.Now, LastName = "Test"});
    }

    if (!IsPostBack) {
        repPeople.DataSource = people;
        repPeople.DataBind();
    }

}

注意:您可以使用 CSS 而不是表格来完成类似的布局，但是相同的原则适用于绑定(bind)单个对象和多个对象。只需将此示例中的表格布局替换为您最终定义的任何标记即可。