将C#项目符号列表格式化为Facebooks注释

我有一个要求，我需要在网页上显示评论，就像Facebook一样（至少格式是这样）。我返回3件事：发表评论的用户、实际评论和发布日期

我一切都很好。我从数据库中获取所有正确的信息，并使用asp对接列表将其打印到屏幕上。我开始相信这样做是不正确的。理想情况下，我只想使用JavaScript和CSS格式化所有内容，但所有内容都返回到带有列表项的

div

现在，我的回报是：

用户名注释。。。。2001年7月3日下午5:45:02

我希望它打印为：

用户名
评论
2001年7月3日下午5:45:02

这是我的c:

        List<String> theComments = Fetcher.getImageComments(commentsConnectionString, imagePath, 2);
        List<String> theUser = Fetcher.getImageComments(commentsConnectionString, imagePath, 0);
        List<String> theDate = Fetcher.getImageComments(commentsConnectionString, imagePath, 3);


        if (theComments.Count >= 0)
        {


            for (var i = 0; i < theComments.Count; i++)
            {

                commentsList.Items.Add(theUser[i] + "\n" + theComments[i] + "\n" + theDate[i]);
            }
        }

<div id="commentsArea">
    <span class="style1">Comments</span><br />
    <asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Width="501px" 
        Height="50px"></asp:TextBox>
    <br />
    <asp:ImageButton ID="btnPostComment" runat="server" ImageUrl="~/Images/Post.png" onclick="btnPostComment_Click" />
    <br />
    <br />
    <asp:BulletedList ID="commentsList" runat="server" Font-Names="Calibri" Style="text-align: center" Width="501px">
    </asp:BulletedList>
</div>

列出comments=Fetcher.getImageComments（commentsConnectionString，imagePath，2）；
列出user=Fetcher.getImageComments（commentsConnectionString，imagePath，0）；
列出日期=Fetcher.getImageComments（commentsConnectionString，imagePath，3）；
如果（comments.Count>=0）
{
对于（变量i=0；i

ASP.NET:

        List<String> theComments = Fetcher.getImageComments(commentsConnectionString, imagePath, 2);
        List<String> theUser = Fetcher.getImageComments(commentsConnectionString, imagePath, 0);
        List<String> theDate = Fetcher.getImageComments(commentsConnectionString, imagePath, 3);


        if (theComments.Count >= 0)
        {


            for (var i = 0; i < theComments.Count; i++)
            {

                commentsList.Items.Add(theUser[i] + "\n" + theComments[i] + "\n" + theDate[i]);
            }
        }

<div id="commentsArea">
    <span class="style1">Comments</span><br />
    <asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Width="501px" 
        Height="50px"></asp:TextBox>
    <br />
    <asp:ImageButton ID="btnPostComment" runat="server" ImageUrl="~/Images/Post.png" onclick="btnPostComment_Click" />
    <br />
    <br />
    <asp:BulletedList ID="commentsList" runat="server" Font-Names="Calibri" Style="text-align: center" Width="501px">
    </asp:BulletedList>
</div>

评论

---

我试过使用

Environment.NewLine

和

\n

但是运气不好。我正在使用CSS来

wordwrapp

，这很有帮助，但格式仍然不正确。我走的路对吗？我很感激任何有帮助的建议

首先想到的

最初，我认为可以通过使用br或在li中添加p来强制换行：

commentsList.Items.Add("<p>" + theUser[i] + "</p><p>" + theComments[i] + "</p><p>" + theDate[i] + "</p>");

理想情况下，这将迫使div的行为类似于p。Div更可取，因为将来它允许您对更改布局进行更多控制，而不是p或br

但是-不起作用

但是，正如您所做的实验和我所发现的，asp:BulletedList对HTML标记进行编码，因此您不会得到换行符，而是得到编码的HTML:-）

其他解决方案

或者不使用列表项，而是为每个注释输入div，并格式化它。差不多。这可以通过在div的css中添加display属性并使其成为列表项来实现：

display: list-item;

另一种方法是只制作项目符号列表，而不是编码html。然而，ASP.NET将li视为一个单行项，因此对HTML进行编码。我到处搜索，包括StackOverflow，看起来没有解决方法。因此，最好的办法是看看是否可以使用另一个HTML元素而不是项目符号列表

---

编辑：我更新了以显示基于附加注释的实际代码，因此它将提供关于解决方案的更多说明。

假设您可以获得一个综合的

注释列表，基本上是错误的作业工具

我想推荐一个

ASPX:

<asp:Repeater ID="rptComments" runat="server">
    <HeaderTemplate>
        <ul class="comments">
    </HeaderTemplate>
    <ItemTemplate>
        <li>
            <div class="user"><%# DataBinder.Eval(Container.DataItem, "User") %></div>                                                
            <div class="comment"><%# DataBinder.Eval(Container.DataItem, "Comment") %></div>
            <div class="date"><%# DataBinder.Eval(Container.DataItem, "Date") %></div>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

如果无法获得综合列表，请计划B

通过添加ID和
runat=server

ASPX

<ul id="lstComments" runat="server">
    <li id="lstTemplate" runat="server" visible="false">
        <div class="user">{0}</div>
        <div class="comment">{1}</div>
        <div class="date">{2}</div>
    </li>
</ul>  



{0}
{1}
{2}



C#

列出comments=Fetcher.getImageComments（commentsConnectionString，imagePath，2）；
列出user=Fetcher.getImageComments（commentsConnectionString，imagePath，0）；
列出日期=Fetcher.getImageComments（commentsConnectionString，imagePath，3）；
字符串模板=lstemplate.InnerHtml；
StringBuilder innerItems=新建StringBuilder（）；
如果（comments.Count>=0）
{
对于（变量i=0；i

确保您有
使用System.Text
作为使用语句的一部分，这是
StringBuilder
需要的，但是
li
是整个字符串。3个独立的组件没有分开
li
“因此您可以在li中添加br、p或div，不是吗？我还尝试用HTML中的C#包装我的返回，但没有成功。它只是将HTML作为文本打印到字符串中。您是否建议这样做：
commentsList.Items.Add（用户[i]+“
”+元素[i]+“
”+日期[i]）我认为您最好不要使用列表项。我到处搜索（你们也可以），似乎列表项将任何文本都视为一个单行项（我也没想到）。如果有人知道一个解决方法，他们可能会找到，但是，在同一个问题上还有另一个关于stackoverflow的问题，但没有回答：你能得到一个
注释列表，而不是三个字符串列表吗？然后你可以使用一个中继器（）并绑定到它。非常感谢你，乔恩。非常好的指导，您对这两种方法（方案a和方案b）都做了透彻的解释。这解决了我的问题。
List<Comment> comments = //Get Comments List
//Maybe: Fetcher.getImageComments(commentsConnectionString, imagePath);

rptComments.DataSource = comments;
rptComments.DataBind();

<ul id="lstComments" runat="server">
    <li id="lstTemplate" runat="server" visible="false">
        <div class="user">{0}</div>
        <div class="comment">{1}</div>
        <div class="date">{2}</div>
    </li>
</ul>  

List<String> theComments = Fetcher.getImageComments(commentsConnectionString, imagePath, 2);
List<String> theUser = Fetcher.getImageComments(commentsConnectionString, imagePath, 0);
List<String> theDate = Fetcher.getImageComments(commentsConnectionString, imagePath, 3);

string template = lstTemplate.InnerHtml;
StringBuilder innerItems = new StringBuilder();

if (theComments.Count >= 0)
{
   for (var i = 0; i < theComments.Count; i++)
   {
      innerItems.AppendFormat(template, theUser[i], theComment[i], theDate[i]);
   }

   lstComments.InnerHtml = innerItems.ToString();

}