在 ASP.NET 页面上填充表格 [英] Populate a table on an ASP.NET page

问题描述

关于表格(在这种情况下为单列)人口的简单问题.尽管这似乎是一个简单的问题，但我从未涉足前端领域，所以就这样吧.

Simple question regarding table(single column in this case) population. As much as it may seem like an easy question, I've never been involved in the front-end area, so here it goes.

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

The layout is 2 columns and 8 rows. Something like.

Name        A
LastName    B
Age         C
BirthDate   D
...

第 1 列是稳定的，如果您愿意，标题"不会​​改变.

Column 1 are stable, "titles" if you want, that won't change.

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

A,B,C,D are the result of querys to a database. So, options I can think of are:

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

1. Draw a 2Column - 8Row table and place TextBoxes in A,B,C,D... fields. So later on they can be populated with the results of the query (This option is not the most "beautiful" one since TextBoxes alter the design intented to be absorved by the whole page using .CSS files.

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

Set a datagrid. The problem here I think is that some of the A,B,C,D fields will have to be changed for later query-usage. And I'm not sure if Datagrids are ment for that.

是否有解决此问题的好方法"?提前致谢.

Is there a "good-way" for me to solve this issue? Thanks in advance.

编辑.

A、B、C、D 数据保存在 DataSet 中.

A,B,C,D data is held in a DataSet.

推荐答案

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

To me, the way you're describing the data doesn't really lend itself too well for a DataGrid. This control works best for data that you plan to display in a standard tabular style, where the column names go across the top and then you display the row(s) of values underneath. It's also a little unclear to me if you are intending to bind one or many instances of your Object (which I will just call Person for now) to the UI.

让我们继续定义该对象:

Let's go ahead and define that object:

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

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

To bind a single instance of Person to your UI, a simple HTML table should work fine. I'm using TextBoxes to display the values here, but if you don't need to edit them then just use Labels instead.

<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 的属性绑定到页面上的相应控件非常简单.

It's pretty trivial at this point to bind the properties from Person to their respective controls on the page using the code-behind.

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

If you wanted to use this same layout to display multiple instances of Person on a page, go with the ASP.net Repeater. The markup for this would look more like:

 <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 的集合绑定到 Repeater 上的 DataSource 属性:

In the code-behind, you just bind a collection of Person to the DataSource property on the Repeater:

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 而不是表格来完成类似的布局，但是相同的原则适用于绑定单个对象和多个对象.只需将本示例中的表格布局替换为您最终定义的任何标记即可.

Note: You could accomplish a similar layout using CSS instead of tables, however the same principles apply between binding a single vs multiple objects. Just replace the table layout in this example with whatever markup you ultimately define.

这篇关于在 ASP.NET 页面上填充表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！