Question

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

我一切正常。我从我的数据库中获取所有正确的信息，然后使用asp Butteted List将其打印到屏幕上。我开始相信这是做这样的事情的错误方法。理想情况下，我只是想使用JavaScript和CSS来格式化所有内容，但它们都在带有列表项的div中返回。

现在，我的回报就是这样：

用户名评论.... 7/3/2001 05:45:02 PM

我希望它打印为：

用户名
评论...... 7/3/2001 05:45:02 PM

这是我的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]);
            }
        }

ASP.NET：

<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 word-wrap这有帮助，但仍然没有正确格式化。我走的是正确的道路吗？我感谢任何有用的建议

Answer 1

首先想到

最初，我认为你可以通过在你的li中使用br或put p强制换行：

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

或

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

在第一种情况下，将在文本之前和之后添加换行符。在第二个文本中，将在文本后添加换行符。

最好的方法是让你的李包含div：

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

然后将div作为block div标记，将以下内容放在css中为你的div：

display:block

理想情况下，这会使div的行为非常像p。 Div是首选，因为将来它允许您更多地控制更改布局而不是p或br。

但是 - 不能工作

然而，当你进行实验并且我发现时，asp：BulletedList对HTML标记进行编码，因此你没有获得换行符，而是获得编码的html： - ）

其他解决方案

要么不使用列表项，而是只为每个注释放入div，并对其进行格式化。差不多。这可以通过在div上的css中添加display属性并使其成为list-item：

来实现

display: list-item;

另一个必须是制作项目符号列表而不是编码html。但是，ASP.NET将li视为单个行项目，因此对HTML进行编码。我在周围搜索，包括StackOverflow，看起来似乎没有解决方法。因此，最好的办法是看看是否可以使用其他HTML元素而不是子弹列表。

编辑：我更新了根据其他评论显示实际代码，以便更清楚地说明解决方案。

Answer 2

假设您可以获得Comments的合并列表，基本上是错误的工具。

我建议ASP.net repeater

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>

您需要调整“用户”，“评论”和＆amp; “日期”，取决于Comment对象。

<强> C＃

List<Comment> comments = //Get Comments List
//Maybe: Fetcher.getImageComments(commentsConnectionString, imagePath);

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

计划B 如果您无法获得合并列表。

通过添加ID和runat=server

将HTML用作控件

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

<强> 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);

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();

}

默认情况下，您确定using System.Text作为使用语句的一部分，这是StringBuilder所必需的。

格式化C＃项目符号列表，如Facebook评论

2 个答案: