Post
Ask Question

How To Create A Facebook-like Comment Box Session In ASP.NET

Step 1

To Create the comment box, we need to add some tables and stored procedures.

Create a UserTable:
  1.  CREATE TABLE [dbo].[UserTable](  
  2.     [UserName] [varchar](50) NOT NULL,  
  3.     [Password] [varchar](50) NULL,  
  4.  CONSTRAINT [PK_UserTable] PRIMARY KEY CLUSTERED   
  5. (  
  6.     [UserName] ASC  
  7. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  8. ) ON [PRIMARY]  
  9.   
  10. GO  

Create a ParentComment Table:

  1.  CREATE TABLE [dbo].[ParentComment](  
  2.     [CommentID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [UserName] [varchar](50) NULL,  
  4.     [CommentMessage] [varchar](300) NULL,  
  5.     [CommentDate] [date] NULL,  
  6.  CONSTRAINT [PK_ParentComment] PRIMARY KEY CLUSTERED   
  7. (  
  8.     [CommentID] ASC  
  9. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  10. ) ON [PRIMARY]  
  11.   
  12. GO  
  13.   
  14. SET ANSI_PADDING OFF  
  15. GO  
  16.   
  17. ALTER TABLE [dbo].[ParentComment]  WITH CHECK ADD  CONSTRAINT [FK_ParentComment_UserTable] FOREIGN KEY([UserName])  
  18. REFERENCES [dbo].[UserTable] ([UserName])  
  19. GO  
  20.   
  21. ALTER TABLE [dbo].[ParentComment] CHECK CONSTRAINT [FK_ParentComment_UserTable]  
  22. GO  
Create a ChildComment Table:
  1.  CREATE TABLE [dbo].[ChildComment](  
  2.     [CommentID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [UserName] [varchar](50) NULL,  
  4.     [CommentMessage] [varchar](300) NULL,  
  5.     [CommentDate] [date] NULL,  
  6.     [ParebCommentID] [int] NULL,  
  7.  CONSTRAINT [PK_ChildComment] PRIMARY KEY CLUSTERED   
  8. (  
  9.     [CommentID] ASC  
  10. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  11. ) ON [PRIMARY]  
  12.   
  13. GO  
  14.   
  15. SET ANSI_PADDING OFF  
  16. GO  
  17.   
  18. ALTER TABLE [dbo].[ChildComment]  WITH CHECK ADD  CONSTRAINT [FK_ChildComment_ParentComment] FOREIGN KEY([UserName])  
  19. REFERENCES [dbo].[UserTable] ([UserName])  
  20. GO  
  21.   
  22. ALTER TABLE [dbo].[ChildComment] CHECK CONSTRAINT [FK_ChildComment_ParentComment]  
  23. GO  
  24.   
  25. ALTER TABLE [dbo].[ChildComment]  WITH CHECK ADD  CONSTRAINT [FK_ChildCommentID_ChildCommentID] FOREIGN KEY([ParebCommentID])  
  26. REFERENCES [dbo].[ParentComment] ([CommentID])  
  27. GO  
  28.   
  29. ALTER TABLE [dbo].[ChildComment] CHECK CONSTRAINT [FK_ChildCommentID_ChildCommentID]  
  30. GO   
Step 2

Create a stored procedure for comments session so as to check credentials of the User.
  1. create proc spCheckUserCredentials  
  2. (@UserName varchar(25))  
  3. as  
  4. Begin  
  5. Select *from UserTable where UserName=@UserName   
  6. End   

Insert comment for ParentComment.

  1. create proc spCommentInsert  
  2. (@UserName varchar(25),  
  3. @CommanetMessage varchar(300))  
  4. as  
  5. Begin  
  6. Insert into ParentComment(UserName,CommentMessage,CommentDate)values(@UserName,@CommanetMessage,GETDATE())  
  7. End   

Insert reply comment for ChildComment.

  1.  create proc spCommentReplyInsert(@UserName varchar(25),  
  2. @CommentMessage varchar(300),  
  3. @ParentCommentID int)  
  4. as  
  5. Begin  
  6. Insert into ChildComment(UserName,CommentMessage,CommentDate,ParebCommentID)  
  7. values(@UserName,@CommentMessage,GETDATE(),@ParentCommentID)  
  8. End  

Get Data Comment from database.

  1.  create Proc spGetParetComment  
  2. as  
  3. Begin  
  4. Select *from ParentComment  
  5. End  
  6. create proc spGetParentCommentByParentCommnetID(@ParentCommnetID int)  
  7. as  
  8. Begin  
  9. select *from ChildComment where ParebCommentID=@ParentCommnetID  
  10. End  
Step 3

Create a webform for UserLogin.
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.       
  5.         <table class="auto-style1">  
  6.             <tr>  
  7.                 <td class="auto-style2">Login Page</td>  
  8.                 <td> </td>  
  9.             </tr>  
  10.             <tr>  
  11.                 <td class="auto-style2">UserName</td>  
  12.                 <td>  
  13.                     <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
  14.                 </td>  
  15.             </tr>  
  16.             <tr>  
  17.                 <td class="auto-style2">Password</td>  
  18.                 <td>  
  19.                     <asp:TextBox ID="TextBox1" TextMode="Password" runat="server"></asp:TextBox>  
  20.                 </td>  
  21.             </tr>  
  22.             <tr>  
  23.                 <td class="auto-style2">  
  24.                     <asp:Button ID="Button1" runat="server" Height="31px" Text="LOGIN" Width="115px" OnClick="Button1_Click" />  
  25.                 </td>  
  26.                 <td> </td>  
  27.             </tr>  
  28.         </table>  
  29.         <asp:Label ID="Label1" runat="server"  ></asp:Label>  
  30.         <asp:LinkButton runat="server" ID="lnkRegistor" Text="Registration" PostBackUrl="~/Default3.aspx"></asp:LinkButton>   
  31.     </div>  
  32.     </form>  
  33. </body>  

Codebehind File

  1.  using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8.   
  9.   
  10. using System.Data;  
  11. using System.Data.SqlClient;  
  12.   
  13. public partial class _Default : System.Web.UI.Page  
  14. {  
  15.     protected void Page_Load(object sender, EventArgs e)  
  16.     {  
  17.   
  18.     }  
  19.     protected void Button1_Click(object sender, EventArgs e)  
  20.     {  
  21.         SqlConnection con = new SqlConnection("Data Source=DEEPAK-PC;Initial Catalog=comment;Integrated Security=True");  
  22.         using (SqlCommand cmd = new SqlCommand("spCheckUserCredentials", con))  
  23.         {  
  24.             cmd.CommandType = CommandType.StoredProcedure;  
  25.             cmd.Parameters.AddWithValue("@UserName", TextBox2.Text);  
  26.             SqlDataAdapter da = new SqlDataAdapter(cmd);  
  27.             DataSet ds = new DataSet();  
  28.             da.Fill(ds);  
  29.             if (ds.Tables[0].Rows.Count > 0)  
  30.             {  
  31.                 if (ds.Tables[0].Rows[0]["Password"].ToString() == TextBox1.Text)  
  32.                 {  
  33.                     Response.Redirect("Default2.aspx?User_name=" + TextBox2.Text);  
  34.                 }  
  35.                 else  
  36.                 {  
  37.                     Label1.Text = "Invailid password and Username";  
  38.                 }  
  39.             }  
  40.             else  
  41.             {  
  42.                 Label1.Text = "Invailid password and Username";  
  43.             }  
  44.         }  
  45.   
  46.     }  
  47. }  

Step 4

Create a comment session webform.
 
Head section 
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>    
  2.        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   

Body section

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div >  
  4.         <div class="container" style=" padding:15px 20px; width:auto; ">  
  5.         <div class="row">  
  6.             <div class="col-md-6">  
  7.                 <asp:TextBox ID="textComment" runat="server" CssClass="input-group" TextMode="MultiLine" Width="300px"  Height="60px" Rows="15" ></asp:TextBox>  
  8. <%--        <asp:Image ID="Image1" runat="server" ImageUrl="~/Image/h.jpg"  Width="30px" Height="30px"  style="border:1px solid #4800ff;" />--%>  
  9. <br/>        <asp:Button ID="btnCommentpublilsh" CssClass="btn-sm btn-default"   Text="Comment" runat="server"  OnClick="btnCommentPublish_Click" />  
  10.             </div>  
  11.             <div class="col-md-6"></div>  
  12.         </div>  
  13.       
  14.   
  15.     </div>  
  16.   
  17.      <%--Comment Session--%>  
  18.         <asp:GridView ID="GridView1" BorderStyle="None" CssClass="table-responsive" Width="100%"  GridLines="None" runat="server" AutoGenerateColumns="False" ShowHeader="False">  
  19.             <Columns>  
  20.                    
  21.                 <asp:BoundField DataField="ParentCommentID"  Visible="false" HeaderText="ParentCommentID" />  
  22.   
  23.                 <asp:TemplateField HeaderText="ParentMessage">  
  24.                     <ItemTemplate>  
  25.                         <div class="container">  
  26.                             <div class="row">  
  27.                                 <div class="col-lg-12">  
  28.                                      <table>  
  29.                                          <tr>  
  30.                                     <td style="width:55px;vertical-align:top;padding-top:10px">  
  31.                                     <asp:Label ID="lblParentDate" runat="server" Text='<%#Bind("ParanetCommentDate") %>'></asp:Label>  
  32.                                         <br />   
  33.                                             <asp:Image ID="ImageParent" runat="server" style="width:25px;height:25px;" ImageUrl="~/Image/student-512.png" />  
  34.                                     <asp:Label ID="Label4" Font-Bold="true" ForeColor="#cc0066" runat="server" Text='<%# Bind("ParentUserName") %>'></asp:Label>   
  35.                                            
  36.                                     </td>  
  37.                                           </tr>  
  38.                                                  
  39.                                          <tr>  
  40.                                          <td><asp:Label ID="Label1" runat="server" Text='<%# Bind("ParentCommentMessage") %>'></asp:Label></td>       
  41.                                          </tr>  
  42.                                          <tr >  
  43.                                              <td><asp:Label ID="lb1COmmenId" runat="server" Visible="false" Text='<%#Eval("ParentCommentID") %>'></asp:Label>  
  44.                                            
  45.                                                          <a class="link" id='lnkReplyParent<%#Eval("ParentCommentID") %>' href="javascript:void(0)" onclick="showReply(<%#Eval("ParentCommentID") %>);return false;">Reply</a>   
  46.                                         <a class="link" id="lnkCancle" href="javascript:void(0)" onclick="closeReply(<%#Eval("ParentCommentID") %>);return false;">Cancle</a>  
  47.                                         <div id='divReply<%#Eval("ParentCommentID") %>' style="display:none;margin-top:5px;">  
  48.                                             <asp:TextBox ID="textCommentReplyParent" CssClass="input-group" runat="server" Width="300px" TextMode="MultiLine" ></asp:TextBox>  
  49.                                             <br />  
  50.                                             <asp:Button ID="btnReplyParent" runat="server" Text="Reply" CssClass="input-group btn"  OnClick="btnReplyParent_Click" /></div>  
  51.                                              </td>  
  52.                                          </tr>  
  53.                                             
  54.                                          <tr >  
  55.                                               <td style="padding-left:100px;border-bottom:1px solid #4cff00; ">  
  56.                                                  <br />  
  57.                                                     
  58.                                      <asp:GridView ID="GridView2" BorderStyle="None" GridLines="None" runat="server" AutoGenerateColumns="False" DataSource='<%# Bind("Empl") %>' ShowHeader="False">  
  59.                             <Columns>  
  60.                                 <asp:TemplateField HeaderText="UserName">  
  61.                                     <ItemTemplate>  
  62.                                         <asp:Label ID="lblChildDate" runat="server" Text='<%#Bind("ChilCommentDate") %>'></asp:Label>  
  63.                                         <br />  
  64.                                         <asp:Image ID="ImageParent" runat="server" style="width:25px;height:25px;" ImageUrl="~/Image/student-512.png" />  
  65.                                         <asp:Label ID="Label2" runat="server" Font-Bold="true" ForeColor="#ff0066" Text='<%#Bind("UserName") %>'></asp:Label>  
  66.                                         <br />  
  67.                                         <asp:Label ID="Label3" runat="server" Text='<%# Bind("ChildcommentMessage") %>'></asp:Label>  
  68.                                         <hr />  
  69.                                           
  70.                                     </ItemTemplate>  
  71.                                 </asp:TemplateField>  
  72.                                    
  73.                             </Columns>  
  74.                         </asp:GridView>   
  75.                          
  76.                                                          <br />  
  77.                                                             
  78.                                                
  79.                                            
  80.                                                         
  81.                                                    
  82.                                              </td>  
  83.                                          </tr>  
  84.                                      </table>  
  85.                                 </div>  
  86.                                    
  87.                             </div>  
  88.                         </div>  
  89.                           
  90.                            
  91.                           
  92.                        
  93.                          
  94.                           
  95.                     </ItemTemplate>  
  96.                 </asp:TemplateField>  
  97.             </Columns>  
  98.         </asp:GridView>  
  99.         <br />  
  100.         <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetAllDepartmentsandEmployee" TypeName="ParentCommentIDAcess"></asp:ObjectDataSource>  
  101.         <br />  
  102.       
  103.     </div>  
  104.            
  105.     <script type="text/javascript">  
  106.         //GridView Comment  
  107.         function showReply(n) {  
  108.             $("#divReply" + n).show();  
  109.             return false;  
  110.         }  
  111.         function closeReply(n) {  
  112.             $("#divReply" + n).hide();  
  113.             return false;  
  114.         }  
  115.            
  116.            
  117.        </script>  
  118.     </form>  
  119.   
  120. </body>   

Code Behind File

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. using System.Configuration;  
  10.   
  11. public partial class Default2 : System.Web.UI.Page  
  12. {  
  13.     SqlConnection con = new SqlConnection("Data Source=DEEPAK-PC;Initial Catalog=comment;Integrated Security=True");  
  14.     protected void Page_Load(object sender, EventArgs e)  
  15.     {  
  16.         GridView1.DataSource = ParentCommentIDAcess.GetAllDepartmentsandEmployee();  
  17.         GridView1.DataBind();  
  18.     }  
  19.     protected void btnCommentPublish_Click(object sender, EventArgs e)  
  20.     {  
  21.         SqlCommand cmd = new SqlCommand("spCommentInsert", con);  
  22.         cmd.CommandType = CommandType.StoredProcedure;  
  23.         cmd.Parameters.AddWithValue("@UserName", Request.QueryString["User_name"].ToString());  
  24.         cmd.Parameters.AddWithValue("@CommanetMessage", textComment.Text);  
  25.         con.Open();  
  26.         cmd.ExecuteNonQuery();  
  27.         con.Close();  
  28.         GridView1.DataSource = ParentCommentIDAcess.GetAllDepartmentsandEmployee();  
  29.         GridView1.DataBind();  
  30.     }  
  31.     protected void btnReplyParent_Click(object sender, EventArgs e)  
  32.     {  
  33.         GridViewRow row = (sender as Button).NamingContainer as GridViewRow;  
  34.         Label lblchildCommentid = (Label)row.FindControl("lb1COmmenId");  
  35.         TextBox txtCommentParent = (TextBox)row.FindControl("textCommentReplyParent");  
  36.         SqlCommand cmd = new SqlCommand("spCommentReplyInsert", con);  
  37.         cmd.CommandType = CommandType.StoredProcedure;  
  38.         cmd.Parameters.AddWithValue("@UserName", Request.QueryString["User_name"].ToString());  
  39.         cmd.Parameters.AddWithValue("@CommentMessage", txtCommentParent.Text);  
  40.         cmd.Parameters.AddWithValue("@ParentCommentID", lblchildCommentid.Text);  
  41.         con.Open();  
  42.         cmd.ExecuteNonQuery();  
  43.         con.Close();  
  44.   
  45.         GridView1.DataSource = ParentCommentIDAcess.GetAllDepartmentsandEmployee();  
  46.         GridView1.DataBind();  
  47.   
  48.     }  
  49. }  

Parent Comment is a message in the comment box 

  
 

Reply to a parent comment with a child comment.


 
 Show Parent and Child Comment:
 
 
 
Thank you for you reading this blog.