Question

我正在尝试创建一个折叠评论像Facebook一样显示3条评论，其余隐藏显示他们的计数。我想使用CollapsiblePanelExtender但它不是正确的工具。

Answer 1

只是一个想法：

第一项任务：

<asp:LinkButton ID="btnmakecomment" class="linkhover" Font-Size="11px" runat="server">Comments</asp:LinkButton>

 <asp:Panel ID="pnlMComment" CssClass="" runat="server" Style="overflow: visible; height:0">
  <div class="commentbox">
   <asp:TextBox ID="MakeComments" CssClass="unwatermarkedcomment" runat="server" Width="90%" TextMode="MultiLine"></asp:TextBox>
   <asp:Button ID="btnPost" CssClass="submitButton" Text="Comment" runat="server" CommandName="Comment" onclick="Button1_Click" />
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxScrapWme" runat="server" TargetControlID="MakeComments"  WatermarkText=" Make Comment" WatermarkCssClass="watermarked" />
    </div>
 </asp:Panel>

<ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="Server" TargetControlID="pnlMComment"  Collapsed="true" CollapsedText="Comment" ExpandedText="" TextLabelID="btnmakecomment"     ExpandControlID="btnmakecomment" CollapseControlID="btnmakecomment" SuppressPostBack="true" />

所以，上面的代码是两件事：

  1. collapsible Panel will appear with textbox and button after clicking on the btnmakecomment.
  2. on Button1_Click event update your comment table in database.

第二项任务：

<asp:GridView ID="CommentGridView" runat="server" AutoGenerateColumns="false" ShowHeader="false" ShowFooter="true" Width="90%" AllowPaging="True" PageSize="3"  GridLines="None">
   <Columns>
      <asp:TemplateField>
            <ItemTemplate>
              <table class="tblcomment1">
                 <tr>
                    <td>
                        <%--show your comments here--%>
                          <%--PageSize of the GridView has the value 3 so only 3 row will be display first--%>
                    </td>
                    </tr>
               </table>
       </ItemTemplate>
    </asp:TemplateField>
  </Columns>
  <PagerSettings Mode="NextPrevious" NextPageText="Show More" FirstPageText="Show More"
     LastPageText="Show More" Position="Bottom" />
</asp:GridView>

现在将CommentGridView与注释表绑定。您可以注意到gridview中有一个PagerSettings会出现在注释下方，因此，在NextPageText（ShowMore）上，您可以增加PageSize值以显示更多注释。像这样：

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    int i = CommentGridView.PageSize;
    CommentGridView.PageSize = i + 5;
    CommentGridView.DataSource = dtscrab;
    CommentGridView.DataBind();
}

注意：对于部分回发，将UpdateGnel内的CommentGridView放在其中。

Answer 2

我曾经写过一些代码来做这件事，我发现为了按照他们的方式去做，你需要有点细致。

如果一个帖子中只有1或2个注释，那么只需将它们全部加载到列表中即可。

如果帖子中有多条评论，您可以创建一个链接，然后立即使用一些较新的评论：

row 1: <a href="/posts/<post_id>" class="loadMore">show all</a>
row 2: new comment
row 3: newer comment

然后facebook使用该href作为ajax url来获取其他注释，一旦它加载到ajax中，它就会用其他注释替换该链接。然后因为它设置为a标签的href，如果关闭javascript，它也会优雅地降级。

他们这样做很聪明

倒塌的评论喜欢Facebook

2 个答案: