접힌 코멘트 페이 스북 (Facebook)

Question

축소 된 댓글을 만들려고합니다. 3 개의 댓글이 표시되고 댓글이 숨겨져 있습니다. CollapsiblePanelExtender를 사용했지만 그 도구가 적절하지 않다고 생각했습니다.

Answer 1

일에 영리했다 단지 아이디어 :

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를 주석 테이블에 바인딩합니다. 거기에 메모 아래에 표시됩니다 PagerSettings있는 gridview 있음을 알 수 있습니다. 그래서 NextPageText (ShowMore)에서 더 많은 의견을 표시하려면 PageSize 값을 늘릴 수 있습니다. 이렇게 :

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

참고 : 부분적인 포스트 백 장소에 대해서는 UpdatePanel 내에 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 

하고 페이스 북은 아약스 URL로 HREF 다른 의견을 얻을 것을 사용 일단 Ajax로로드되면 링크를 다른 주석으로 대체합니다. 그런 다음 태그의 href로 설정되기 때문에 자바 스크립트가 해제되어 있으면 정상적으로 성능이 저하됩니다.

그들은 이런 식