如何让Hyperlink在当前页面加载订单信息网格而非新页面？

1. 调整页面结构：添加底部详情网格 #

在原订单列表RadGrid的下方，新增一个默认隐藏的RadGrid，专门用于展示选中订单的详情数据。

<!-- 原订单列表网格 -->
<rad:RadGrid ID="RadGridOrders" runat="server" AutoGenerateColumns="false">
    <Columns>
        <rad:GridTemplateColumn DataField="OrderId" DataType="System.Int32" SortExpression="OrderId" UniqueName="OrderId">
            <ItemTemplate>
                <!-- 替换原HyperLink为服务器端按钮，触发详情加载逻辑 -->
                <asp:LinkButton ID="lnkViewOrder" runat="server" Text='<%# Eval("OrderId") %>' 
                    OnClick="lnkViewOrder_Click" CommandArgument='<%# Eval("OrderId") %>'>
                </asp:LinkButton>
            </ItemTemplate>
        </rad:GridTemplateColumn>
        <!-- 其他原有列配置 -->
    </Columns>
</rad:RadGrid>

<!-- 底部订单详情网格，初始状态隐藏 -->
<rad:RadGrid ID="RadGridOrderDetails" runat="server" Visible="false" AutoGenerateColumns="false">
    <Columns>
        <rad:GridBoundColumn DataField="DetailId" HeaderText="明细ID" />
        <rad:GridBoundColumn DataField="ProductName" HeaderText="产品名称" />
        <rad:GridBoundColumn DataField="Quantity" HeaderText="购买数量" />
        <rad:GridBoundColumn DataField="UnitPrice" HeaderText="单价" />
        <!-- 其他订单详情列 -->
    </Columns>
</rad:RadGrid>

2. 修改后端逻辑：替换跳转为本地数据加载 #

删除原有的GetOrderInfo方法，新增按钮点击事件处理逻辑，根据选中的OrderId查询详情数据，绑定到底部网格并显示。

Protected Sub lnkViewOrder_Click(sender As Object, e As EventArgs)
    ' 获取点击的OrderId
    Dim lnkBtn As LinkButton = DirectCast(sender, LinkButton)
    Dim targetOrderId As Integer = Integer.Parse(lnkBtn.CommandArgument)
    
    ' 查询该订单的详情数据（替换为你的实际数据查询逻辑）
    Dim orderDetailsData As DataTable = FetchOrderDetails(targetOrderId)
    
    ' 绑定数据并显示详情网格
    RadGridOrderDetails.DataSource = orderDetailsData
    RadGridOrderDetails.DataBind()
    RadGridOrderDetails.Visible = True
End Sub

' 示例数据查询方法，根据实际业务场景替换
Private Function FetchOrderDetails(orderId As Integer) As DataTable
    Dim dt As New DataTable()
    ' 这里写从数据库/接口获取订单详情的逻辑，比如使用SqlDataAdapter填充数据
    Return dt
End Function

3. 可选优化：实现无刷新加载 #

如果需要避免页面整体刷新，可通过RadAjaxManager实现局部更新：

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGridOrders">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGridOrderDetails" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

配置后点击OrderId时，仅底部详情网格区域会刷新，页面其余部分保持不变。

内容的提问来源于stack exchange，提问作者shan.malik