Asp.net – Hyperlink opens 2nd "Window" on the same page

Why not consider just having two simple div areas on the web page?

So, when a user clicks on one row of the GridView, you then hide the GridView (and area), and then display the second grid area along with some details.
User’s find this type of UI easy to use, and the bonus points are writing such code is also rather easy.

So, for this example, let’s assume we have a list of hotels (in a GridView).

We are to click on one of the hotels, and display people booked into that one hotel in another GridView.

So, our first GridView (list of hotels).

        <div id="Hotels" runat="server">
            <h3><i>Hotels and Bookings</i></h3>
            <asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
                DataKeyNames="ID" CssClass="table table-hover" 
                Width="55%"
                >
                <Columns>
                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                    <asp:BoundField DataField="LastName" HeaderText="LastName" />
                    <asp:BoundField DataField="City" HeaderText="City" />
                    <asp:BoundField DataField="HotelName" HeaderText="Hotel" />
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:TemplateField HeaderText="Bookings">
                        <ItemTemplate>
                            <asp:Button ID="cmdView" runat="server" Text="Bookings" 
                                class="btn myshadow"
                                OnClientClick="return callme(this)"
                                OnClick="cmdView_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

        </div>

Note the simple div with a runat="server". The runat=server tag allows code behind with ease to hide that first GridView area, and show the second GridView area.
In this case the second grid will show people booked into the hotel selected from the first grid.
So, below the above first div and grid area, we drop in our second div area with our second GridView.
This:

        <div id="Bookings" runat="server" visible="false">

            <h3 id="HotelName" runat="server"></h3>
            <h4 id="Desc" runat="server"></h4>
            <br />
            <h4><i>Bookings</i></h4>

            <asp:GridView ID="GVPeople" runat="server"
                AutoGenerateColumns="False" DataKeyNames="ID"
                CssClass="table table-hover"
                Width="45%">
                <Columns>
                    <asp:BoundField DataField="BookingName" HeaderText="BookingName" />
                    <asp:BoundField DataField="FromDate" HeaderText="FromDate" />
                    <asp:BoundField DataField="ToDate" HeaderText="ToDate" />
                    <asp:TemplateField HeaderText="View">
                        <ItemTemplate>
                            <button id="cmdViewPeople" runat="server" type="button"
                                onserverclick="cmdViewPeople_ServerClick"
                                class="btn myshadow">
                                <span class="fa fa-bed fa-lg"> Booking Details</span>
                            </button>

                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

            <button id="cmdBack" runat="server" type="button"
                onserverclick="cmdBack_ServerClick"
                class="btn myshadow"
                >
                <span class="fa fa-home fa-lg"> Back to Hotels</span>
            </button>

        </div>

Code behind to make all this magic work is rather simple:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid
    End If

End Sub

Sub LoadGrid()

    GVHotels.DataSource = MyRst("SELECT * FROM tblHotelsA
                                WHERE ID IN (select Hotel_id FROM BOOKINGS)
                                ORDER BY HotelName")
    GVHotels.DataBind()

End Sub

The row button click code for above GridView:

Protected Sub cmdView_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim HotelPK As Integer = GVHotels.DataKeys(gRow.RowIndex).Item("ID")

    ' Show people booked in this hotel:
    Dim cmdSQL As _
        New SqlCommand("SELECT * FROM Bookings
                        WHERE Hotel_ID = @ID
                        ORDER BY FromDate, ToDate")

    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = HotelPK
    GVPeople.DataSource = MyRstP(cmdSQL)
    GVPeople.DataBind()

    HotelName.InnerHtml = $"<i>{gRow.Cells(3).Text}</i>"
    Desc.InnerHtml = $"<i>{gRow.Cells(4).Text}</i>"

    Hotels.Visible = False    ' hide hotel grid area
    Bookings.Visible = True     ' show bookings area

End Sub

Protected Sub cmdBack_ServerClick(sender As Object, e As EventArgs)

    Hotels.Visible = True
    Bookings.Visible = False


End Sub

So, the above results in this effect:

So, this rather simple approach of hide and showing the top first grid, and then showing the second grid area upon row selection is very little code.

The end result is an initiative user interface, and one that requires little developer efforts.