Основные детали с помощью вкладок jQuery - PullRequest
Новая
       18

Основные детали с помощью вкладок jQuery

1 голос
/ 04 февраля 2009

Я пытаюсь реализовать решение с основными данными, используя вкладки jQuery. Две вкладки, первая вкладка содержит клиентов Northwind, при выборе команды клиента должна отображаться вкладка 2 с заказами для клиента.

До сих пор я пришел к выводу, что это невозможно сделать без использования какого-либо Ajax. Я прав?

Я получил несколько указаний от Мэтта, Мэтт Берсет .

Есть ли у кого-нибудь идеи или примеры, которыми они могут поделиться, как этого добиться?

Я думаю, что один из способов сделать это - передать CustomerId в событии Client Click LinkButton GridView1, а затем сфокусировать 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>

Ответы [ 2 ]

3 голосов
/ 04 февраля 2009

Это определенно выполнимо с использованием 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/

0 голосов
/ 04 февраля 2009

Вам понадобится AJAX, поскольку вкладки JQuery не отправляются обратно на сервер. Если вам нужно поведение с вкладками, которое отправляет назад, его довольно просто реализовать вручную , или вы можете загрузить широкий ассортимент готовых элементов управления для этого.

Если есть особая причина для использования вкладок JQuery, здесь приведен пример его использования с фрагментами AJAX. Вы, вероятно, захотите подключить события щелчков из сетки в вашем главном списке, чтобы одновременно загрузить содержимое ajax во 2-ю вкладку, а также автоматически переключаться на вкладку как часть обратного вызова ajax.

...