solução programática para mudança ID de navegação para realçar ASP.NET página atual

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

  •  06-07-2019
  •  | 
  •  

Pergunta

Estou escrevendo um site com o Visual Studio 2008 e ASP.NET 3.5. Eu tenho uma masterpage criado para simplificar o layout e para manter as páginas de conteúdo para conteúdo ao invés de conteúdo e layout.

A navegação é lista, css'd então parece que um bar. A fim de destacar a página na barra, as necessidades de item de lista para ficar assim <li id="current">. Eu não quero usar <asp:ContentPlaceHolder> se eu puder evitá-lo. Existe algum código que posso acrescentar para cada uma das minhas páginas (ou apenas para o masterpage?) Para alcançar este objetivo ou estou preso usando de <asp:ContentPlaceHolder>?

Foi útil?

Solução

Adicionar um imóvel para sua página mestre chamado Seção Página 

public string PageSection { get; set; }

Adicione uma diretiva página MasterType ao topo de suas páginas de conteúdo 

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

Em seu conteúdo por trás de código da página, defina a propriedade PageSection da página mestra 

Master.PageSection = "home";

Na sua página principal, fazer a tag corpo de uma marca de servidor 

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

Na página mestre por trás do código, o uso dessa propriedade para definir uma classe sobre a tag body 

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

Dê cada um de seus itens nav um atributo ID único.

Em seu css, alterar a exibição dos itens nav com base na classe de página atual 

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

Outras dicas

Você considerou usando um arquivo Web.sitemap? Isso torna mais fácil real. Se o arquivo de mapa do site se parece com isso ... 

<?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>

... então você pode fazer isso em sua página mestra para alcançar os resultados desejados: 

<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 da página atual terá uma classe de "activenav" (ou o que você decidir usar), e os outros terão uma classe de "inactivenav". Você pode escrever sua CSS em conformidade. Esta é a técnica que eu uso no meu site e ele funciona muito bem.

É um jogo melhor semântica e provavelmente uma variável mais fácil de conjunto para manter a navegação usando as mesmas classes ou ids em todos os lugares e apenas alterar o id do elemento do corpo ao jogo: 

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

e, em seguida, em cada página ... 

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

E no css: 

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

O uso ou não uso de ContentPlaceHolder não afetará qual elemento tem o id = set "corrente" sobre ele.

Você tem que olhar para algum método, quer no seu codebehind para a página principal, uma função javascript ou qualquer outra coisa ao renderizar o componente de menu para adicionar corretamente o id = "atual" à lista quando ele é criado.

Que tal criar uma propriedade string protegido em sua classe de código masterpage? Substituir o OnLoad: 

protected string _bodyId;

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

Então em seu aspx masterpage: 

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

Em seguida, você não tem que mexer com o seu CSS, especialmente útil se o CSS veio de uma agência de design.

Veja como temos conseguido isso usando JQuery anexando a classe css para mudar o fundo. 

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

O ".nav" em ul.nav (em Jquery) é a classe css aplicado à tag UL.

:contains ajuda a verificar o conteúdo de todos "a" tag / elemento dentro do ul-> li-> a com ParentNode título que é impresso no menu ...

Se encontrado, aplica-se a classe CSS chamada navselected para o específico ul-> li-> a tag / elemento.

Regards, Minesh Shah

Sistemas Além disso Pvt. Ltd.

www.systems-plus.com

Gostaria de usar javascript para fazer isso. Em css, mudar sua #Current ser uma classe (.Current) e depois ter id em cada um de seus ListItems que você criar. Em seguida, usando RegisterStartupScript, chamar um método javascript que recebe o ListItem e atribui a ele um estilo de corrente apropriada. Usando Prototype, este seria parecido com $ ( 'MyPageLi'). ClassName = 'atual'.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top