超链接会在同一页面上打开第二个“窗口”

Question

我这里有这个代码。我有一个网格，其中一列有一个 orderID，其中有一个超链接调用名为 getorderInfo 的方法，该方法打开一个新页面，其中包含订单信息的网格。虽然我不需要新页面。我需要它保持在同一页面上并让网格显示在底部。

我尝试了几种不同的方法，所有结果要么是一个新页面，要么是一个弹出窗口。我试图在网上查找类似的东西，但我没有运气。我能做的最好的事情就是一个新页面，尽管我希望有一些明显的东西我错过了动态地将当前页面从一个网格更改为 2 个网格。

<rad:GridTemplateColumn DataField="OrderId" DataType="System.Int32" SortExpression="OrderId"
      UniqueName="OrderId">
      <ItemTemplate>
           <!--- link--->
           <asp:HyperLink runat="server" ID="HyperLink1" NavigateUrl='<%# GetOrderInfo(Eval("OrderId")) %>'
                Text='<%# Eval("OrderId") %>' />
      </ItemTemplate>
</rad:GridTemplateColumn>

    Protected Function GetOrderInfo(ByVal OrderId As Integer) As String
        Return String.Format("javascript:editItem(""{0}"",""{1}"",""{2}"");", "OrderInfo.aspx", "OrderId", Server.HtmlEncode(OrderId))
    End Function

Answer 1

为什么不考虑在网页上只设置两个简单的 div 区域？

那么，当用户单击 GridView 的一行时，您会隐藏 gridview，然后显示第二个网格区域以及一些详细信息？

在大多数情况下，你不仅会发现用户喜欢UI，而且从开发人员的角度来看，代码也相当简单。

因此，对于这个示例，我们假设我们有一个酒店列表（在 GridView 中）。

我们要单击其中一家酒店，然后在另一个 GridView 中显示预订该酒店的人员。

（因此，我们的用户界面与您的问题非常相似）。

所以，这是第一个 GridView，即酒店列表。

        <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>

注意上面带有 runat="server" 的简单 div。使用 runat=server 标记，然后我们可以使用隐藏的代码隐藏主网格区域，然后显示下面的区域以及详细信息和第二个信息网格（在这种情况下，网格将显示从第一个网格）。

因此，在上面的正下方，我们放入另一个 div，并将第二个 GridView 放入该 div 中。

这个：

        <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>

现在，让所有这些魔法发挥作用的代码相当简单：

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

行按钮单击 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

最终结果是这样的：