0

Windows タブ コントロールのような Web ページが必要です。各 Web ページは、ページ間、ポストバックなどの移動中にコンテンツとデータを失うことはありません。

ここにウェブサイトのデザインと私の考えがあります：

【マスターページ】

"Fruits"  "Cars"   "Animals"  "Operators"
  • 「果物」をクリックすると「果物」ページに転送され、他のリンク (タブ) も同様です。
  • ユーザーは「果物」ページで果物を検索したり、いくつかのフィールドに入力したりします。
  • 次に、ユーザーは「車」ページに移動し、いくつかのフィールドに入力して自分の車を組み立てます。
  • その後、ユーザーは再び「果物」ページに戻ります -> ユーザーは、「果物」ページに残ったのと同じページを表示します。

javascript:history.go(-1) を使用する以外の良い方法を提案してください。これを実装することは可能ですか？

4

5 に答える 5

3

Jquery post メソッドを使用すると、同じことができます...これを試してみましょう。ここにサンプルがあります...

<div class="Tabclass" id="TabId1" onclick="TabClick('Fruits')">
        Fruits
    </div>
  <div class="activeTab" id="TabId2" onclick="TabClick('cars')">
        cars
    </div>

ここで、TabClick("var") は JavaScript 関数です。パラメータは、どのタブが選択されているかを識別するためのものです。

div を含むデータの ID が「DivMainContent」であるとします。JavaScript関数を見てみましょう

<script type="text/javascript">
           function TabClick(bType) {
               $(#DivMainContent").html("");
               if (bType == 'Fruits') {
                         $.post("@Url.Content("~/Controllername/actionname")",
                         function (data) {
                         $("#DivMainContent").html(data);
                    });
               }
               else if (bType == 'cars') {

                          $.post("@Url.Content("~/Controllername/actionname")",
                          function (data) {
                          $("#DivMainContent").html(data);
                    });
 }
</script>
于 2012-10-11T11:27:47.490 に答える
2

Twitter のブートストラップ API は HTML UI に最適です。それらのタブをチェックしてください。探しているものが見つかると思います。

http://twitter.github.com/bootstrap/javascript.html#tabs

于 2012-10-03T22:03:15.953 に答える
1

やりたいことを実現する方法はたくさんあります。ユーザーセッションを作成し、AJAX呼び出しをサーバー設定入力に送信して処理することができます。または、1 つのページしかない単一ページ アプリケーションを使用して、その中を移動することもできます。もっとたくさんあるかもしれません。どちらを選択するかは、プロジェクトの仕様によって異なります。

于 2012-10-01T03:32:07.393 に答える
1

非常に簡単な解決策は、4 つの div を持ち、ユーザーがクリックするリンクに対応する div を非表示/表示することです。「例: 果物のリンクは果物の div を表示します」この種の配管は、ほとんどの JavaScript で既に行われています。ライブラリ、良いものはJquery UIフレームワークです。タブコントロールはあなたがやりたいことを達成します

jQuery のデモとドキュメントを参照すると、ajax を介してクライアント側のタブを簡単に作成できます。

http://jqueryui.com/demos/tabs/

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

サードパーティの JavaScript ライブラリを使用できない場合は、div を表示/非表示にする従来の JavaScript の方法が常にあります。

http://webdesign.about.com/od/dhtml/a/aa101507.htm

于 2012-10-01T03:34:26.210 に答える
1

これを行う最も簡単な方法は、すべてのタブのすべてのコンテンツをレンダリングし、Javascript を使用してクライアント側のさまざまなタブを切り替えることです (たとえば、css プロパティの "display" を調整するのが 1 つの方法です)。表示する前に別のタブを更新するデータを送信する必要がない限り、AJAX 呼び出しを行う理由はありません。

于 2012-10-01T03:34:42.237 に答える