Adding More Items in DataList Control when 'More..' Button is clicked. Just like we have 'Show More Results' in Google Images pages

Question

User555921283 posted

In my Home Page I have 8 Cities to display (for the end user to select and tour). I WANT TO ADD "MORE.." BUTTON SO THAT WHEN USER CLICK ON IT , REMAINING CITIES MUST BE DISPLAYED IN THE DATALIST CONTROL.

Each item in DataList is a 1 ImageButton + 2 LinkButtons+1 Label. 

Clicking on the ImageButton will Display the selected City Video.

PLEASE ASSIST!

Mark Up Code:

 <asp:DataList ID="DataList1" runat="server" CellPadding="4" CellSpacing="20" ForeColor="#333333" OnItemCommand="DataList1_ItemCommand" RepeatColumns="4" RepeatDirection="Horizontal" Width="544px">
                 <AlternatingItemStyle BackColor="White" />
                 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                 <HeaderTemplate>
                     List of Cities
                 </HeaderTemplate>
                 <ItemStyle BackColor="#EFF3FB" />
                 <ItemTemplate>
                     <asp:ImageButton ID="mb1" runat="server" CommandArgument='<%#Eval("vid")%>' CommandName="m1" Height="200" ImageUrl='<%#Eval("Pic")%>' Width="300" />
                     <br />
                     <asp:LinkButton ID="lb1" runat="server"  CommandArgument='<%#Eval("Details")%>' CommandName="l1" Text='<%#Eval("Title")%>' />
                     <br />
                     <b>Rs.<%#Eval("Price")%>*</b>&nbsp; &nbsp; &nbsp;  <asp:LinkButton ID="TourNow" runat="server" CommandArgument='<%#Eval("TourNow")%>' CommandName="tn" Text='<%#Eval("BookingDetails") %>' />
                 </ItemTemplate>
                 <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
             </asp:DataList>
        <p align="right">
       <asp:LinkButton ID="linkmoreimages" runat="server" ForeColor="Red" PostBackUrl="~/DList2.aspx">More..</asp:LinkButton></p>
        </asp:View>

Answer 1

User-271186128 posted

Hi moo010,

Welcome to asp.net forum.

Base on your description, if you want to display more item in DataList after clicking the more button. I suggest you could refer to the following code:

<asp:DataList ID="DataList1" runat="server" CellPadding="4" CellSpacing="20" ForeColor="#333333"
      RepeatColumns="4" RepeatDirection="Horizontal" Width="544px" RepeatLayout="Table">
                 <AlternatingItemStyle BackColor="White" />                
                 <HeaderTemplate>
                     List of Cities
                 </HeaderTemplate>
                 <ItemStyle BackColor="#EFF3FB" />
                 <ItemTemplate>
                <table >
                    <tr>
                        <td><%#Eval("OrderID")%></td>                    
                         <td><%#Eval("OrderDate")%></td>
                         <td><%#Eval("RequiredDate")%></td>
                    </tr>
                </table>   
                 </ItemTemplate>
                 <SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
             </asp:DataList>            
        <p >
            <asp:Button ID="Button1" runat="server" Text="More" OnClick=" linkmoreimages_Click" />
       </p>   

Code behind:

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

namespace WebApplication1.datalist
{
    public partial class add_more_to_datalist : Page
    {             
        static int i = 8; //init page size
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //First time, load 8 records.
                DataList1.DataSource = BindGrid("select top 8 * from Orders");
                DataList1.DataBind();
            }           
        }
        private DataTable BindGrid( string query)
        {
            string str_cnn = ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
            using (SqlConnection cnn = new SqlConnection(str_cnn))
            {
                string str_sql = query;
                using (SqlCommand cmd = new SqlCommand(str_sql))
                {
                    using (SqlDataAdapter ada = new SqlDataAdapter())
                    {
                        cmd.Connection = cnn;
                        ada.SelectCommand = cmd;
                        DataSet ds = new DataSet();
                        ada.Fill(ds);
                        return ds.Tables[0];
                    }
                }
            }
        }
        protected void linkmoreimages_Click(object sender, EventArgs e)
        {  
             i += 8;            
            string query = "select top " + i + " * from Orders";
            DataList1.DataSource = BindGrid(query);
            DataList1.DataBind();
        }
    }
}

Hope this can help you. If you have any question and confusion about the problem. Please don't hesitate to let me know  .

Best regards,
Dillion

Answer 2

User555921283 posted

Thank You So Much. I will let you its result after using it i my app...