Display nested replies for a comments in a blog?

Question

I'm developing a blog that has a section for getting some comments and replies from the users. The first part is of my code for getting the comments and replies is the following one:

 

C# Code:

var a = commentBLL.GetAll(BlogID); // Getting the list of comments in a blog
rp_MainComments.DataSource = a; // the outer repeater binding
rp_MainComments.DataBind();
-- this is the onitemdatabound function called from outer repeater --
protected void rp_MainComments_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
LinkButton btn = e.Item.FindControl("btn_Comment_Reply") as LinkButton;
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(btn);
HiddenField lt = (HiddenField)e.Item.FindControl("hf_Main_CommentID");
Repeater rpcommentreply = (Repeater)e.Item.FindControl("rp_Comment_Reply");
Panel panel_Comment_Reply = e.Item.FindControl("panel_Comment_Reply") as Panel;
if (!string.IsNullOrEmpty(lt.Value))
{
var b = commentBLL.GetByCommentID(Convert.ToInt32(lt.Value));
rpcommentreply.DataSource = b;
rpcommentreply.DataBind();
panel_Comment_Reply.Visible = false;
}
}
}

aspx Code:

<asp:Repeater ID="rp_MainComments" OnItemDataBound="rp_MainComments_ItemDataBound" OnItemCommand="rp_MainComments_ItemCommand" runat="server">
<ItemTemplate>
<asp:HiddenField ID="hf_Main_CommentID" runat="server" Value='<%# Eval("Comment_Id") %>' />
<ul class="comments">
<li>
<div class="comment">
<div class="img-thumbnail d-none d-sm-block">
<%--<asp:Image ID="Image_7" CssClass="avatar" runat="server" ImageUrl="http://placehold.it/40x40" />--%>
<i class="fa fa-user fa-fw fa-5x"></i>
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong><%# Eval("Name") %></strong>
<span class="float-right">
<span>
<asp:LinkButton ID="btn_Comment_Reply" Text="Reply" ClientIDMode="AutoID" runat="server" OnClick="btn_Comment_Reply_Click" CommandName="Edit" CommandArgument='<%# Eval("Comment_Id") %>' /></span>
</span>
</span>
<p><%# Eval("Message") %></p>
<span class="date float-right">
<%# Eval("Comment_Date") %></span>
</div>
</div>
</li>
<li>
<asp:HiddenField ID="hf_PanelValue" Value='<%# Container.ItemIndex %>' runat="server" />
<asp:Repeater ID="rp_Comment_Reply" OnItemCommand="rp_Comment_Reply_ItemCommand" runat="server">
<ItemTemplate>
<ul class="comments reply" id="commentreply">
<li>
<div class="comment">
<div class="img-thumbnail d-none d-sm-block">
<%--<asp:Image ID="Image_8" CssClass="avatar" runat="server" ImageUrl="http://placehold.it/40x40" />--%>
<i class="fa fa-user fa-5x fa-fw"></i>
</div>
<div class="comment-block">
<div class="comment-arrow"></div>
<span class="comment-by">
<strong><%# Eval("Name") %></strong>
<span class="float-right">
<span>
<asp:LinkButton ID="btn_Reply" Text="Reply" ClientIDMode="AutoID" runat="server" OnClick="btn_Reply_Click" CommandName="Edit" CommandArgument='<%# Eval("Parent_Id") %>' /></span></span>
</span>
<p><%# Eval("Message") %></p>
<span class="date float-right"><%# Eval("Comment_Date") %></span>
</div>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>

Output:

 

Comment one

   reply one

   reply two

   reply three

comment two

   reply one

   reply two

 

But i need like this:

 

Comment one

   reply one

      reply one

      reply two

   reply three

      reply one

      reply two

comment two

   reply one

      reply one

   reply two

 

Now, I would like to show the nested replies as shown above

 

how is it possible?