使用jquery显示/隐藏asp datalist rowitem [英] Show/Hide asp datalist rowitem using jquery

问题描述

我有一个数据表填充表格中的评论[评论] ..

假设在特定时间表中有10行[评论] ..



我想只显示前三行[在desc]并隐藏其余部分。并显示加载更多按钮。当用户点击加载更多时，它应该再显示5行（3 + 5 =总共8行）。再次单击加载更多时，应再显示5个...这应该继续，直到显示所有行然后隐藏评论按钮应该出现！点击隐藏评论后，所有行都应该从数据列表中消失，只显示前三行！



你可以说，我需要一个类似于的评论框FB！但是我正在避免使用ajax调用来填充注释，因为我知道注释会很少，并且一次调用服务器的所有注释并隐藏并在客户端显示它们应该没有问题..

I have a datalist which is populating Comments from table [Comments]..
Suppose at a particular time there are 10 rows in the table [Comments]..

I want to show only top 3 rows [in desc] and hide the rest. and show a 'load more' button. When the user clicks on 'load more' it should display 5 more rows (3+5=8 rows in total).. Again on clicking 'load more' 5 more should display... This should continue till all the rows are displayed and then 'hide comments' button should show up! On clicking 'hide comments' all the rows should dissapear from the datalist and only top 3 rows should be displayed!

You can say, i need a comment box similar to fb! But I'm avoiding ajax call to populate the comments since I know there would be very less comments and there should be no problem in calling all the comments from server at once and hiding and showing them at client side..

<div class="container col-md-6">
                                <asp:DataList ID="DataListComments" runat="server" DataKeyField="Pk_Comment_Id" ItemStyle-Width="100%" DataSourceID="SqlDataSourceComments" RepeatLayout="Flow" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical">
                                    <FooterStyle HorizontalAlign="Center" Width="100%" BackColor="#CCCCCC" />
                                    <FooterTemplate>
                                        <asp:LinkButton ID="LoadMoreComments" runat="server" OnClientClick="return false;">Load More</asp:LinkButton>
                                    </FooterTemplate>
                                    <HeaderStyle BackColor="Black" HorizontalAlign="Center" Width="100%" Font-Bold="True" ForeColor="White" />
                                    <HeaderTemplate>
                                        <asp:Label ID="lblCommentsHeader" runat="server" ForeColor="White" Text="Comments" />
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <div class="row box">
                                            <div class="CommentImage col-md-4">
                                                <asp:HyperLink ID="HyperLink1" runat="server" Target="_blank"

                                                    NavigateUrl='<%# "Profile.aspx?uid=" + Eval("fk_User_Id")%>'>
                                                    <asp:Image ID="imgUserC" runat="server"

                                                        ImageUrl='<%# Eval("Profile_Pic") %>' CssClass="scaling-image img-thumbnail" />
                                                </asp:HyperLink>
                                            </div>
                                            <div class="CommentInfo col-md-8">

                                                <div class="CommentUsername col-xs-12 col-md-12">
                                                    <asp:HyperLink ID="linkUserProfile" runat="server" Target="_blank"

                                                        NavigateUrl='<%# "Profile.aspx?uid=" + Eval("fk_User_Id")%>'><%# Eval("Username") %></asp:HyperLink>
                                                    (<%# Eval("Date") %>)

                                                </div>

                                                <div class="col-md-12 justify">
                                                    <%# Eval("Description") %>
                                                </div>

                                            </div>
                                        </div>
                                        <asp:Label ID="Pk_Comment_IdLabel" runat="server" Text='<%# Eval("Pk_Comment_Id") %>' Visible="false" />
                                        <asp:Label ID="fk_Solution_IdLabel" runat="server" Text='<%# Eval("fk_Solution_Id") %>' Visible="false" />
                                        <asp:Label ID="fk_User_IdLabel" runat="server" Text='<%# Eval("fk_User_Id") %>' Visible="false" />
                                        <asp:Label ID="Is_ActiveLabel" runat="server" Text='<%# Eval("Is_Active") %>' Visible="false" />
                                    </ItemTemplate>
                                    <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                                </asp:DataList>
                                <asp:SqlDataSource ID="SqlDataSourceComments" runat="server" ConnectionString="<%$ ConnectionStrings:ConString %>" SelectCommand="SELECT C.Pk_Comment_Id, C.fk_Solution_Id, C.fk_User_Id, C.Description, C.Date, U.Pk_User_Id, U.First_Name, U.Last_Name, U.Username, U.Profile_Pic, U.Email, U.Password, U.Is_Active, C.fk_Solution_Id AS Expr1 FROM dml_np_Comment AS C INNER JOIN dml_np_User AS U ON C.fk_User_Id = U.Pk_User_Id WHERE (C.fk_Solution_Id = @SID)">
                                    <SelectParameters>
                                        <asp:ControlParameter ControlID="SolutionID" Name="SID" PropertyName="Text" />
                                    </SelectParameters>
                                </asp:SqlDataSource>

                                <!--Comment Box-->
                                <div class="row">
                                    <asp:LinkButton ID="btnAddComment" OnClientClick="return false;" runat="server" CssClass="btnAddCom">Add your comment</asp:LinkButton>

                                    <div class="addComment" id="AddCommentBox">
                                        <asp:TextBox ID="txtAddComment" TextMode="MultiLine" Rows="2" Width="100%" runat="server" CssClass="AddCommentText"></asp:TextBox>
                                        <asp:Button ID="btnSubmitComment" runat="server" Text="submit" CssClass="btnSubmitCom" />
                                    </div>
                                </div>

                                <!--End Comment Box-->

                            </div>

推荐答案

ConnectionStrings:ConString %>\" SelectCommand=\"SELECT C.Pk_Comment_Id, C.fk_Solution_Id, C.fk_User_Id, C.Description, C.Date, U.Pk_User_Id, U.First_Name, U.Last_Name, U.Username, U.Profile_Pic, U.Email, U.Password, U.Is_Active, C.fk_Solution_Id AS Expr1 FROM dml_np_Comment AS C INNER JOIN dml_np_User AS U ON C.fk_User_Id = U.Pk_User_Id WHERE (C.fk_Solution_Id = @SID)\">
<SelectParameters>
<asp:ControlParameter ControlID=\"SolutionID\" Name=\"SID\" PropertyName=\"Text\" />
</SelectParameters>
</asp:SqlDataSource>

<!--Comment Box-->
<div class=\"row\"> $ b$b <asp:LinkButton ID=\"btnAddComment\" OnClientClick=\"return false;\" runat=\"server\" CssClass=\"btnAddCom\">Add your comment</asp:LinkButton>

<div class=\"addComment\" id=\"AddCommentBox\">
<asp:TextBox ID=\"txtAddComment\" TextMode=\"MultiLine\" Rows=\"2\" Width=\"100%\" runat=\"server\" CssClass=\"AddCommentText\"></asp:TextBox>
<asp:Button ID=\"btnSubmitComment\" runat=\"server\" Text=\"submit\" CssClass=\"btnSubmitCom\" />
</div>
</div>

<!--End Comment Box-->

</div>

ConnectionStrings:ConString %>" SelectCommand="SELECT C.Pk_Comment_Id, C.fk_Solution_Id, C.fk_User_Id, C.Description, C.Date, U.Pk_User_Id, U.First_Name, U.Last_Name, U.Username, U.Profile_Pic, U.Email, U.Password, U.Is_Active, C.fk_Solution_Id AS Expr1 FROM dml_np_Comment AS C INNER JOIN dml_np_User AS U ON C.fk_User_Id = U.Pk_User_Id WHERE (C.fk_Solution_Id = @SID)"> <SelectParameters> <asp:ControlParameter ControlID="SolutionID" Name="SID" PropertyName="Text" /> </SelectParameters> </asp:SqlDataSource> <!--Comment Box--> <div class="row"> <asp:LinkButton ID="btnAddComment" OnClientClick="return false;" runat="server" CssClass="btnAddCom">Add your comment</asp:LinkButton> <div class="addComment" id="AddCommentBox"> <asp:TextBox ID="txtAddComment" TextMode="MultiLine" Rows="2" Width="100%" runat="server" CssClass="AddCommentText"></asp:TextBox> <asp:Button ID="btnSubmitComment" runat="server" Text="submit" CssClass="btnSubmitCom" /> </div> </div> <!--End Comment Box--> </div>

这篇关于使用jquery显示/隐藏asp datalist rowitem的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！