Comment Hierarchy Comments Section Web Design in Asp.net


In this article i'm going to show you how to design Comment section in asp.net, before i continue let me tell you one thing this is continuation of my previous article in that Post i explained about Database and StoredProcedure's of Hierarchy Comment Section.
Now we see how to design comment section in asp.net, i'm going to design comment section like as i shown in below image.

Comment Hierarchy Comments Section Web Design in Asp.net

Create Login Page : HTML Markup

First, I'll show Login page design and functionality.

Login Page Design
<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

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

C# Coding : Login Button Click Event


with these button click event, first i'll check Username is already exist or not. If this User exist then i'll get complete data of this user then i check password with user entered password if its match then i'm going to redirect to Comment.aspx page otherwise display error message i.e "Invalid Username and Password".

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

This below html code is used to create Comment section TextBox and Comment Button as i shown in below image

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

1 2 3 4 5 6

0 Komentar untuk "Comment Hierarchy Comments Section Web Design in Asp.net"

Back To Top