ナビゲーションIDを変更して現在のページASP.NETを強調表示するプログラムによるソリューション
-
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'のようになります。