2009-06-10 62 views
9

StackOverflowのプロファイル管理に似たタブ付きメニューを作成したいと思います。ASP.NET MVCでタブ付きメニューを作成するにはどうすればよいですか?

tabbed menu StackOverflow http://img410.imageshack.us/img410/3037/image1nwr.jpg

あなたはURLを見てみると、それは言った:?/ユーザー/ flesymタブ=統計またはタブ=環境設定?。 タブ付きメニューを作成できましたが、選択したタブに応じてアクションメソッドを呼び出して結果を表示することができます。

私は部分的なビューを使用してみました。しかし、私のページ/ユーザー/ flesymはMvc.ViewPage(myApplication.Models.User)から継承しているので、私は部分ビューで別の継承を使用できません(たとえば、Mvc.ViewUserControl(myApplication.Models。フォーマット))。

それを行う方法上の任意の考え?彼らはおそらくjQueryのUIのタブを使用している

答えて

9

ビューモデルを作成します。

public class UserViewModel { 
    public myApplication.Models.User User; 

    public string PartialViewName; 

    public PartialViewModelBase Tab; 
} 

PartialViewModelBase由来の各タブのビューモデルを作成します:

public abstract class PartialViewModelBase { 
} 

public class Tab1PartialViewModel : PartialViewModelBase { 
    ... 
} 

public class TabNPartialViewModel : PartialViewModelBase { 
    ... 
} 

その後、あなたのビューとPartialViewsが強く型付けされます

ビュー:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<UserViewModel>" %> 

PartialViews:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Tab1PartialViewModel>" %> 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TabNPartialViewModel>" %> 

次に、あなたのビューであなたのようにあなたの部分的なビューを使用することができます。

お使いのコントローラのアクションで
<% Html.RenderPartial(Model.PartialViewName, Model.Tab); %> 

public ActionResult YourAction(string tab) 
{ 
    // check if tab is valid !!! 

    var model = new UserViewModel { 
     User = new myApplication.Models.User(); 
     PartialViewName = tab; 
     Tab = TabRepository.GetTabByName(tab); 
     /* 
     * or 
     * Tabs = (new Dictionary<string, type> { 
     *  {"Tab1", typeof(Tab1PartialViewName)}, 
     *  {"TabN", typeof(TabNPartialViewName)} 
     *  })[tab]; 
     */ 
    }; 

    Return View(model); 
} 

は、この情報がお役に立てば幸いです。

+0

これは私の問題に対処するための素晴らしい方法と思われる。しかし、PartialViewModelBaseクラスはどうですか?それは私が作成しなければならないクラスですか? TabRepository.GetTabByName(タブ); PartialViewModelBaseを返す必要があります。これどうやってするの ? – Flesym

+0

PartialViewModelBaseは、PartialViewModelsの基本クラスに過ぎません。それは単に空の抽象クラスである可能性があります。 TabRepositoryは、例えば一例です。 Dictionary TabTypes = new {{"Tab1"、typeof(Tab1ViewModel)}、...}を作成するだけで済みます。あなたのコントローラのどこかで次のようにしてください:Tab = Activator.CreateInstance(TabTypes [tab]); –

2

:その様子からhttp://docs.jquery.com/UI/Tabs

+0

JQuery UIのタブはすべてクライアントです。 – erikkallen

+0

いない、彼らはそこにAJAXを経由してそれらをロードするためのオプションである、ではありません。http://docs.jquery.com/UI/Tabs#option-ajaxOptions –

+0

はい、彼らはあなたがそれらをクリックしたとき、彼らはよポストバックはありません使用XmlHttpRequest – erikkallen

0

、タブのいずれもリンクをオフに発射し、そのためのHTMLを見ずに何かを明らかにしているように見えるん、ちょうど彼らがしているようですどのように見えるようにスタイルされ、特定のクエリ文字列値を渡すだけです。あなたは1がある場合、指定されたクエリ文字列値を取得し、それに応じてあなたの結果のデータをソートする必要があります後のように見えるものを達成するために

0

別の解決策は、別のアクションを選択するために、クエリ文字列を使用するカスタムルートを(RouteBaseから派生)を作成することです。各アクションには、ページの共通コンテンツを含むマスターページを使用する個別のビューがあります。

基本的には、すべてあなたが実装されたカスタムルートクラスによって選ばなどアクション「統計」、「環境設定」と「がUserController」を、持っていると思います。

関連する問題