내비게이션 ID 변경을위한 프로그램 솔루션은 현재 페이지 ASP.Net을 강조하기 위해

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

  •  06-07-2019
  •  | 
  •  

문제

Visual Studio 2008 및 ASP.NET 3.5와 함께 웹 사이트를 작성하고 있습니다. 레이아웃을 단순화하고 컨텐츠 및 레이아웃이 아닌 콘텐츠 페이지를 유지하기 위해 마스터 페이지가 설정되어 있습니다.

내비게이션이 목록입니다. CSS는 막대처럼 보입니다. 막대의 페이지를 강조하려면 목록 항목이 다음과 같이 보일 필요가 있습니다. <li id="current">. 사용하고 싶지 않습니다 <asp:ContentPlaceHolder> 내가 그것을 피할 수 있다면. 이것을 달성하기 위해 각 페이지 (또는 마스터 페이지에만 추가 할 수있는 코드가 있습니까? <asp:ContentPlaceHolder>'에스?

도움이 되었습니까?

해결책

페이지 섹션이라는 마스터 페이지에 속성 추가

public string PageSection { get; set; }

콘텐츠 페이지 상단에 MasterType 페이지 지시문 추가

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

뒤에 콘텐츠 페이지 코드에서 마스터 페이지의 페이지 섹션 속성을 설정하십시오.

Master.PageSection = "home";

마스터 페이지에서 본문 태그를 서버 태그로 만듭니다.

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

뒤의 마스터 페이지 코드에서 해당 속성을 사용하여 바디 태그에서 클래스를 설정하십시오.

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

각 NAV 항목에 고유 한 ID 속성을 제공하십시오.

CSS에서 현재 페이지 클래스를 기반으로 NAV 항목 표시를 변경하십시오.

.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에는 "ActiveNav"클래스 (또는 사용하기로 결정한 것)가 있고 다른 페이지에는 "inactivenAv"클래스가 있습니다. 그에 따라 CSS를 작성할 수 있습니다. 이것이 제가 사이트에서 사용하는 기술이며 훌륭하게 작동합니다.

더 나은 의미 론적 일치이며 동일한 클래스 또는 ID를 어디에서나 사용하여 내비게이션을 유지하기 위해 설정하기가 더 쉬운 변수 일 가능성이 높으며, 신체 요소의 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 = "Current"설정이있는 요소에 영향을 미치지 않습니다.

메뉴 구성 요소가 생성 될 때 ID = "current"를 올바르게 추가하도록 메뉴 구성 요소를 렌더링 할 때 마스터 페이지의 코드 비드에서 JavaScript 함수 또는 다른 방법을 살펴 봐야합니다.

MasterPage 코드 클래스에서 보호 된 문자열 속성을 만드는 것은 어떻습니까? onload를 대체 :

protected string _bodyId;

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

그런 다음 MasterPage ASPX에서 :

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

그런 다음 CSS를 엉망으로 만들 필요가 없습니다. 특히 CSS가 디자인 대행사에서 온 경우 유용합니다.

CSS 클래스를 추가하여 배경을 변경하여 jQuery를 사용하여 달성 한 방법은 다음과 같습니다.

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

".nav" 안에 ul.nav (jQuery)는 UL 태그에 적용되는 CSS 클래스입니다.

:contains 메뉴에 인쇄 된 ParentNode 제목이있는 ul-> li-> a 내의 모든 "a"태그/요소의 내용을 확인하는 데 도움이됩니다 ...

발견 된 경우, navSelected라는 이름의 CSS 클래스를 특정 ul-> li-> 태그/요소에 적용합니다.

안부, Minesh Shah

시스템 플러스 Pvt. 주정부

www.systems-plus.com

나는 이것을 달성하기 위해 JavaScript를 사용합니다. CSS에서 #Current를 클래스 (.Current)로 변경 한 다음 작성한 각 목록에 ID가 있습니다. 그런 다음 registerStartUpscript를 사용하여 적절한 ListItem을 가져 와서 전류 스타일을 할당하는 JavaScript 메소드를 호출하십시오. 프로토 타입을 사용하면 $ ( 'mypageli')처럼 보입니다. ClassName = 'current'.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top