Populate a table on an ASP.NET page

Question

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.

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

Name        A
LastName    B
Age         C
BirthDate   D
...

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

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

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.

2. 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.

EDIT.

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

Answer 1

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; }
}

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>  

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

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>

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();
    }

}

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.