Building a Hierarchical Comment Section in ASP.NET like Facebook and YouTube

Introduction

Creating a hierarchical comment section is a crucial aspect for social networking sites and forums. In this article, we will delve into the implementation of a "Hierarchical Comment Section" in ASP.NET, similar to those seen on popular platforms like Facebook, YouTube, and various forums and blogs.

Previous Articles Recap

Before we dive into the coding details, let's briefly recap some of the key concepts discussed in my previous articles. I've covered topics such as setting up the database for comment hierarchy, creating stored procedures in SQL Server, and designing the HTML layout for displaying comments in a hierarchical manner.

1. DataBase Setup :

   In the first article, I explained the database structure required for the comment section. You can find the details on how to set up the database by visiting DataBase Setup

2. Stored Procedures :

   The second article focused on the implementation of stored procedures in SQL Server to handle hierarchical comments. If you missed it, check out StoredProcedure's

3. HTML Design :

   In the third article, I covered the HTML design aspects necessary for creating an appealing and user-friendly hierarchical comment section. You can follow the steps outlined in HTML Design

4. Displaying Parent and Child Comments:

   The fourth and fifth articles focused on displaying parent and child comments in a hierarchical structure, similar to the layout seen on Facebook and YouTube. For a detailed explanation, visit Display Parent Comment and Display Child Comment

Image resource found in google image

In my last post i already shown you design part of hierarchical comment as i show in above image, now i'll show logic of (Comment) button click event to post comment.

C# Coding : Comment Button Click Event

Now, let's shift our focus to the C# code responsible for handling the comment button click event. The code snippet below demonstrates how to store comments in the database efficiently:

protected void btnCommentPublish_Click(object sender, EventArgs e)
 {
  SqlCommand cmd = new SqlCommand("spCommentInsert", con);
  cmd.CommandType = CommandType.StoredProcedure;
  cmd.Parameters.AddWithValue("@Username", Request.QueryString["Username"].ToString());
  cmd.Parameters.AddWithValue("@CommentMessage", txtComment.Text);
  con.Open();
  cmd.ExecuteNonQuery();
  con.Close();
  //call CommentsBind Method
  CommentsBind();
 }

Note :

The CommentsBind method is crucial for displaying the most recent comments in a GridView control, providing a Facebook-like comment section appearance.

Design the Comment Section like Facebook :

The HTML markup below illustrates how to design the comment section, including user profile pictures and comment details:

<asp:GridView ID="GridViewComment" runat="server" AutoGenerateColumns="false" BorderWidth="0" Width="50%">
<Columns>
 <asp:TemplateField>
  <ItemTemplate>
   <div style="width:100%;">
    <table style="margin:3px 5px; width:100%;">
     <tr>
      <td style="width:55px; vertical-align:text-top;">                                                                                                               
      <asp:Image ID="ImageParent" runat="server" style="width:50px; height:50px;" ImageUrl="https://storage.designcrowd.com/common/images/v3/no-profile-pic-tiny.png" />
      </td>
      <td style="padding:0px 5px; text-align:left; vertical-align:top;">
       <asp:Label ID="lblCommentID" runat="server" Visible="false" Text='<% #Evalundefined"CommentID") %>'></asp:Label>
       <asp:Label ID="lblCommentMessage" runat="server" Text='<% #Evalundefined"CommentMessage") %>'></asp:Label><br />
       <a class="link" id='lnkReplyParent<%# Evalundefined"CommentID") %>' href="javascript:voidundefined0)" onclick="showReplyundefined<%# Evalundefined"CommentID") %>); return false;">Reply</a>&nbsp;
       <a class="link" id="lnkCancel" href="javascript:voidundefined0)" onclick="closeReplyundefined<%# Evalundefined"CommentID") %>); return false;">Cancel</a>
      <div id='divReply<%# Evalundefined"CommentID") %>' style="display:none; margin-top:5px;">
        <asp:TextBox ID="txtCommentReplyParent" runat="server" TextMode="MultiLine" Width="560px" Height="60px"></asp:TextBox>
        <asp:Button ID="btnReplyParent" runat="server" Text="Reply" style="float:right;margin:5px;" />
      </div>  
      </td>
     </tr>
    </table>
   </div>
   </ItemTemplate>
  </asp:TemplateField>
 </Columns>
</asp:GridView>

jQuery : Show Reply and Close Button

To improve user interaction, jQuery is employed to show and hide reply sections dynamically. The following jQuery script achieves this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript">
   function showReply(n) {
            $("#divReply" + n).show();
            return false;
            return false;
        }
        function closeReply(n) {
            $("#divReply" + n).hide();
            return false;
        }
  </script>

Style with CSS : Reply and Close Button

Lastly, CSS styles are applied to the reply and close buttons for a polished look:

  <style type="text/css">
   .link {
            text-decoration:none;
            color:#808080;
        }
            .link:hover {
                color:#dddddd;
            }
  </script>

Conclusion

In this article, we've covered the step-by-step process of creating a hierarchical comment section in ASP.NET. By combining database setup, stored procedures, HTML design, and interactive elements using C# and jQuery, you can achieve a sophisticated comment section similar to those found on leading social networking sites. Implement these techniques to enhance user engagement and interactivity on your website.

For more articles in this series, check the following links:

1. Database Design for Hierarchy Comments Section in ASP.NET
2. Stored Procedure Implementation for Hierarchy Comments Section in SQL Server
3. Building a Dynamic Comment Section in ASP.NET
4. Web Design for Comment Section in ASP.NET
5. Creating a Hierarchical Comment Section in ASP.NET – Like Facebook and YouTube
6. Download Source Code of Hierarchical Comment Section