使用 jQuery 选项卡掌握详细信息

Question

我正在尝试使用 jQuery 选项卡实现主详细信息解决方案。 两个选项卡，第一个选项卡包含 Northwind 客户，选择客户命令应显示选项卡 2 以及该客户的订单。

到目前为止，我得出的结论是，如果不使用某种 Ajax 就无法完成此任务。 我说得对吗？

我从 Matt Matt Berseth 那里得到了一些指示。

有谁可以分享如何实现此目的的任何想法或示例吗？

我认为一种方法是在 GridView1 的 LinkBut​​ton 的客户端单击事件中传递 CustomerId，然后聚焦Tab2 并以某种方式通过 JavaScript 加载详细信息网格。 我不太擅长Javascript，所以我被困在这里。

建议和示例代码将非常有帮助。

谢谢

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Customers</a></li>
    <li><a href="#tabs-2">Orders</a></li>
</ul>
<div id="tabs-1">

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
AutoGenerateColumns="False" DataKeyNames="CustomerID" 
DataSourceID="SqlDataSource1" PageSize="20">
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:LinkButton ID="lbtnSelect" runat="server" 
Text="Select Link" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:CommandField ShowSelectButton="True" />
    <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" 
        SortExpression="CustomerID" />
    <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" 
        SortExpression="CompanyName" />
    <asp:BoundField DataField="Region" HeaderText="Region" 
        SortExpression="Region" />
    <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" 
        SortExpression="PostalCode" />
</Columns>
</asp:GridView>

</div>
<div id="tabs-2">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="OrderID" DataSourceID="SqlDataSource2">
        <Columns>
            <asp:BoundField DataField="OrderID" HeaderText="OrderID" InsertVisible="False" 
                ReadOnly="True" SortExpression="OrderID" />
            <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" 
                SortExpression="CustomerID" />
            <asp:BoundField DataField="OrderDate" HeaderText="OrderDate" 
                SortExpression="OrderDate" />
        </Columns>
    </asp:GridView>
</div>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT [CustomerID], [CompanyName], [Region], [PostalCode] 
FROM [Customers]">
</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT [OrderID], [CustomerID], [OrderDate] 
FROM [Orders] WHERE ([CustomerID] = @CustomerID)">
<SelectParameters>
    <asp:ControlParameter ControlID="GridView1" Name="CustomerID" 
        PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:SqlDataSource>

Answer 1

它绝对可以使用 jQuery 和 AJAX 实现，并且可能非常好，这将需要一些重要的工作，因为您不能真正使用 GridView（除非您使用 UpdatePanel）。 您可以做的是在回发后设置选定的选项卡。 如果您有兴趣执行 jquery AJAX 路由，选项卡控件上有一个选项

$('#tabs').tabs({selected:1});

或

$('#tabs').tabs();
$('#tabs').tabs('select', 1);

发表评论，我可以提供示例。 您可以使用 WCF 服务访问您的订单详细信息吗？

示例代码

我刚刚完成了一些基于此的示例代码，我将其上传到我的 MS Live SkyDrive。 您将需要 WCF REST 入门工具包。 jQuery-AjaxTabsView-Sample.zip

博客文章

我还撰写了描述该示例的博客文章。 谢谢你的主意。 http:// /bendewey.wordpress.com/2009/02/04/jquery-tab-view-using-ajax-and-wcf-rest-service/

Answer 2

您将需要 AJAX，因为 JQuery 选项卡不会回发到服务器。 如果您想要回发的选项卡式行为，则相当容易 手动实施，或者您可以为此下载各种预构建的控件。

如果有特殊原因想要使用 JQuery 选项卡，这里是一个示例与 AJAX 片段一起使用。 您可能需要连接主列表中网格的单击事件，以将 ajax 内容加载到第二个选项卡中，并作为 ajax 回调的一部分自动切换到该选项卡。