1

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

到目前为止，我得出的结论是，如果不使用某种 Ajax，就无法做到这一点。我对么？

我从 Matt，Matt Berseth那里得到了一些建议。

有没有人有任何想法或样本可以分享如何实现这一点？

我认为这样做的一种方法是在 GridView1 的 LinkBut​​ton 的 Client Click 事件中传递 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>
4

2 回答 2

3

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

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

或者

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

如果您对执行 jquery AJAX 路由感兴趣，请发表评论，我可以提供示例。您可以使用 WCF 服务访问您的订单详细信息吗？

示例代码

我刚刚完成了一些基于此的示例代码，我将它上传到我的 MS Live SkyDrive。您将需要 WCF REST Starter Kit。 jQuery-AjaxTabsView-Sample.zip

博客文章

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

于 2009-02-03T23:13:52.590 回答
0

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

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

于 2009-02-03T23:05:27.240 回答