4 de jan de 2012

[Parte 6] Capitulo 1: Começando com WebMatrix Beta e páginas ASP.NET

UTILIZANDO CÓDIGO DE PROGRAMAÇÃO EM PÁGINAS ASP.NET


Nesse procedimento iremos criar uma página com código simples, que exiba a data e a hora do sistema na tela. Este exemplo irá introduzir o conceito Razzor Syntax, que adiciona o código de programação à pagina HTML ou ASP.NET. O exemplo irá utilizar um dos helpers instalados no post anterior.

Abra o arquivo "default.cshtml" e adicione o trecho em destaque abaixo:

Esta página contém as marcações HTML e o caracter "@" identifica o código da programação ASP.NET.

Salve a página e clique em "Run" para rodar a página com as alterações. O resultado será:

Uma única linha de comando adicionada ao código da página foi capaz de capturar a data do sistema, formatá-la e enviá-la ao navegador.

Se quisermos algo mais complexo, como mostrar a rolagem de uma lista de posts do twitter de alguém que você selecionar. Podemos utilizar um helper para isso, simplificando as tarefas relacionadas ao nosso objetivo. Neste caso, tudo que temos que fazer é buscar e exibir um feed do twitter.

Vamos criar então um novo arquivo CSHTML, chamado twitterFeed.cshtml:

No código da página criada, é necessário fazer as alterações para que fique como na figura abaixo:

Esse html cria um box para receber o nome do twitter a ser exibido e um botão para realizar a entrada de dados. Por esse motivo, o trecho relacionado a esses elementos está dentro do primeiro bloco <div>.

No segundo bloco <div> temos o código da página. Para marcar o código utilizamos sempre o caracter "@". Quando a página for carregada, bem como quando o usuário clicar no botão sem digitar nada, será exibido por padrão o twitter da Microsoft. Ao digitar um twitter válido, as postagens serão exibidas abaixo dos campos.

Ao executar a página:

Ao digitar um twitter válido:

Um comentário:

  1. Cara, valeu por tudo garota!!!
    Estou apanhando um pouco pois já houve várias atualizações e mudançãs, mas estou aprendendo aqui com vc!!!

    ResponderExcluir

Sua crítica, sugestão ou comentário será muito bem vindo!