Display Comment in Nested Way like Gmail Comment

Question

I have a table comments, thats look like this, added some mockup content as well:

+------------+---------+----------+-------------------+------------------------------------+---------------------------+
| comment_id | user_id | post_id  | comment_parent_id |          comment_content           | comment_creation_datetime |
+------------+---------+----------+-------------------+------------------------------------+---------------------------+
|         26 |       1 |    16329 |                 0 | Första                             | 2016-01-24 10:42:49       |
|         27 |       1 |    16329 |                26 | Svar till första                   | 2016-01-24 10:42:55       |
|         28 |       1 |    16329 |                26 | Andra svar till förta              | 2016-01-24 10:43:06       |
|         29 |       1 |    16329 |                28 | Svar till "andra svar till första" | 2016-01-24 10:43:23       |
+------------+---------+----------+-------------------+------------------------------------+---------------------------+

Im trying to display the comments Reddit style, like this image:

Even i don't understand how to start where to start... i tried googling to find article which related to my requirement but i didn't find it. Any Help... i'm posting Image in below comments because i don't have reputation point to post image thank you

@fubo : how to display comments in hierarchy – Srikanth Erukulla Jul 15 '16 at 12:33 — Srikanth Erukulla, Jul 15 '16 at 12:33

score 1 · Accepted Answer · edited May 23 '17 at 12:08

Let's say you have a class Comment

public class Comment
{
    public int comment_id { get; set; }
    public int user_id { get; set; }
    public int post_id { get; set; }
    public int comment_parent_id { get; set; }
    public string comment_content { get; set; }
    public DateTime comment_creation_datetime { get; set; }

    public Comment(int comment_id, int user_id, int post_id, int comment_parent_id, string comment_content, DateTime comment_creation_datetime)
    {
        this.comment_id = comment_id;
        this.user_id = user_id;
        this.post_id = post_id;
        this.comment_parent_id = comment_parent_id;
        this.comment_content = comment_content;
        this.comment_creation_datetime = comment_creation_datetime;
    }

    public override string ToString()
    {
        return string.Format("{0} {1} {2}", this.comment_id, this.comment_content, this.comment_creation_datetime);
    }
}

filled with the following sample values

List<Comment> cList = new List<Comment>();
cList.Add(new Comment(26, 1, 16329, 0, "Första  ", new DateTime(2016, 01, 24, 10, 42, 49)));
cList.Add(new Comment(27, 1, 16329, 26, "Svar till första", new DateTime(2016, 01, 24, 10, 42, 55)));
cList.Add(new Comment(28, 1, 16329, 26, "Andra svar till förta", new DateTime(2016, 01, 24, 10, 43, 06)));
cList.Add(new Comment(29, 1, 16329, 28, "Svar till andra svar till första", new DateTime(2016, 01, 24, 10, 43, 23)));

you need a method so sort the items

public static IEnumerable<Comment> Sort(List<Comment> SortItemsList, int parentID = 0)
{
    foreach (var item in SortItemsList.Where(x => x.comment_parent_id == parentID).OrderBy(x => x.comment_id).ToList())
    {
        yield return item;
        foreach (var child in Sort(SortItemsList, item.comment_id))
        {
            yield return child;
        }
    }
}

and one to determine the hierarchy depth of each item

public static int GetDepth(List<Comment> cList, Comment cItem)
{
    if (cItem.comment_parent_id == 0)
    {
        return 0;
    }
    else
    {
        return GetDepth(cList, cList.Where(x => x.comment_id == cItem.comment_parent_id).Single()) + 1;
    }
}

Example:

foreach (Comment cItem in Sort( cList))
{
    Console.WriteLine(GetDepth(cList, cItem) + " | " + cItem.ToString());
}

another approach would be the nested handling of the comments like here descriped.

Display Comment in Nested Way like Gmail Comment

1 Answers1

Linked