Designing an Interactive Comment Section in ASP.NET

In this article, we'll delve into the creation of a dynamic comment section in ASP.NET. Building upon our previous discussions on database design and stored procedures for a hierarchy comment section, let's now focus on the frontend – designing the comment section itself.

Create Login Page : HTML Markup

Let's start by designing the login page, an essential step in user interaction.

<table style="border:1px solid #999;">
 <tr>
  <th colspan="3" style="background-color:#808080; color:#fff; text-align:left;padding:3px 5px;">Login Page</th>
 </tr>
 <tr>
  <td>Username : </td>
  <td>
   <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
  </td>
 </tr>
 <tr>
  <td>Password :</td>
  <td>
   <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
  </td>
 </tr>
 <tr>
  <td colspan="3">
   <asp:Button ID="btnLogin" runat="server" Text="Login" style="padding:3px 5px; background-color:#ff6a00; color:#000000; border:1px solid #ff6a00;" OnClick="btnLogin_Click" />
  </td>
 </tr>
</table>
<asp:Label ID="lblError" runat="server"></asp:Label>

C# Coding : Add Namespace

Include the necessary namespaces for database interaction.

using System.Data;
using System.Data.SqlClient;

C# Coding : Login Button Click Event

Check the user's credentials and redirect to the comment section if valid.

protected void btnLogin_Click(object sender, EventArgs e)
{
 SqlConnection con = new SqlConnection("Data Source=.; User ID=sa; Password=tiger; DataBase=Comment;");
 using (SqlCommand cmd = new SqlCommand("spCheckUserCredentials", con))
 {
  cmd.CommandType = CommandType.StoredProcedure;
  cmd.Parameters.AddWithValue("@Username", txtUsername.Text);
  SqlDataAdapter da = new SqlDataAdapter(cmd);
  DataSet ds = new DataSet();
  da.Fill(ds);
  if (ds.Tables[0].Rows.Count > 0)
  {
   if (ds.Tables[0].Rows[0]["Password"].ToString() == txtPassword.Text)
   {
    Response.Redirect("Comment.aspx?Username=" + txtUsername.Text);
   }
   else
   {
    lblError.Text = "Invalid Username and Password";
   }
  }
 else
 {
  lblError.Text = "Invalid Username and Password";
 }
 }
}

Create Comment Page : HTML Markup

Now, let's design the comment section with a text box and a comment button.

<div style="padding:15px 20px; width:560px;">
<asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" 
Width="560px" Height="60px"></asp:TextBox>
<asp:Image ID="Image1" runat="server" 
ImageUrl="https://myspace.com/common/images/user.png" 
style="width:30px; height:30px; border-radius:50%;" />
<asp:Button ID="btnComment" Text="Comment" runat="server" 
style="background-color:#4800ff; border:1px solid #4800ff; padding:7px 25px; border-radius:5px; 
color:#fff; float:right;" OnClick="btnComment_Click" />
    </div>

This HTML code establishes the foundation for our interactive comment section. In the next part, we will dive into the backend logic for processing and displaying comments.

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