Multipule information and Pics in multipule gridviews in ASP.NET using VB - sql

Question

I am trying to build a website and am running into a little trouble. My coding knowledge and savvy are armature at best,if you know a better way to do this than please by all means let me know.
On my Featured Bar page I have two gridviews set up. gvPicsRandomBar(For pictures only) and GVRandomBars(For Information only). Each has their own SQLDataSource. I have it set up to where GVRandomBars selects a "random" bar through the SQL TOP command. What I'm trying to do is get the gvPicsRandomBar to display a picture of the same "random" bar that is selected by GVRandomBars. Both gridviews are querying from the same table but with different SELECT statements as each gridview is concerned with different items in the same table row.
I thought I had somewhat accomplished this by reading the primary key from the GVRandomBars and placing that value in a Label(lblRandomBar) that I use as a control for gvPicsRandomBar to match up the correct pic to display in it's own gridview as they both query the same database, but I was wrong. Whenever I startup my website I get this error "Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index". I'm just not sure where to place this code i.e. (Event) lblRandomBar.Text = GVRandomBars.DataKeys(0).Value.ToString() so that I will not get the above error.
Seperate problems if by miracle I get it to work
One problem I have is that it appears that the value of the primary key is not passed on to lblRandomBar.text. I assume this is because I do not know where to correctly place the code lblRandomBar.Text = GVRandomBars.DataKeys(0).Value.ToString()The other problem I do have when I sometimes get it to work is that the picture displayed in gvPicsRandomBar is one step behind from when I click the search button. Example, I click search for city "Austin" in my dropdown list which could potentially give me a primary key value of 45. The picture for that primary key is not displayed until I click search for another city in the dropdown list and the page posts back to the server.
The value of the primary key is in lblRandomBar.text for the current bar displayed in the GVRandomBars but the picture of the bar associated with that recored does not appear in the gvPicsRandomBar until the search button is clicked and another "random" bar is displayed in the GVRandomBars. So I am looking at a picture in gvPicsRandomBar from the last bar that was brought up in GVRandomBars while another bars information is currently displayed in GVRadnomBars.
I am looking to have the same bar information and bar picture in both gridviews at the same time, and not one step behind like I have currently with the picture in gvPicsRandomBar. Any help would be greatly appreciated. Thanks.
ASP.NET HTML
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Random Bar.aspx.vb" Inherits="RGVHappyHour.Featured_Bar" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<center><h2>Random Bar</h2></center>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
<asp:GridView ID="gvPicsRandomBar" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Number,Bar Name,Image" DataSourceID="SqlDataSourceRandomBarPics" ForeColor="#333333" GridLines="None" HorizontalAlign="Center" Width="548px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:ImageField DataImageUrlField="Image" HeaderText="Image" NullDisplayText="No Picture">
</asp:ImageField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSourceRandomBarPics" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringBars %>" SelectCommand="SELECT * FROM [Bars] WHERE ([Number] = #Number)">
<SelectParameters>
<asp:ControlParameter ControlID="lblRandomBar" Name="Number" PropertyName="Text" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</p>
<p>
<asp:GridView ID="GVRandomBars" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourceRandomBar" Width="548px" CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" DataKeyNames="Number" SelectedIndex="0">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="Bar_Name" HeaderText="Bar Name" SortExpression="Bar_Name" />
<asp:BoundField DataField="Addresss" HeaderText="Addresss" SortExpression="Addresss" />
<asp:BoundField DataField="Phone_Number" HeaderText="Phone Number" SortExpression="Phone_Number" />
<asp:BoundField DataField="Days" HeaderText="Days" SortExpression="Days" />
<asp:BoundField DataField="Happy_Hour" HeaderText="Happy Hour" SortExpression="Happy_Hour" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle ForeColor="#333333" BackColor="#F7F6F3" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSourceRandomBar" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringBars %>" SelectCommand="SELECT TOP (1) [Number], [Bar Name] AS Bar_Name, Addresss, [Phone Number] AS Phone_Number, Days, [Happy Hour] AS Happy_Hour, [Image] AS Image FROM Bars WHERE (City = #City) ORDER BY NEWID()">
<SelectParameters>
<asp:ControlParameter ControlID="ddlCity" Name="City" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
<p>
<table class="style1" style="width: 100%">
<tr>
<td style="width: 220px; text-align: right;" class="style2">
<asp:Label ID="lblCity" runat="server" Text="City:" Font-Size="Large"
ForeColor="#47C2FF"></asp:Label>
</td>
<td style="width: 135px">
<asp:DropDownList ID="ddlCity" runat="server" DataSourceID="SqlDataSourceCity"
DataTextField="City" DataValueField="Number">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSourceCity" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringBars %>" SelectCommand="SELECT * FROM [City] ORDER BY [City]"></asp:SqlDataSource>
</td>
<td style="width: 220px; position: relative; text-align: left; vertical-align: middle;">
<asp:Button ID="btnCitySearch" runat="server" Text="Search" />
</td>
</tr>
<tr>
<td style="width: 220px" class="style2" draggable="true">
<asp:Label ID="lblRandomBar" runat="server"></asp:Label>
</td>
<td style="width: 135px">
</td>
<td style="width: 220px">
</td>
</tr>
</table>
</p>
</asp:Content>
Code Behind Random Bar.aspx.vb
Public Class Featured_Bar
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub btnCitySearch_Click(sender As Object, e As EventArgs) Handles btnCitySearch.Click
End Sub
Protected Sub GVRandomBars_SelectedIndexChanged(sender As Object, e As EventArgs) Handles GVRandomBars.SelectedIndexChanged
End Sub
Protected Sub btnCitySearch_DataBinding(sender As Object, e As EventArgs) Handles btnCitySearch.DataBinding
lblRandomBar.Text = GVRandomBars.DataKeys(0).Value.ToString()
End Sub
End Class