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

Question

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

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

我从马特那里得到了一些指示，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)。您可以做的是在回发后设置选定的选项卡。选项卡控件上有一个选项

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

或

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

如果您有兴趣执行 jquery AJAX 路线，请发表评论，我可以提供示例。您可以使用 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/