How to list data retrieved from a table in Aspx page web form

Question

I'm sort of new to web forms but i hope anyone of you would be able to advise me on how to tackle this:

I have the following table in the database:

ID | Name   | ParentId
 1 | music  | 0
 2 | house  | 1
 3 | urban  | 1
 4 | games  | 0
 5 | ps4    | 4
 2 | Xbox   | 4

*code behind the Aspx page: I'm just returning a list of the table here like this:

protected List<EventsTable> events;
   events = db.EventsTable.ToList();

*Aspx Page: on this page i need to list all the events in table. for example; i need to list a parent Event and its child events below . ie * music (parent) house urban *games(parent) ps4 xbox

This is what i have done so far. As i mentioned i'm new to web forms but i have experience in MVC , so i'm trying to use the Aspx page as i would in a view in MVC. I have a table like so:

 <table class="table">
                         <tr>
                             <th>Event</th>
                              <th>Edit</th>
                         </tr>

                   <%foreach(var s in events) {%>
                         <tbody>
                                <tr> 
                             <%if (s.ParentId == 0)
                                 {%>
                                    <td> * <%= s.Name %></td>
                              <%} %>

                                  <td> <%= s.Name %></td>
                                 <td> <a> Edit</a></td>
                             </tr>
                         </tbody>


                  <%}%>

                      </table>

Could someone please direct me on how I would go about in listing the events in the way I've said above? I'm not sure what the best option would be for me to achieve this in web forms.

Answer 1

Here an example of a GridView that is type-safe and shows how you can add a * in front of the name. ItemType is the full namespace of the class in the list that is bound to the GridView.

<asp:GridView ID="GridView1" runat="server" CssClass="table" ItemType="Namespace1.Default1.Event" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Event">
            <ItemTemplate>
                <%# Item.ParentId == 0 ? "*" : "" %>
                <%# Item.Name %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Edit">
            <ItemTemplate>
                <%# Item.ID %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Code behind

public List<Event> events = new List<Event>();

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        //some dummy data
        for (int i = 0; i < 10; i++)
        {
            Event ev = new Event() { ID = i, Name = "naam" + i, ParentId = 0 };
            events.Add(ev);
        }

        GridView1.DataSource = events;
        GridView1.DataBind();
    }
}


public class Event
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int ParentId { get; set; }
}