Set images in aspx to visible =true if checked in database equals true

Question

I'm trying to visibly display which car park spaces are occupied. I have done this so far by using images on top of a panel with a car park background and a select date box as shown in code below:
<asp:Label ID="Label3" runat="server" Font-Bold="True" Width="125px">Select Date:</asp:Label><b></b>
<asp:TextBox ID="DateBox" runat="server" Width="140px" AutoPostBack="True">dd/mm/yyyy</asp:TextBox>
<asp:ImageButton ID="DateImage" runat="server" Width="34px" ImageUrl="~/Pics/Select_date.png" Height="23px" />
<ajaxToolkit:CalendarExtender runat="server" TargetControlID="DateBox" PopupButtonID="DateImage" Format="dd/MM/yyyy"></ajaxToolkit:CalendarExtender>
</div>
<div>
<asp:Panel runat="server" BackImageUrl="~/Pics/Available.png" Height="427px" Width="662">
<asp:Image ID="Bay1Occ" runat="server" Height="56px" ImageUrl="~/Pics/OccupiedDisabled.png" style="top: 728px; left: 40px; ; float: left; height: 65px; margin-top: 0px;" Width="40px" Visible="false" />
<asp:Image ID="Bay2Occ" runat="server" Height="56px" ImageUrl="~/Pics/OccupiedDisabled.png" style="top: 726px; left: 84px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay3Occ" runat="server" Height="56px" ImageUrl="~/Pics/OccupiedDisabled.png" style="top: 727px; left: 129px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay4Occ" runat="server" Height="56px" ImageUrl="~/Pics/OccupiedDisabled.png" style="top: 728px; left: 172px; ; float: left; height: 65px" Width="40px" Visible="False" />
<asp:Image ID="Bay5Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 728px; left: 219px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay6Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 728px; left: 264px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay7Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 728px; left: 309px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay8Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 728px; left: 355px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay9Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 728px; left: 403px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay10Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 727px; left: 448px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay11Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 727px; left: 494px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay12Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 727px; left: 538px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay13Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 726px; left: 584px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay14Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 727px; left: 631px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay15Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 864px; left: 38px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay16Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 865px; left: 83px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay17Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 864px; left: 128px; ; float: left; height: 65px" Width="40px" Visible="False"/>
<asp:Image ID="Bay18Occ" runat="server" Height="56px" ImageUrl="~/Pics/Occupied.png" style="top: 865px; left: 173px; ; float: left; height: 65px" Width="40px" Visible="False"/>
</div> </div>
I want when the date is selected for the images shown in code above to be set to visible depending on if the checked box in database shown below = true.
CREATE TABLE [dbo].[History] (
[BookID] INT IDENTITY (1, 1) NOT NULL,
[Disabled] BIT NULL,
[ParkName] NVARCHAR (50) NULL,
[Campus] NVARCHAR (50) NULL,
[BayNo] INT NULL,
[VisId] INT NULL,
[StaffId] NVARCHAR (128) NULL,
[bkDate] NVARCHAR (10) NULL,
[Checkin] NVARCHAR (10) NULL,
PRIMARY KEY CLUSTERED ([BookID] ASC),
I cant use the Booking ID as that corresponds to the booking number. The space identity is made up of bay no, campus and park name.
I have this in my aspx.cs so far but have no idea how to do what I need. I have tried researching it.
int BookingDisplay()
using (SqlConnection myConnection = new SqlConnection(DefaultConnection))
myConnection.Open();
//Add visitor to database
SqlCommand MyCommand = new SqlCommand
("SELECT (ParkName), (Campus), (BayNo) FROM (History) WHERE (((bkDate) = @bkDate) AND ((Checkin) = @Checkin))", myConnection);
MyCommand.Parameters.AddWithValue("@bkDate", DateBox.Text);
MyCommand.Parameters.AddWithValue("@Checkin", true);
MyCommand.ExecuteNonQuery();
a desperate learner

Answer 1

The History table should have its own ID called RecID that is the primay key and an
IDENTITY column.
The BookID column should be coming from another table call it Bookingnumbers that has a BookID that is assigned to the BookiD in History when a dummy record is inserted into Bookingnumbers. BookID in Bookingnumbers is just a count or counter table that holds
the last ID used for (Book Numbers) with BookID in Bookingnumbers being an
IDENTITY column used to populate BookID in the History BookID column..