現在のプロジェクトでは、Tabコントロールを使用する必要がありましたが、最初のページの読み込みにはデータが重すぎます。 幸いなことに、 jQuery Tabは必要な機能を提供します。 ただし、サーバー側からブックマークデータを簡単に整理する方法を見つける必要がありました。 ASP.NET MVCは便利なメカニズム-部分ビュー（部分ビュー）を提供します。
この短いチュートリアルでは、jQuery Tabをインストールする方法と、ASP.NET MVCで部分ビューを設定してブックマークを操作する方法を示します。
ビューをカスタマイズする
ASP.NET MVCで作業しているため、ページを表現として説明します。 標準のASP.NET MVCアプリケーションプロジェクトテンプレートを使用します。 jQueryおよびjQuery UIスクリプトをビューにロードして接続した後（マスターページでも可能）、次のコードを追加します。
< asp:Content ID ="indexContent" ContentPlaceHolderID ="MainContent" runat ="server" >
< script type ="text/javascript" >
$( document ).ready( function () {
$( "#tabContainer" ).tabs();
});
</ script >
< div id ="tabContainer" >
< ul >
< li >< a href ="/Home/GetHomeTab" > Home </ a ></ li >
< li >< a href ="/Home/GetProductTab" > Products </ a ></ li >
< li >< a href ="/Home/GetContactUsTab" > Contact Us </ a ></ li >
</ ul >
</ div >
このコードは、HomeコントローラーのIndex表現のデータの既存の部分を置き換えます。 最も興味深い部分はdiv tabContainerです。 その中で、リストといくつかのリスト項目を宣言します。 jQueryはこの定義を使用してブックマークコントロールをフォーマットします。
リスト（<li>タグ）内では、さまざまなアクションにリンクを使用していることに既に気付いています（はい、HTMLヘルパーメソッドを使用できることはわかっています）。 次に、ブックマーク内に描画されるビューを作成する必要があります。
GetHomeTabビューの外観の例を次に示します。 特別なことはありませんが、部分ビューを作成してください。 部分ビューには、head、html、またはbodyは含まれません。 これはブックマークに最適です。
GetProductTabとGetContactUsTabについても同じことを行います。 少なくともいくつかの結果を表示するには、ビューに数行のテキストを追加します。 GetHomeTabの外観の例を次に示します。
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
< h1 > Home </ h1 >
< p > You're inside the Home tab, which was rendered via a partial view! </ p >
テストする前に、要求されたビューを返すようにコントローラーを変更する必要があります。
public ActionResult GetHomeTab()
{
return PartialView();
}
public ActionResult GetProductTab()
{
return PartialView();
}
public ActionResult GetContactUsTab()
{
return PartialView();
}
これらのビューにモデルをバインドでき、それらは正常に機能します。 次に、アプリケーションを実行します。
そして、すべてがAJAXを介して機能することを確認するために、FireBugを見てみましょう。
Firebugは、[お問い合わせ]タブをクリックすると、AJAX呼び出しが自動的に行われ、Homeコントローラーに移動して部分的なビューが返されることを示します。
ケビンはクールですが、なぜこれがすべてなのでしょうか？
ブックマークの使用は非常に不便です。 これらには、ブックマーク内に表示するための大量のマークアップが含まれています。 これらはすべて1つのファイルに配置する必要があります。 ページを動的にロードすることにより、サーバーの負荷を軽減します。 10個のブックマークがあるとします。 ユーザーが必要なのが2つだけの場合、残りのすべてをロードするトラフィックを費やします。 ブラウザはそれらを描画してメモリに保存し、ユーザーのアクションを待機する必要があります。 AJAXを使用する場合、本当に必要なブックマークのみをロードします。 したがって、サーバーを最小限にロードします。
さらに、11個の小さなファイルにマークアップを配置することは、1つの大きなファイルよりもはるかに簡単です。 [お問い合わせ]タブで変更を加える必要がある場合、メインページで変更を探す必要はありません。 GetContactUsTabビューを開いて、変更を加えるだけです。
あなた自身のために何か新しいことを学び、将来のプロジェクトでこのアプローチを使用することを願っています。 10個のブックマークに多くのデータが含まれているアプリケーションでは、大きな違いを感じたことがわかります。 すべてを断片に分割することにより、アプリケーションの構造を単純化できます。
翻訳者から。 このアプローチで解決することを忘れてはならないいくつかの基本的な問題を忘れないでください。a）ユーザーはブックマークへの直接リンクを取得できません（このため、アンカーを使用する価値があります）。 b）ユーザーがAJAXなしで作業できるようにします。 これはすべて難しくありません。現在の例を少し変更してください。