restrict data rows in datalist and add a load more button in the footer

Question

datalist is as follows:

<asp:DataList ID="DataListComments" runat="server" 
                                        DataKeyField="Pk_Comment_Id" DataSourceID="SqlDataSourceComments" Width="100%">
                                        <HeaderStyle BackColor="Gray" HorizontalAlign="Center" />
                                        <HeaderTemplate>
                                            <asp:Label ID="Label1" runat="server" BackColor="Gray" 
                                                ForeColor="White" Text="Comments" Width="100%" />
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <div class="CommentBox">
                                                <div class="CommentImage">
                                                    <asp:HyperLink ID="HyperLink1" runat="server"
                                                        NavigateUrl='<%# "Profile.aspx?uid=" + Eval("fk_User_Id")%>'>
                                                        <asp:Image ID="imgUserC" runat="server"
                                                            ImageUrl='<%# Eval("Profile_Pic") %>' CssClass="scaling-image" />
                                                    </asp:HyperLink>
                                                </div>
                                                <div class="CommentInfo">
                                                    <div class="CommentUsername">
                                                        <asp:HyperLink ID="linkUserProfile" runat="server"
                                                            NavigateUrl='<%# "Profile.aspx?uid=" + Eval("fk_User_Id")%>'><%# Eval("Username") %></asp:HyperLink>
                                                    </div>
                                                    <div class="CommentDate">(<%# Eval("Date") %>)</div>
                                                    <div class="CommentDescription"><%# Eval("Description") %></div>
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                    </asp:DataList>

Now, suppose there are 24 entries for [comments] in the database... I want to show only 3 here... And add a load more button in the footer template, on clicking this load more 5 more comments should be displayed..

If there is a possible solution to this with ajax, i wouldn't have any problem with that. I just need a working solution to this, as I am clueless on how to achieve this.

Answer 1

It's quite complicated when you are using runat server controls like gridview and datalist etc.

To achieve your goal:

1. You need to create web service
2. Get records from data base by using the service and JavaScript
3. Append the result at bottom by using JavaScript

These are things you need to do, and many other problem will start when you will work with server controls.