[Parte 7] Capítulo 3: Criando e utilizando um Helper

Uma outra opção para criar uma aparência consistente em seu site é criar um helper personalizado. Como vimos no post Instalando helpers com package manager. Um helper é um componente que permite realizar uma tarefa utilizando uma única linha de código.

O ASP.NET inclui muitos helpers e utilizaremos muitos deles. O helper pode auxiliar na criação de uma aparência consistente permitindo que utilizemos um bloco comum de código em várias páginas do site.

Suponhamos que será necessário criar um item de nota que ficará separado dos parágrafos, o qual será criado utilizando um elemento <div> e seu estilo será definido como um box com uma borda.

Para não adicionar a mesma marcação em todas as páginas, podemos criar um helper e ele irá inserir a nota com apenas uma linha de código, onde for necessário. A utilização desse recurso fará com que o código das páginas seja simples e mais fácil de ler.

Outro ganho com a criação de helpers é a facilidade para dar manutenção no site, uma vez que se for necessário alterar a aparência das notas, será possível alterar em apenas um local.

Esse procedimento exemplifica como criar um helper responsável por criar notas, como foi descrito acima. Este é um exemplo simples, mas um helper personalizado pode ter incluso qualquer marcação e código ASP.NET.

1 - No diretório principal, crie uma pasta chamada "App_Code", caso ela ainda não exista.
2 - Na pasta App_code, crie um novo arquivo chamado MeuHelper.cshtml
3 - Substitua o código gerado pelo código abaixo:

Esse código utiliza a sintaxe @helper para declarar um novo helper chamado InserirNota. Esse helper específico permite passar um parâmetro chamado content que pode conter a combinação de texto e marcação. O helper insere uma string no corpo da nota utilizando a variável @conteudo.

4 - Salve e feche o arquivo.

O próximo procedimento mostra como utilizar um helper personalizado para inserir uma nota em uma página web.

1 - No diretório principal, crie um arquivo chamado TesteHelper.cshtml
2 - Adicione o seguinte código no arquivo:

Para chamar o helper que acabou de ser criado, utilize @ seguido pelo nome do arquivo onde o helper está, seguido por um ponto e em seguida o nome do helper. O texto entre aspas passado entre parênteses será o texto exibido na nota.

3 - Salve as alterações e execute a página. O helper irá inserir a nota no exato local onde foi chamado.

[Parte 6] Capítulo 3: Passando dados para páginas de layout com PageData

Algumas vezes, podemos ter dados definidos na página de conteúdo que serão necessários na página de layout. Para isso, devemos passar os dados de uma página para outra.

Podemos por exemplo, querer exibir o status de login de um usuário, ou podemos tambem querer mostrar ou ocultar áreas de conteúdo com base na entrada de um usuário.

Para passar dados de uma página de conteúdo para uma página de layout, os valores podem ser colocados na propriedade PageData de uma página de conteúdo.

A propriedade PageData é uma coleção de pares de nome/valor que contém os dados que serão passados através das páginas. Na página de layout os valores podem ser lidos fora da propriedade PageData.

Este diagrama mostra como o ASP.NET pode utilizar a propriedade PageData para passar valores de uma página de conteúdo para uma de layout. Quando o ASP.NET começa a criar a página, é criada também a coleção PageData.

Valores da coleção PageData também podem ser acessados por outras seções da página de conteúdo ou por outros blocos de conteúdo.

O procedimento a seguir mostra como é feita a passagem de dados. QUando a página é executada, exibe um botão que permite ao usuário ocultar ou exibir uma lista que é definida na página de layout. Quando os usuários clicam no botão, ele define o valor true/false na propriedade PageData. O layout da página lê o valor, e se for falso, oculta a lista. O valor também é utilizado na página de conteúdo para determinar se deve exibir o botão "Ocultar lista" ou "Exibir lista".

1 - No diretório principal, crie um arquivo chamado Content3.cshtml e substitua seu conteúdo pelo conteúdo abaixo:

Esse código armazena doias coisas na propriedade PageData: o título da página web e verdadeiro/falso para especificar se deseja exibir uma lista. Pode-se observar que o ASP.NET permite que seja colocada uma marcação HTML para a página utilizar o bloco ou não. Por exemplo, o if/else no corpo da página determina se será exibido o formulário, dependendo se PageData["MostrarLista"] for definido como verdadeiro.

2 - Na pasta shared, crie um arquivo chamado _layout3.cshtml e substitua seu conteúdo pelo conteúdo abaixo:

O layout da página inclui a expressão no elemento <title> que pega o valor na propriedade PageData. Também é utilizado o valor de MostrarLista em PageData para determinar quando exibir o conteúdo do bloco de lista.

3 - Ainda na pasta shared, crie um arquivo chamado _List.cshtml e substitua o seu conteúdo pelo conteúdo a seguir:

4 - Execute o arquivo Content3.cshtml no navegador. A página exibirá a lista visível na parte esquerda da página e o botão de ocultar no fundo da página.

[Parte 5] Capítulo 3: Criando seções de conteúdo opcionais

Normalmente, as secções de conteúdo que criamos tem que coincidir com as seções definidas na página de layout. Alguns erros podem surgir em algumas dessas situações:
- A página de conteúdo contém uma seção que nao tem seção correspondente na página de layout
- O layout da página contém uma seção para a qual não existe conteúdo
- O layout de página inclui chamadas de métodos que tentam chamar a seção mais de uma vez

No entanto, podemos evitar o surgimento desses erros declarando uma seção como opcional na página de layout.

Dessa forma, podemos definir múltiplas páginas de conteúdo que compartilhem a mesma página de layout, mas que podem ou não possuir conteúdo para uma seção específica.

Para exemplifcarmos essa situação, utilizaremos o exemplo criado no post anterior. (Para ir direto ao post, clique aqui).

1 - Abra o arquivo Content2.cshtml e apague a seguinte seção:

2 - Salve a página e execute no browser. Uma mensagem de erro será exibida, pois o conteúdo da página não fornece conteúdo para uma seção definida na página de layout, ou seja, a seção de cabeçalho.

3 - Na pasta shared, abra o arquivo _layout2.cshtml e substitua a linha:

por

4 - Execute a página Content2.cshtml novamente (se a página já estiver aberta no navegador, atualize a página). A página será executada sem erro, mesmo que não tenha cabeçalho.

[Parte 3] Capítulo 3: Criando um visual consistente com páginas de layout

Uma abordagem mais estruturada para criar uma aparência consistente em um site é a utilização de páginas de layout. Uma página de layout define a estrutura de uma página web, mas não contém nenhum conteúdo. Você pode criar páginas que possuam conteúdo, e em seguida, ligá-las à página de layout.

Quando as páginas forem exibidas, serão formatadas de acordo com a página de layout. Podemos dizer que a página de layout funciona como uma espécie de modelo para o conteúdo que é definido em outras páginas.

O layout da página é igual a qualquer página HTML, exceto pelo fato de que a página contém uma chamada para o método RenderBody. A posição do método RenderBody no layout determina onde as informações de conteúdo serão incluídas.

O diagrama a seguir mostra como páginas de conteúdo e páginas de layout são mescladas em tempo de execução para produzir a página da web completa. O navegador solicita uma página de conteúdo. A página de conteúdo possui o código que especifica qual layout será utilizado em sua estrutura. Na página de layout, o conteúdo é inserido no ponto onde o método RenderBody é chamado. Blocos de conteúdo também podem ser inseridos, chamando o método RenderPage, como fizemos no post anterior. Quando a página está completa, é enviada ao navegador.

O procedimento a seguir mostra como criar uma página de layour e páginas de conteúdo ligadas a ela.

1 - Na pasta raiz do seu site, crie um arquivo chamado _Layout1.cshtml
2 - Ediste seu conteúdo, para o conteúdo a seguir:

Utilizamos o método RenderPage em uma página de layout para inserir blocos de conteúdo. Uma página de layout pode conter apenas uma chamada para o método RenderBody.

3 - Na pasta Shared, crie um arquivo chamado _cabecalho2.cshtml e substitua o conteúdo pelo seguinte?

4 - Na pasta raiz, crie uma nova pasta com o nome de Styles
5 - Dentro da pasta Styles, crie um arquivo chamado Site.css e adicione as definições de estilo a seguir:

Estas definições de estilo apenas mostram como as folhas de estilo podem ser utilizadas em páginas de layout. Cada um pode definir seus próprios estilos para esses elementos.

6 - Na pasta raiz, crie um arquivo chamado Content1.cshtml e substitua seu conteúdo pelo seguinte:

7 - Execute a página Content1.cshtml em um navegador. A página processada utiliza o formato e as folhas de estilo definidas no arquivo _Layout1.cshtml e o conteúdo definido em Content1.cshtml.

[Parte 2] Capítulo 3: Criando blocos reutilizáveis de conteúdo

A maioria dos sitespossuem conteúdos que são exibidos em todas as páginas, como cabeçalho e rodapé, ou uma caixa que informa aos usuários onde estão e se estão logados. O ASP.NET permite que seja criado um arquivo separado com bloco de conteúdo que pode conter texto, marcação e código, assim como uma página web normal.

Pode-se então inserir o bloco de conteúdo em outras páginas no local onde queremos que as informações apareçam. Dessa forma, não teremos que copiar e colar o conteúdo em cada uma das páginas.

Essa estratégia é bastante comum e torna mais fácil a atualização do site. Se alguma mudança for necessária, basta alterar apenas um arquivo e essa mudança refletirá em todas as páginas que possuirem aquele bloco.

O diagrama a seguir mostra como blocs de conteúdo trabalham. Quando um navegador solicita uma página do servidor, o ASP.NET insere o bloco de conteúdo no ponto que o método RenderPage é chamado na página principal. A página com o bloco de conteúdo incorporado é então enviada ao navegador.

Neste procedimento, será criada uma ágina que faz referência a dois blocos de conteúdo (um cabeçalho e um rodapé) que estão localizados em arquivos separados. Poderemos utilizar esses blocos de conteúdo em quaisquer página do site. Quando estiver pronto, teremos uma página como esta:

1 - No diretório principal do seu site, crie um arquivo chamado index.cshtml
2 - Insira o código abaixo no lugar da marcação já existente

3 - Crie uma pasta chamada Shared. (É comum armazenar arquivos compartilhados entre páginas em uma pasta chamada "shared"). Para criar uma pasta, clique em "New", em seguida "New Folder".
4 - Dentro da pasta "shared", crie um arquivo chamado _cabecalho.cshtml
5 - Substitua o conteúdo da página pelo conteúdo a seguir:

Observe que o nome do arquivo possui um "_" como prefixo. As páginas prefixadas com underscore (_) não são enviadas ao navegador. Essa regra evita que as pessoas solicitem estas páginas, intencionalmente ou não. Normalmente utilizamos esse prefixo em páginas de blocos de conteúdo pois estas são páginas criadas para serem inseridas em outras páginas.

6 - Na pasta "shared", crie um arquivo chamado _rodape.cshtml e substitua o conteúdo pelo conteúdo a seguir:

7 - No arquivo index.cshtml, adicione o código abaixo, que faz duas chamadas ao método RenderPage:

O código acima exempliifca como inserir um bloco de código em uma página Web. Chamamos o método RenderPage e passamos por parâmetro o nome do arquivo que contém o conteúdo que desejamos inserir naquele ponto. Aqui, estamos inserindo o conteúdo de _cabecalho.cshtml e _rodape.cshtml no arquivo index.cshtml.

8 - Rode a página index.cshtml. Se abrirmos o código-fonte direto do navegador, poderemos observar que é exibida a marcação da página inteira, ocultando o fato de que os códigos vem de arquivos diferentes.

[Parte 1] Capítulo 3: Criando um layout consistente

Para tornar mais eficiente a criação de páginas web, é possível criar blovos reutilizáveis de conteúdo (como cabeçalhos e rodapés) para o site, e dessa forma criar um layout consistente para todas as páginas.

No capítulo 3, veremos:
- Como criar blocos reutilizáveis de conteúdo, como cabeçalhos e rodapés
- Como criar uma aparência consistente para todas as páginas do site utilizando um layout de página
- Como passar dados em tempo de execução para uma página de layout
- Como criar e utilizar um helper personalizado

Os recursos ASP.NET introduzidos nesse capítulo serão:
- Blocos de conteúdo, são arquivos que contém conteúdo HTML formatado para ser inserido em várias páginas
- Páginas de layout, são as páginas que contém em formato HTML conteúdo que pode ser compartilhado por páginas no site
- RenderPage, RenderBody e RenderSection, que indicam onde inserir os elementos da página
- O dicionário PageData que permite compartilhar dados entre blocos de conteúdos e páginas de layout