Hierarchical Parent Comment Section in Asp.net like Facebook and Youtube

In this article let me show you how to create "Hierarchical Comment Section" which is mostly used in social networking sites like {Facebook Comment, Youtube Comment} and Forums and Blogs.... etc.
In my previous articles i already explained about How to Create Hierarchical Comment Section

Hierarchical Comment Section in Asp.net like Facebook and Youtube

Image resource found in google image

Hierarchical Comment Section in Asp.net like Facebook and Youtube

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

this code is used to stored comment in database, and this code is working fine when i tested.

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);
  //call CommentsBind Method
Note :

This CommentsBind method i used to show recent comment in gridview control in as i shown in above image like facebook comments. For that first i need to add Gridview control in Comment.aspx page and then i've to customize design as facebook comment look.

Design to Show Comment Section like Facebook : HTML Markup

i don't have any image column in UserTable, so in comment section i'll display user profile picture is default image for all.

<asp:GridView ID="GridViewComment" runat="server" AutoGenerateColumns="false" BorderWidth="0" Width="50%">
   <div style="width:100%;">
    <table style="margin:3px 5px; width:100%;">
      <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 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;" />

jQuery : Show Reply and Close Button

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

CSS : Reply and Close Button

  <style type="text/css">
   .link {
            .link:hover {

1 2 3 4 5 6


Post a Comment