Retrieving items from ArrayList

tommein · November 5th, 2013, 08:46 AM

Rather than connect to a database, I am trying to connect to an array of items within the website pages. Cannot get this to work, where am I going wrong?
Default.aspx

Code:

<asp:FormView ID="FormView1" runat="server" AllowPaging="True">
                    <ItemTemplate>

                        <div class="row">
                            <div class="col-md-6 pull-right">
                                <div class="ImageBox img-responsive">
                                    <asp:Image ID="CarImage" runat="server" ImageUrl='<%# Eval("ImageLarge") %>' />
                                </div>
                                <%--End Image Responsive--%>
                            </div>
                            <%--End Col MD 6--%>

                            <div class="col-md-6">
                                <div class="hireData">
                                    <ul>
                                        <li>
                                            <p>Maker:</p>
                                            <asp:Label ID="MakerLabel" runat="server" CssClass="hireBindData" Text='<%# Eval("Maker") %>'></asp:Label>
                                        </li>
                                        <li>
                                            <p>Model:</p>
                                            <asp:Label ID="ModelLabel" runat="server" CssClass="hireBindData" Text='<%# Eval("Model") %>'></asp:Label>
                                        </li>
                                        <li>
                                            <p>Low Season:</p>
                                            <asp:Label ID="PriceLowSeasonLabel" runat="server" CssClass="hireBindData" Text='<%# Eval("PriceLowSeason") %>'></asp:Label>
                                            <asp:Label ID="Label1" runat="server" Text="Euro"></asp:Label>
                                        </li>
                                        <li>
                                            <p>High Season:</p>
                                            <asp:Label ID="PriceHighSeasonLabel" runat="server" CssClass="hireBindData" Text='<%# Eval("PriceHighSeason") %>'></asp:Label>
                                            <asp:Label ID="Label2" runat="server" Text="Euro"></asp:Label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <%--End Row--%>
                    </ItemTemplate>

                </asp:FormView>

Default.aspx.cs

Code:

public partial class _Default : System.Web.UI.Page
    
{
    
    protected void Page_Load(object sender, EventArgs e)
    {
        car c;
        ArrayList al = new ArrayList();

        c = carList.GetCarBySize();
        al.Add(c);
        FormView1.DataSource = al;
        FormView1.DataBind();
    }
 
}

car.cs

Code:

public class car
{
    public car()
    {

    }

    private int carid;
    private string header;
    private string maker;
    private string model;
    private int seating;
    private string size;
    private string imagesmall;
    private string imagelarge;
    private decimal pricelowseason;
    private decimal pricehighseason;
    private string description;

    public int CarID { get; set; }
    public string Header { get; set; }
    public string Maker { get; set; }
    public string Model { get; set; }
    public int Seating { get; set; }
    public string Size { get; set; }
    public string ImageSmall { get; set; }
    public string ImageLarge { get; set; }
    public decimal PriceLowSeason { get; set; }
    public decimal PriceHighSeason { get; set; }
    public string Description { get; set; }

    
}

carList.cs

Code:

public sealed class carList
{
    private static readonly carList cl = new carList();
    private static DataTable _dt;
    private carList() { }

    static public DataTable dt
    {
        get { return _dt; }
        set { _dt = value; }
    }

    static public DataTable BuildcarList()
    {
        DataColumn col;
        DataColumn col2;
        DataColumn col3;
        DataColumn col4;
        DataColumn col5;
        DataColumn col6;
        DataColumn col7;
        DataColumn col8;
        DataColumn col9;
        DataColumn col10;
        DataColumn col11;
        DataRow row;

        if (!(dt == null))
        {
            return dt;
        }
        dt = new DataTable("CarList");

        col = new DataColumn();
        col.DataType = Type.GetType("System.Int32");
        col.ColumnName = "CarID";
        col.AutoIncrement = true;
        col.AutoIncrementSeed = 1000;
        col.AutoIncrementStep = 10;
        col.ReadOnly = true;
        col.Unique = true;
        dt.Columns.Add(col);

        DataColumn[] PrimaryKeyColumns = new DataColumn[1];
        PrimaryKeyColumns[0] = dt.Columns["CarID"];
        dt.PrimaryKey = PrimaryKeyColumns;

        col2 = new DataColumn();
        col2.DataType = Type.GetType("System.String");
        col2.ColumnName = "Header";
        col2.AutoIncrement = false;
        col2.Caption = "Header";
        col2.ReadOnly = false;
        col2.Unique = false;
        dt.Columns.Add(col2);

        col3 = new DataColumn();
        col3.DataType = Type.GetType("System.String");
        col3.ColumnName = "Maker";
        col3.AutoIncrement = false;
        col3.Caption = "Maker";
        col3.ReadOnly = false;
        col3.Unique = false;
        dt.Columns.Add(col3);

        col4 = new DataColumn();
        col4.DataType = Type.GetType("System.String");
        col4.ColumnName = "Model";
        col4.AutoIncrement = false;
        col4.Caption = "Model";
        col4.ReadOnly = false;
        col4.Unique = false;
        dt.Columns.Add(col4);

        col5 = new DataColumn();
        col5.DataType = Type.GetType("System.Int32");
        col5.ColumnName = "Seating";
        col5.AutoIncrement = false;
        col5.Caption = "Seating";
        col5.ReadOnly = false;
        col5.Unique = false;
        dt.Columns.Add(col5);

        col6 = new DataColumn();
        col6.DataType = Type.GetType("System.String");
        col6.ColumnName = "Size";
        col6.AutoIncrement = false;
        col6.Caption = "Size";
        col6.ReadOnly = false;
        col6.Unique = false;
        dt.Columns.Add(col6);

        col7 = new DataColumn();
        col7.DataType = Type.GetType("System.String");
        col7.ColumnName = "ImageSmall";
        col7.AutoIncrement = false;
        col7.Caption = "ImageSmall";
        col7.ReadOnly = false;
        col7.Unique = false;
        dt.Columns.Add(col7);

        col8 = new DataColumn();
        col8.DataType = Type.GetType("System.String");
        col8.ColumnName = "ImageLarge";
        col8.AutoIncrement = false;
        col8.Caption = "ImageLarge";
        col8.ReadOnly = false;
        col8.Unique = false;
        dt.Columns.Add(col8);

        col9 = new DataColumn();
        col9.DataType = Type.GetType("System.Decimal");
        col9.ColumnName = "PriceLowSeason";
        col9.AutoIncrement = false;
        col9.Caption = "PriceLowSeason";
        col9.ReadOnly = false;
        col9.Unique = false;
        dt.Columns.Add(col9);

        col10 = new DataColumn();
        col10.DataType = Type.GetType("System.Decimal");
        col10.ColumnName = "PriceHighSeason";
        col10.AutoIncrement = false;
        col10.Caption = "PriceHighSeason";
        col10.ReadOnly = false;
        col10.Unique = false;
        dt.Columns.Add(col10);

        col11 = new DataColumn();
        col11.DataType = Type.GetType("System.String");
        col11.ColumnName = "Description";
        col11.AutoIncrement = false;
        col11.Caption = "Description";
        col11.ReadOnly = false;
        col11.Unique = false;
        dt.Columns.Add(col11);

        row = dt.NewRow();
        row["Header"] = "Hyundai i10";
        row["Maker"] = "Hyundai";
        row["Model"] = "i10";
        row["Seating"] = 4;
        row["Size"] = "Small";
        row["ImageSmall"] = "../thumbs/Hyundaii10Index.jpg";
        row["ImageLarge"] = "../images/Hyundaii10Index.jpg";
        row["PriceLowSeason"] = 147;
        row["PriceHighSeason"] = 161;
        row["Description"] = "SuperMini";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Hyundai i10 Auto";
        row["Maker"] = "Hyundai";
        row["Model"] = "i10 Auto";
        row["Seating"] = 4;
        row["Size"] = "Small";
        row["ImageSmall"] = "../thumbs/Hyundaii10Index3.jpg";
        row["ImageLarge"] = "../images/Hyundaii10Index3.jpg";
        row["PriceLowSeason"] = 196;
        row["PriceHighSeason"] = 210;
        row["Description"] = "SuperMini Automatic";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Kia Picanto";
        row["Maker"] = "Kia";
        row["Model"] = "Picanto";
        row["Seating"] = 4;
        row["Size"] = "Small";
        row["ImageSmall"] = "../thumbs/KiaPicantoIndex3.jpg";
        row["ImageLarge"] = "../images/KiaPicantoIndex3.jpg";
        row["PriceLowSeason"] = 133;
        row["PriceHighSeason"] = 147;
        row["Description"] = "Best in Class";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Kia Picanto Auto";
        row["Maker"] = "Kia";
        row["Model"] = "Picanto Auto";
        row["Seating"] = 4;
        row["Size"] = "Small";
        row["ImageSmall"] = "../thumbs/KiaPicantoIndex2.jpg";
        row["ImageLarge"] = "../images/KiaPicantoIndex2.jpg";
        row["PriceLowSeason"] = 196;
        row["PriceHighSeason"] = 210;
        row["Description"] = "Relaxed town driving";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Hyundai Accent";
        row["Maker"] = "Hyundai";
        row["Model"] = "Accent";
        row["Seating"] = 5;
        row["Size"] = "Medium";
        row["ImageSmall"] = "../thumbs/HyundaiAccentIndex2.jpg";
        row["ImageLarge"] = "../images/HyundaiAccentIndex2.jpg";
        row["PriceLowSeason"] = 196;
        row["PriceHighSeason"] = 210;
        row["Description"] = "Accent Saloon, space for 5";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Hyundai Accent Auto";
        row["Maker"] = "Hyundai";
        row["Model"] = "Accent Auto";
        row["Seating"] = 5;
        row["Size"] = "Medium";
        row["ImageSmall"] = "../thumbs/HyundaiAccentIndex3.jpg";
        row["ImageLarge"] = "../images/HyundaiAccentIndex3.jpg";
        row["PriceLowSeason"] = 210;
        row["PriceHighSeason"] = 224;
        row["Description"] = "Saloon Automatic, relaxed motoring";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Hyundai i30";
        row["Maker"] = "Hyundai";
        row["Model"] = "i30";
        row["Seating"] = 5;
        row["Size"] = "Medium";
        row["ImageSmall"] = "../thumbs/Hyundaii30Index2.jpg";
        row["ImageLarge"] = "../images/Hyundaii30Index2.jpg";
        row["PriceLowSeason"] = 210;
        row["PriceHighSeason"] = 224;
        row["Description"] = "Comfort and space";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Hyundai Matrix";
        row["Maker"] = "Hyundai";
        row["Model"] = "Matrix";
        row["Seating"] = 5;
        row["Size"] = "Medium";
        row["ImageSmall"] = "../thumbs/HyundaiMatrixIndex2.jpg";
        row["ImageLarge"] = "../images/HyundaiMatrixIndex2.jpg";
        row["PriceLowSeason"] = 245;
        row["PriceHighSeason"] = 273;
        row["Description"] = "Room for the bigger family";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Hyundai i20";
        row["Maker"] = "Hyundai";
        row["Model"] = "i20";
        row["Seating"] = 5;
        row["Size"] = "Medium";
        row["ImageSmall"] = "../thumbs/Hyundaii20Index5.jpg";
        row["ImageLarge"] = "../images/Hyundaii20Index5.jpg";
        row["PriceLowSeason"] = 168;
        row["PriceHighSeason"] = 175;
        row["Description"] = "A little bit of luxury for your holiday";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Renault Fluence";
        row["Maker"] = "Renault";
        row["Model"] = "Fluence";
        row["Seating"] = 5;
        row["Size"] = "Medium";
        row["ImageSmall"] = "../thumbs/RenaultFluenceIndex3.jpg";
        row["ImageLarge"] = "../images/RenaultFluenceIndex3.jpg";
        row["PriceLowSeason"] = 259;
        row["PriceHighSeason"] = 280;
        row["Description"] = "Treat yourself.";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Hyundai Accent Hatch";
        row["Maker"] = "Hyundai";
        row["Model"] = "Accent Hatchback";
        row["Seating"] = 5;
        row["Size"] = "Medium";
        row["ImageSmall"] = "../thumbs/HyundaiAccentHatchIndex.jpg";
        row["ImageLarge"] = "../images/HyundaiAccentHatchIndex.jpg";
        row["PriceLowSeason"] = 147;
        row["PriceHighSeason"] = 161;
        row["Description"] = "Older model but super price";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Fiat Doblo 7 seater";
        row["Maker"] = "Fiat";
        row["Model"] = "Doblo";
        row["Seating"] = 7;
        row["Size"] = "Large";
        row["ImageSmall"] = "../thumbs/DobloIndex3.jpg";
        row["ImageLarge"] = "../images/DobloIndex3.jpg";
        row["PriceLowSeason"] = 287;
        row["PriceHighSeason"] = 315;
        row["Description"] = "Space for family and friends";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Dacia Logan 7 seater";
        row["Maker"] = "Dacia";
        row["Model"] = "Logan";
        row["Seating"] = 7;
        row["Size"] = "Large";
        row["ImageSmall"] = "../thumbs/DaciaLoganIndex3.jpg";
        row["ImageLarge"] = "../images/DaciaLoganIndex3.jpg";
        row["PriceLowSeason"] = 287;
        row["PriceHighSeason"] = 315;
        row["Description"] = "Space and comfort";
        dt.Rows.Add(row);

        row = dt.NewRow();
        row["Header"] = "Hyundai 9 seater";
        row["Maker"] = "Hyundai";
        row["Model"] = "9 seater";
        row["Seating"] = 9;
        row["Size"] = "Large";
        row["ImageSmall"] = "../thumbs/Hyundai9seaterIndex.jpg";
        row["ImageLarge"] = "../images/Hyundai9seaterIndex.jpg";
        row["PriceLowSeason"] = 378;
        row["PriceHighSeason"] = 448;
        row["Description"] = "Great for a group outing";
        dt.Rows.Add(row);

        return dt;
    }


    public static car GetCarBySize()
    {
        car c = new car();
        DataRow row = dt.Rows.Find("Size");

        c.Size = (string)row["Size"];
        c.Maker = row["Maker"].ToString();
        c.Model = row["Model"].ToString();
        c.PriceHighSeason = (decimal)row["PriceHighSeason"];
        c.PriceLowSeason = (decimal)row["PriceLowSeason"];
        c.ImageLarge = row["ImageLarge"].ToString();

        return c;
    }
}

I have spent so much time with this, I am beginning to wonder if I would be better using Microsoft jQuery Templates.

tommein · November 12th, 2013, 07:30 AM

After struggling with the above I decided to look further afield, I initially found jQuery templates but found this to be superseded by JsRender. This is well worth a look if your a looking to display small amounts of data without going for a full on SQL database. I have used Bootstrap to format the data. Code as follows if anyone finds this useful:-
Images with the same name in two folders "images"(full size) and "thumbs"(thumbnail image)
DataArray in a Javascript file rentalCars.js

Code:

var smallRentalCars = [
{ CarID:1, Maker: "Hyundai", Model: "i10", Size: "Small", PriceHighSeason: 161.00, PriceLowSeason: 147.00, Image: "Hyundaii10Index.jpg", Desc: "Small and frugal, yet a perfect family car for a holiday, seats 4 in comfort and is fully equipped with air conditioning" },
{ CarID:2, Maker: "Hyundai", Model: "i10 Auto", Size: "Small", PriceHighSeason: 196.00, PriceLowSeason: 210.00, Image: "Hyundaii10Index3.jpg", Desc: "A perfect city car for your holiday" },
{ CarID:3, Maker: "Kia", Model: "Picanto", Size: "Small", PriceHighSeason: 133.00, PriceLowSeason: 147.00, Image: "KiaPicantoIndex3.jpg", Desc: "Small car, ideal for busy city traffic and easy to park. Boot space is restricted so think about your holiday luggage." },
{ CarID:4, Maker: "Kia", Model: "Picanto Auto", Size: "Small", PriceHighSeason: 196.00, PriceLowSeason: 210.00, Image: "KiaPicantoIndex2.jpg", Desc: "The rental car for those that need to relax on holiday" }
];

$("#smallCarContainer").html($("#smallrentalCarsTemplate").render(smallRentalCars));

aspx page

Code:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript" src="Scripts/jsrender.min.js"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div id="smallCarContainer"></div>
        <script id="smallrentalCarsTemplate" type="text/x-jsrender">
        <ul class="list-group">
            <li class="col-md-4 col-xs-6 list-group-item">
                <div class="thumbnail">
                    <img src="../thumbs/{{:Image}}" alt="{{:Desc}}" />

                <div class="caption">
                    <h3>
                        {{:Maker}} {{:Model}}
                    </h3>
                </div> <%--End Caption--%>

                <a data-toggle="modal" data-target="#myModal{{:CarID}}" class="btn btn-primary tomsbtn">View Details</a>                

                </div> <%--End Thumbnail--%>
            </li>
        </ul>
        

        <div id="myModal{{:CarID}}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h3>{{:Maker}} {{:Model}}</h3>
        </div> <%--End Modal Header--%>

        <div class="modal-body">
            <img class="img-responsive" src="../images/{{:Image}}" alt="{{:Desc}}" />

        <div class="row">
        <div class="col-md-12"><h4>Rates per week</h4></div>
        </div>
        <div class="row">
        <div class="col-md-8">March - June, Oct - Dec</div>
        <p class="col-md-4">{{:PriceLowSeason}} Euro</p>
        </div>
        <div class="row">
        <div class="col-md-8">July,Aug,Sept.</div>
        <p class="col-md-4">{{:PriceHighSeason}} Euro</p>
        </div>
        <div class="row">
        <div class="col-md-12">{{:Desc}}</div>
        </div>
        
        </div> <%--End Modal Body--%>

        <div class="modal-footer">
			  <button class="btn" data-dismiss="modal">Close</button>
		</div>

        </div> <%--End Modal Content--%>
        </div> <%--End Modal Dialog--%>
        </div> <%--End myModal--%>
        
        </script>
           
    
   

    
   <script type="text/javascript" src="Scripts/rentalCars.js"></script>
</asp:Content>

Hope someone can find this useful

Regards
Tom Mein

mmorgan30 · February 5th, 2014, 09:19 PM

Im not realy following why your CarList encapsulates a DataTable as it storage object. Why not define a car object fill an array of car objects then bind to UI.

Code:

public class Car
{
    // car properties
    public int CarID { get; set; }
    public string Header { get; set; }
    public string Maker { get; set; }
    public string Model { get; set; }
    public int Seating { get; set; }
    public string Size { get; set; }
    public string ImageSmall { get; set; }
    public string ImageLarge { get; set; }
    public decimal PriceLowSeason { get; set; }
    public decimal PriceHighSeason { get; set; }
    public string Description { get; set; }
}

then create a class to build the list

Code:

public class CarManager
{
       private static Car[] m_Cars;

       public static Cars[] GetCars()
       {
            if( m_Cars == null )
                 BuildCarList()

            return m_Cars; 
       }
       
       public static Cars[] GetCarsByMake(String make)
       {
            return GetCars().Where( car => car.Maker.ToLower() == make.ToLower() ).ToArray(); 
       }

       public static Cars[] GetCarsBySize(String size)
       {
            return GetCars().Where( car => car.size.ToLower() == size.ToLower() ).ToArray();
       }
 
       private static void BuildCarList()
       {
            // code to build list here
            m_Cars = new Cars[] 
            {
                  new Car(){CarID = 1, Maker = "Maker1", Model="Car1", ...},
                  new Car(){CarID = 2, Maker = "Maker2", Model="Car2", ...},
                  .
                  .
                  .
                 new Car(){CarID = 100, Maker = "Maker100", Model="Car2", ...}
            };
       }
}

code to bind car list

Code:

public partial class _Default : System.Web.UI.Page    
{
    
    protected void Page_Load(object sender, EventArgs e)
    {
        // bind to all cars or sub set of the cars
        FormView1.DataSource = CarManager.GetCars();
        FormView1.DataBind();
    }
 
}

if your still having issues databinding after doing something of this nature hten change up your binding expression a bit as such

Code:

<%# DataBinder.Eval(Container.DataItem, "PriceHighSeason") %>