dynamically add <p> tag in asp.net for comment system

I am making a comment box for my webpage,
I have designed the form to take the user Name and comments and store it in the database table. I don’t know how to render that data on the page. Either by iterating on the table and subsequently creating paragraph on the page or by creating labels on the page.

I am using LINQ to SQL in C#.
Please tell me how to render the comments in database on web page or some link to tutorial

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

I recommend you learn about and how to use data controls which are designed to be used in cases where multiple rows can be returned and data is repeated in the same format, such as yours now (comments).
Example controls:

  • GridView
  • ListView
  • Repeater

Going into detail about each control here will not answer your question, but is important; it’s something you can research easily online anyway.

For this case, I recommend you use a ListView:

  • Add a ListView to your page – where you would like your comment box to be
  • Use an ItemTemplate tag inside the ListView to layout what format each individual comment will follow (so you would you a paragraph <p> tag around the comment. Where a column would be binded (e.g. actual comment), you use the code:

<%# Eval("ColumnName") %>

Just to make it clear, the code above runs at the server because it is an inline server tag: code in your .aspx file which is run by the server. This code is denoted by the percentage symbols at the beginning at end of the tag <% %>, which is highlighted in yellow by VS (Visual Studio). There are different types of inline server tags, shown by the first symbol. In this case, the hash # is used, which means the code in the tag is a binding expression. Meaning with all the data controls mentioned above, you will use this symbol to bind data with inline server tags.

For example (use a more semantic layout on your ItemTemplate, though):

<asp:ListView ID="LV_Comments" runat="server">
    <ItemTemplate>
        <b><%# Eval("Username") %></b>
        <br />
        <i><%# Eval("WhenPosted") %></i>
        <p><%# Eval("Comment") %></p>
    </ItemTemplate>        
</asp:ListView>
  • Now you just need to set its DataSource to your Comments table with L2S (LINQ to SQL). I recommend you create a method to do this and call the method on the Page_Load event. And call the method after adding a new comment to, as you would only bind the data if there is not a postback by default (see below).

Setting the DataSource example:

using (var db = new DataContext())
{
    LV_Comments.DataSource = from x in db.DT_Comments select new {
    Username = x.Name,
    x.Comment,
    WhenPosted = x.PostTime 
    };
    LV_Comments.DataBind();
}

You will need to change the names of the columns and DataContext obviously. Note where I have declared SomeName = x.ColumnName, I am just changing what I refer to the column name by in the ListView (this code: <%# Eval("SomeName") %>); you don’t have to do it, like you can see I haven’t with the Comment column.

How to use this code with a method and your events:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        ListViewMethod();
}

private void ListViewMethod()
{
    // ListView data binding code here
}

protected void NewCommentButton_Click(object sender, EventArgs e)
{
    // Your code to add new comment
    ListViewMethod();
}

Remember to find out more about when and how to use more features of these datacontrols. Like if you had no comments, you might want to tell the user this. So you would use an EmptyItemTemplate inside your ListView tag (but outside your ItemTemplate), like so:

<EmptyItemTemplate>
<i>No comments have been posted</i>
</EmptyItemTemplate>

Solution 2

let’s assume you have a CommentsTable having columns:

  • Id int
  • Username varchar(50)
  • Comment nvarchar(5000)
  • DateCreated DateTime

and your LinqToSql data context is myDataContext thn you can do this:

myDataContext db = new myDataContext();
var commentsData = db.CommentsTable.ToList();

string html=string.Empty;
foreach(var item in commentsData)
{
   html+="<div class='property-row'><div class='username'>"+item.Username+"</div>";
   html+="<div class='notice'>"+item.DateCreated.ToString("mm-dd-yyyy hh:mm")+"</div>"
   html+="<div class='comment'>"+item.Comment+"</div>";
}

Div1.InnerHtml= html;

now you can control look of your sections i.e. username row and the comments beneath it by suitably decorating the classes on the designer
i.e.

.property-row
{
    position:relative;
    width:100%;
    background-color:#CCCCCC;
    border:1px solid Black;
}
.username
{
   position:relative:
   padding:2px;
   top:2px;
   font-size:0.8em;
   color:#333333;
   text-decoration:underline;
}
.comment
{
   position:relative;
   padding:2px;
   margin:2px;
   font-size:1em;
   color:black;
}
.notice
{
   font-size:0.7em;
}

Solution 3

using HtmlGenericControl you can do that. See the example below

using System.Web.UI.HtmlControls;// add this namespace


HtmlGenericControl MyPtag = new HtmlGenericControl("p");
MyPtag.InnerText = "Your content inside P Tag";
Placeholder1.Controls.Add(MyPtag);

You must add this to a placeholder as shown above,Placeholder1.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply