bruno Kenj on System.Web

Dica ASP.NET e MooTools

Bruno Kenj | ASP.NET, ASP.NET AJAX, Javascript

Oba, ASP.NET! Como tenho andado muito ocupado, os posts com as dicas do dia-a-dia de ASP.NET, ASP.NET AJAX, Padrões Web e MooTools (mooflex) vão se acumulando mas espero conseguir postar todas as informações.

A dica de hoje é para um cenário simples e limitado. Na minha camada de apresentação (tags), meu menu é formado por uma lista não numerada <ul> com um id “ulmenus” e vários itens de lista <li> com uma classe de estilo definida “nonactive“. A idéia é que o menu referente à página que estou acessando tenha a classe de estilo alterada para “active“, para ser apresentada de uma forma diferente.

Precisamos então saber qual a página que estamos acessando (neste caso, ficar atento ao Server.Transfer() que ao ser utilizado, a página muda mas a URL não) e recuperar a lista de itens do menu. Um cenário pequeno e para um sistema específco.

Vamos aos códigos. Primeiro, o código do lado servidor, para recuperarmos o nome da página da requisição atual. Apenas uma propriedade da página. Esta pode ficar em uma basepage.

public String NomePagina
{
    get 
    {
string[] str = Request.AppRelativeCurrentExecutionFilePath.Split('/');
return str[str.Length - 1].Split('.')[0];
    }
}

Voltando para o lado do cliente, teremos a nossa lista que formará o menu. Nela, o atributo HREF está utlizando o método ResolveUrl() do lado servidor para que possamos utilizar a MasterPage e independente da estrutura de pasta, o caminho sempre esteja correto.

<ul id="ulmenus">
<li class="nonactive"><a href="<%= ResolveUrl("~/Default.aspx") %>">Inicio</a></li>
<li class="nonactive"><a href="<%= ResolveUrl("~/Manter/Pagamentos.aspx") %>">Pagamentos</a></li>
<li class="nonactive"><a href="<%= ResolveUrl("~/Manter/Imovel.aspx") %>">Imóvel</a></li>
</ul>

Depois que a lista estiver pronta e no devido lugar, precisaremos escrever nosso código para percorrer os itens da lista e comparar o nome da página que está na requisição atual com o item do menu. Quando for igual, mudar a classe de estilo para “active“.

O legal daqui foi a utilização do MooTools, framework para se trabalhar com DOM, AJAX, JSON, Etc. em JavaScript. O código ficou bem compacto. Lembrando que o código deve rodar depois que o elemento já esteja montado no cliente.

A função FormataNome retorna o mesmo valor que o atributo que criamos para a página: apenas o nome da página. Para recuperar todos os itens da lista, utilizaremos a função $$ do MooTools, colocando o ID da lista e a classe dos itens.

Function: $$
Selects, and extends DOM elements. Elements arrays returned with $$ will also accept all the methods.
The return type of element methods run through $$ is always an array. If the return array is only made by elements,
$$ will be applied automatically.

Depois que recuperamos os itens, vamos correr um a um comparando com o nome da página acessada. Olha como ficou simples utilizando a propriedade .each do nosso array. Aqui, aconselho a fazer uma comparação em LowerCase, para não correr o risco.

Hoje não há limites para a Web. Produtividade com qualidade, esse é o Microsoft Visual Web Developer 2008.

Vou colocar um estilo de formatação em código aqui no blog. É necessário para uma melhor visualização e entendimento, além de não precisar de usar imagem.

A próxima dica de ASP.NET e MooTools será como utilizar o MooTools em aplicações ASP.NET e uma demonstração de como acender e apagar (mouse over e mouse out) a cor de fundo de uma linha do GridView. Bem interessante o efeito visual!

abraços,

Comentários (0) | 28-08-2007