Question

我正在尝试使用jQuery选项卡实现主细节解决方案。两个选项卡，第一个选项卡包含Northwind Customers，选择客户命令应显示tab2，其中包含客户的订单。

到目前为止，我已经得出结论，如果不使用某种Ajax就无法完成。 我说错了吗？

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

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

我认为这样做的一种方法是在GridView1的LinkButton的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>

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/

Answer 2

您需要AJAX，因为JQuery选项卡不会回发到服务器。如果你想要做回发的标签式行为，它很容易implement manually，或者你可以为此下载各种各样的预建控件。

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

使用jQuery选项卡的主要细节

2 个答案:

示例代码

博客文章