1

jQueryタブを使用してマスター詳細ソリューションを実装しようとしています。2つのタブ、最初のタブにはNorthwindの顧客が含まれ、customerコマンドを選択すると、顧客の注文を含むtab2が表示されます。

これまでのところ、ある種のAjaxを使用せずにそれを行うことはできないという結論に達しました。私は正しいですか？

Matt、 MattBersethからいくつかのポインタを受け取りました。

誰かがこれを達成する方法について共有できるアイデアやサンプルを持っていますか？

これを行う1つの方法は、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 スターター キットが必要です。 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

JQuery タブはサーバーにポストバックしないため、AJAX が必要になります。ポストバックするタブ付きの動作が必要な場合は、手動で実装するのはかなり簡単です。または、このために事前に構築されたさまざまなコントロールをダウンロードできます。

JQuery タブを使用する特定の理由がある場合は、AJAX フラグメントで使用される例を次に示します。おそらく、マスター リストのグリッドからクリック イベントを接続して、ajax コンテンツを 2 番目のタブにロードするだけでなく、ajax コールバックの一部として自動的にタブに切り替えることもできます。

于 2009-02-03T23:05:27.240 に答える