Create Hierarchical Comment Section in Asp.net by Using JQuery


  (This button click to Show and Hide Comment Section)

Create Hierarchical Comment Section in Asp.net by Using JQuery

In this article i'm going to explaining about how to Create Hierarchical Comment Section in Asp.net by Using JQuery, i tried to design hierarchichal comment section simillar to facebook i think i succeed in that to get it. This is a real time based concept and i didn't find any comments section articles or resources in internet search so i though this will helpful to other to implement easily.

HTML Markup

in html code i added one button which ID=btnComment this button is used to append textbox control and edit and reply a link to divmaincomment div as i show in practically in Demo Comment button click.

  <div style="padding:15px;">
     <asp:Button ID="btnComment" runat="server" CssClass="btn btn-info" Text="Comment" /><br />
     <div id="divmaincomment"></div>
  </div>

JQuery

<script type="text/javascript">

$(document).ready(function () {
 $("#btnComment").click(function () {
 $("#divmaincomment").append("<div style='margin-left:20px;  width:100%;'><textarea class='form-control' placeholder='Write a comment' rows=3></textarea>" +
                             "<div style='padding:5px;'>" +
                             "<a href='#divedit' onclick=edit();>edit</a>&nbsp;&nbsp;" +
                             "<a href='#divReply' onclick=Reply(1);>Reply</a>" +
                             "<div id='divChildComment1'></div>" +
                             "</div>"+
                             "</div>");
  return false;
 });
});
 
 function edit() {
  alert('Edit Button Clicked');
 }
 
   var n=1;
 function Reply(n) {
 $("#divChildComment"+n).append("<div style='margin-left:20px; width:100%;'><textarea class='form-control' placeholder='Write a comment' rows=3></textarea>" +
                                "<div style='padding:5px;'>" +
                                "<a href='#divedit' onclick=edit();>edit</a>&nbsp;&nbsp;" +
                                "<a href='#divReply' onclick=Reply("+n+1+");>Reply</a>" +
                                "<div id=divChildComment"+n+1+" style='margin-left:10px;'></div>" +
                                "</div>"+
                                "</div>");
        }

</script>

function edit() :

this function is used to display alert message which is make it clear that edit button working or not.


function Reply(n) :

this function is used to append textbox and edit and reply a link to child div that means we can add another reply to this comment this will go so on... and i.e nothing but a Hierarchical Comments

0 Komentar untuk "Create Hierarchical Comment Section in Asp.net by Using JQuery"

Back To Top