ASP.netで選択可能なタブ/メニューを実装するためのエレガントな方法はありますか？

ASP.netでタブスタイルのメニューシステムを実装する方法を見つけるのに苦労しています。タブはHTML/CSSの観点から見栄えが良く、マスターページに実装されているため、コンテンツページからbodyタグにアクセスすることはできません。私が解決しようとしているのは、ユーザーがアクセスしているページに基づいて「アクティブなタブ」を変更する方法です。ASP.netで選択可能なタブ/メニューを実装するためのエレガントな方法はありますか？

私はこれを行うにはいくつかの方法を考えることができます：

Dynamicly各ページのロード
でHTMLを生成し、選択したタブクラス
使用のjQueryのリスト項目を操作します

いくつかの解決策が不適切と思われる追加の問題があります。 1つのタブでいくつかの異なるページ名が埋め込まれる可能性があります。たとえば、Default.aspxとCourseDetail.aspxの両方のコースタブを選択する必要があります。

これらのどれも特にエレガントではないようですが、私はASP.netでこれを行うより良い方法があると感じていますが、私は何を探しているのかわかりません。

HTML：

<div id="tabs"> 
    <ul> 
     <li class="selectedtab"><a href="/">Courses</a></li> 
     <li><a href="#">My Courses</a></li> 
     <li><a href="#">Administration</a></li> 
    </ul> 
</div>

CSS：

#head ul 
{ 
    list-style: none; 
    padding:0; 
    margin:0; 
} 

#head li 
{ 
    display: inline; 
    border: solid; 
    border-width: 1px 1px 0 1px; 
    margin: 0 0.5em 0 0; 
    background: #EEE; 
    font-size: large; 
    font-weight: bold; 
    padding-top: 0.3em; 
} 

#head li a 
{ 
    padding: 0 1em; 
    text-decoration: none; 
    color: Black; 
} 

#head .selectedtab 
{ 
    padding-bottom: 1px; 
    background: white; 
    border-bottom: 1px solid white; 
} 

#tabs 
{ 
    text-align: right; 
    width: 100%; 
    border-bottom: 1px solid; 
}

出典

2009-06-29 Richard Slater

私はいつも過去にこれをやった方法は、ボディにクラス、各タブクラス（またはID）を与えることです、CSS内のそれらを使用してください。

<!-- the tabs now have a class you can use --> 
<div id="tabs"> 
    <ul> 
     <li class="tabone"><a href="/">Courses</a></li> 
     <li class="tabtwo"><a href="#">My Courses</a></li> 
     <li class="tabtre"><a href="#">Administration</a></li> 
    </ul> 
</div>

最初のページ

<body class="tabonepage">...

secondpage

<body class="tabtwopage">...

CSS - これは少し冗長取得しますが、それは一箇所に局在しています。あなたは493個のタブを持っていない限り、あなたは

.tabonepage .tabone, 
.tabtwopage .tabtwo, 
.tabtrepage .tabtre, 
{ 
    padding-bottom: 1px; 
    background: white; 
    border-bottom: 1px solid white; 
}

編集として私は...クラスを得ている方法については、

これがどこである黄金のだろうI恥ずべきで私の頭を吊るす。私は通常BodyClassと呼ばれるメインマスターにプロパティを配置し、そのプロパティを設定するOnPreRenderにコードを入れ、メインホールに式の穴を入れます。それは本当のものではありませんが、私はそれと一緒に暮らしています。私の目には、ボディクラスがコードビハインドよりもはるかに重要です.-)コードビハインドを伴わない方法があります。 MVCが助けてくれる気がする。

MainMaster.Master：

<body class='<%=BodyClass%>'>

MainMaster.Master.cs

public string BodyClass{ get; set; }

everyotherpage。aspxの（これが必要だった場合、私は覚えていないことができ、私はそれはあなたが分離コードでBodyClassプロパティへのアクセスを強く型付けされていると思う）

<%@ MasterType VirtualPath="~/MasterPages/MainMaster.Master" %>

everyotherpage .aspx.cs

protected override void OnPreRender(EventArgs e) 
    { 
     base.OnPreRender(e); 
     this.Master.BodyClass = "areamydetails"; 
    }

出典

2009-06-29 10:19:21

私はそれが好きです - どのようにASP.netでそれを実装するか考えています。私はマスターページを使用しているので、body要素のCssClassを変更するアクセス権がないようです。 –

私は、DIVやコントロールのCSSクラスを現在の位置に基づいて切り替えることは、かなりエレガントな方法だと思います。アクセスしている現在のページを（サイトマップを使用して）ASP.NETナビゲーションAPIにリンクすると、すばらしいことになります。

出典

2009-06-29 10:26:20 Cerebrus

ええ、SiteMapを使用することはおそらく良い考えです。 – Noldorin

ASP.netで選択可能なタブ/メニューを実装するためのエレガントな方法はありますか？

答えて

関連する問題