ナビゲーションIDを変更して現在のページASP.NETを強調表示するプログラムによるソリューション

StackOverflow https://stackoverflow.com/questions/188124

  •  06-07-2019
  •  | 
  •  

質問

Visual Studio 2008とASP.NET 3.5を使用してWebサイトを作成しています。レイアウトを簡素化し、コンテンツとレイアウトではなくコンテンツのコンテンツページを保持するために、マスターページを設定しています。

ナビゲーションはリストであり、CSSであるため、バーのように見えます。バーのページを強調表示するには、リストアイテムがこの<li id="current">のように見える必要があります。回避できる場合は、<asp:ContentPlaceHolder>は使用しません。これを達成するために各ページ(または単にマスターページに)に追加できるコードはありますか?<=>を使用してスタックしていますか?

役に立ちましたか?

解決

ページセクションというマスターページにプロパティを追加します

public string PageSection { get; set; }

MasterTypeページディレクティブをコンテンツページの上部に追加する

<%@ MasterType VirtualPath="~/foo.master" %>

コンテンツページのコードビハインドで、マスターページのPageSectionプロパティを設定します

Master.PageSection = "home";    

マスターページで、bodyタグをサーバータグにします

<body ID="bodyTag" runat="server">

マスターページコードビハインドで、そのプロパティを使用してbodyタグにクラスを設定します

bodyTag.Attributes.Add("class", this.PageSection);

各ナビゲーションアイテムに一意のID属性を与えます。

CSSで、現在のページクラスに基づいてナビゲーションアイテムの表示を変更します

.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
} 

他のヒント

Web.sitemapファイルの使用を検討しましたか?それは本当に簡単になります。サイトマップファイルが次のように見える場合...

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
    <siteMapNode url="~/Default.aspx" title="Home"  description="" />
    <siteMapNode url="~/Blog.aspx" title="Blog"  description="" />
    <siteMapNode url="~/AboutUs.aspx" title="AboutUs"  description="" />
  </siteMapNode>
</siteMap>

...その後、マスターページでこれを実行して、目的の結果を得ることができます。

<asp:SiteMapDataSource ID="sitemapdata" runat="server" ShowStartingNode="false"  />
<ul id="navigation">
    <asp:Repeater runat="server" ID="navrepeater" DataSourceID="sitemapdata">
        <ItemTemplate>
            <li class="<%# SiteMap.CurrentNode.Equals(Container.DataItem) ? "activenav" : "inactivenav" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "url") %>"><%# DataBinder.Eval(Container.DataItem, "title") %></a></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

現在のページのLIには、<!> quot; activenav <!> quotのクラスがあります。 (または使用することに決めたもの)、および他のクラスには<!> quot; inactivenav <!> quot;のクラスがあります。それに応じてCSSを記述できます。これは私が自分のサイトで使用している手法であり、うまく機能します。

セマンティックマッチが優れており、どこでも同じクラスまたはIDを使用してナビゲーションを維持し、一致するようにbody要素のIDのみを変更するために設定するのが簡単な変数です。

<li id="homeNav">home</li>
<li id="blogNav">blog</li>

そして各ページで...

<body id="home">
<body id="blog">

CSS:

#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}

ContentPlaceHolderの使用または不使用は、id = <!> quot; current <!> quotを持つ要素には影響しません。設定します。

id = <!> quot; current <!> quotを適切に追加するには、メニューコンポーネントをレンダリングするときに、マスターページ、javascript関数、またはその他のコードビハインドのいずれかのメソッドを調べる必要があります。作成時にリストに追加します。

マスターページコードクラスで保護された文字列プロパティを作成する方法は? OnLoadをオーバーライドします:

protected string _bodyId;

protected override void OnLoad(EventArgs e)
{
    _bodyId = "your css id name";
}

その後、マスターページaspxで:

<body id="<%= _bodyId %>">

CSSをいじる必要はありません。特に、CSSがデザイン会社からのものである場合に便利です。

これは、背景を変更するためにcssクラスを追加することにより、JQueryを使用して達成した方法です。

$("ul.nav > li > a:contains('<%= SiteMap.CurrentNode.ParentNode.Title %>')").addClass("navselected");

<!> quot; .nav <!> quot; in ul.nav(Jquery)は、ULタグに適用されるcssクラスです。

:containsは、すべての<!> quot; a <!> quot;の内容の確認に役立ちます。 ul-<!> gt; li-<!> gt; a内のタグ/要素。Menuに印刷されるParentNode Titleを使用...

見つかった場合、navselectedという名前のcssクラスを特定のul-<!> gt; li-<!> gt; aタグ/要素に適用します。

よろしく、ミネシュ・シャー

Systems Plus Pvt。株式会社

www.systems-plus.com

これを実現するには、javascriptを使用します。 cssで、#currentをクラス(.current)に変更し、作成した各ListItemにIDを設定します。次に、RegisterStartupScriptを使用して、適切なListItemを取得し、現在のスタイルを割り当てるjavascriptメソッドを呼び出します。プロトタイプを使用すると、これは$( 'MyPageLi')。className = 'current'のようになります。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top