ナビゲーション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