Apresentando Páginas da Web do ASP.NET – Noções básicas de programação

Artigo
07/13/2023

Este tutorial fornece uma visão geral de como programar em Páginas da Web do ASP.NET com a sintaxe Razor.

O que você aprenderá:

A sintaxe "Razor" básica que você usa para programação em Páginas da Web do ASP.NET.

Alguns C#básicos, que é a linguagem de programação que você usará.

Alguns conceitos fundamentais de programação para Páginas da Web.

Como instalar pacotes (componentes que contêm código predefinido) a serem usados com seu site.

Como usar auxiliares para executar tarefas comuns de programação.

Recursos/tecnologias discutidos:

NuGet e o gerenciador de pacotes.

O Gravatar auxiliar.

Este tutorial é principalmente um exercício para apresentar a sintaxe de programação que você usará para Páginas da Web do ASP.NET. Você aprenderá sobre a sintaxe razor e o código escritos na linguagem de programação C#. Você teve um vislumbre dessa sintaxe no tutorial anterior; neste tutorial, explicaremos mais a sintaxe.

Prometemos que este tutorial envolve a maior parte da programação que você verá em um único tutorial e que é o único tutorial que se trata apenas de programação. Nos tutoriais restantes deste conjunto, você realmente criará páginas que fazem coisas interessantes.

Você também aprenderá sobre auxiliares. Um auxiliar é um componente — uma parte empacotada do código — que você pode adicionar a uma página. O auxiliar executa um trabalho para você que, de outra forma, pode ser entediante ou complexo de fazer manualmente.

Criando uma página para reproduzir com o Razor

Nesta seção, você jogará um pouco com o Razor para ter uma noção da sintaxe básica.

Inicie o WebMatrix se ele ainda não estiver em execução. Você usará o site criado no tutorial anterior (Introdução Com Páginas da Web). Para reabri-lo, clique em Meus Sites e escolha WebPageMovies:

Captura de tela da tela inicial da Matriz da Web mostrando as opções Abrir Site e Meus Sites realçadas com um retângulo vermelho.

Selecione o workspace Arquivos .

Na faixa de opções, clique em Novo para criar uma página. Selecione CSHTML e nomeie a nova página TestRazor.cshtml.

Clique em OK.

Copie o seguinte para o arquivo, substituindo completamente o que já está lá.

Observação

Quando você copia código ou marcação dos exemplos em uma página, o recuo e o alinhamento podem não ser os mesmos do tutorial. No entanto, o recuo e o alinhamento não afetam a forma como o código é executado.

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

Examinando a página de exemplo

A maior parte do que você vê é HTML comum. No entanto, na parte superior, há esse bloco de código:

@{
   // Working with numbers.
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings).
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects.
   var rightNow = DateTime.Now;
}

Observe as seguintes coisas sobre este bloco de código:

O caractere @ informa ASP.NET que o que se segue é o código Razor, não HTML. ASP.NET tratará tudo após o caractere @ como código até que ele seja executado em algum HTML novamente. (Nesse caso, esse é o <! Elemento DOCTYPE> .
As chaves ( { e } ) incluem um bloco de código Razor se o código tiver mais de uma linha. As chaves informam ASP.NET onde o código desse bloco é iniciado e termina.
Os caracteres // marcam um comentário , ou seja, uma parte do código que não será executada.
Cada instrução deve terminar com um ponto e vírgula (;). (No entanto, não comentários.)
Você pode armazenar valores em variáveis, que você cria (declarar) com o palavra-chave var. Ao criar uma variável, você dá um nome a ela, que pode incluir letras, números e sublinhado (_). Nomes de variáveis não podem começar com um número e não podem usar o nome de uma palavra-chave de programação (como var).
Você inclui cadeias de caracteres (como "ASP.NET" e "Páginas da Web") entre aspas. (Elas devem ser aspas duplas.) Os números não estão entre aspas.
Espaço em branco fora das aspas não importa. Quebras de linha na maioria das vezes não importam; a exceção é que você não pode dividir uma cadeia de caracteres entre aspas entre linhas. Recuo e alinhamento não importam.

Algo que não é óbvio neste exemplo é que todo o código diferencia maiúsculas de minúsculas. Isso significa que a variável TheSum é uma variável diferente das variáveis que podem ser nomeadas como theSum ou thesum. Da mesma forma, var é um palavra-chave, mas Var não é.

Objetos e propriedades e métodos

Em seguida, há a expressão DateTime.Now. Em termos simples, DateTime é um objeto . Um objeto é uma coisa com a qual você pode programar: uma página, uma caixa de texto, um arquivo, uma imagem, uma solicitação da Web, uma mensagem de email, um registro de cliente etc. Os objetos têm uma ou mais propriedades que descrevem suas características. Um objeto de caixa de texto tem uma propriedade Text (entre outras), um objeto de solicitação tem uma propriedade url (e outros), uma mensagem de email tem uma propriedade From e uma propriedade To e assim por diante. Os objetos também têm métodos que são os "verbos" que podem ser executados. Você trabalhará muito com objetos.

Como você pode ver no exemplo, DateTime é um objeto que permite programar datas e horas. Ele tem uma propriedade chamada Agora que retorna a data e a hora atuais.

Usando código para renderizar a marcação na página

No corpo da página, observe o seguinte:

<div>
  <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
  <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
  <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>

<div>
  <p>The technology is @technology, and the product is @product.</p>
  <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>

<div>
  <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>

Novamente, o caractere @ informa ASP.NET que o que se segue é código, não HTML. Na marcação, você pode adicionar @ seguido por uma expressão de código e ASP.NET renderizará o valor dessa expressão nesse ponto. No exemplo, @a renderizará qualquer valor da variável chamada a, @product renderizará o que estiver na variável chamada product e assim por diante.

No entanto, você não está limitado a variáveis. Em alguns casos aqui, o caractere @ precede uma expressão:

@(a*b) renderiza o produto do que está nas variáveis a e b. (O operador * significa multiplicação.)
@(technology + " " + product) renderiza os valores nas variáveis tecnologia e produto depois de concatená-los e adicionar um espaço no meio. O operador (+) para concatenar cadeias de caracteres é o mesmo que o operador para adicionar números. ASP.NET geralmente pode dizer se você está trabalhando com números ou com cadeias de caracteres e faz a coisa certa com o operador + .
@Request.Url renderiza a propriedade URL do objeto Request. O objeto Request contém informações sobre a solicitação atual do navegador e, claro, a propriedade URL contém a URL dessa solicitação atual.

O exemplo também foi projetado para mostrar que você pode trabalhar de maneiras diferentes. Você pode fazer cálculos no bloco de código na parte superior, colocar os resultados em uma variável e, em seguida, renderizar a variável na marcação. Ou você pode fazer cálculos em uma expressão diretamente na marcação. A abordagem usada depende do que você está fazendo e, até certo ponto, de sua própria preferência.

Ver o código em ação

Clique com o botão direito do mouse no nome do arquivo e escolha Iniciar no navegador. Você verá a página no navegador com todos os valores e expressões resolvidos na página.

Captura de tela da página Testar Razor em execução em uma janela do navegador, mostrando três caixas com os valores e expressões resolvidos.

Examine a origem no navegador.

Captura de tela da origem da página Testar Razor, comparando a origem da página com a saída do navegador da Web renderizada.

Como você espera de sua experiência no tutorial anterior, nenhum código razor está na página. Tudo o que você vê são os valores reais de exibição. Ao executar uma página, você está realmente fazendo uma solicitação para o servidor Web integrado ao WebMatrix. Quando a solicitação é recebida, ASP.NET resolve todos os valores e expressões e renderiza seus valores na página. Em seguida, ele envia a página para o navegador.

Dica

Razor e C#

Até agora, dissemos que você está trabalhando com a sintaxe razor. Isso é verdade, mas não é a história completa. A linguagem de programação real que você está usando é chamada de C#. O C# foi criado pela Microsoft há mais de uma década e se tornou uma das principais linguagens de programação para a criação de aplicativos do Windows. Todas as regras que você viu sobre como nomear uma variável e como criar instruções e assim por diante são, na verdade, todas as regras da linguagem C#.

O Razor refere-se mais especificamente ao pequeno conjunto de convenções de como você inseri esse código em uma página. Por exemplo, a convenção de usar @ para marcar o código na página e usar @{ } para inserir um bloco de código é o aspecto Razor de uma página. Auxiliares também são considerados parte do Razor. A sintaxe Razor é usada em mais lugares do que apenas em Páginas da Web do ASP.NET. (Por exemplo, ele também é usado em ASP.NET exibições MVC.)

Nós menção isso porque, se você procurar informações sobre programação Páginas da Web do ASP.NET, encontrará muitas referências ao Razor. No entanto, muitas dessas referências não se aplicam ao que você está fazendo e, portanto, podem ser confusas. E, na verdade, muitas de suas perguntas de programação realmente serão sobre trabalhar com C# ou trabalhar com ASP.NET. Portanto, se você procurar especificamente informações sobre o Razor, talvez não encontre as respostas necessárias.

Adicionando alguma lógica condicional

Um dos ótimos recursos sobre como usar o código em uma página é que você pode alterar o que acontece com base em várias condições. Nesta parte do tutorial, você brincará com algumas maneiras de alterar o que é exibido na página.

O exemplo será simples e um pouco inventado para que possamos nos concentrar na lógica condicional. A página que você criará fará o seguinte:

Mostre texto diferente na página, dependendo se é a primeira vez que a página é exibida ou se você clicou em um botão para enviar a página. Esse será o primeiro teste condicional.
Exibir a mensagem somente se um determinado valor for passado na cadeia de caracteres de consulta da URL (http://...? show=true). Esse será o segundo teste condicional.

No WebMatrix, crie uma página e nomeie-a como TestRazorPart2.cshtml. (Na faixa de opções, clique em Novo, escolha CSHTML, nomeie o arquivo e clique em OK.)

Substitua o conteúdo dessa página pelo seguinte:

@{
   var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <p>@message</p>
      <p><input type="submit" value="Submit" /></p>
  </div>
  </form>
</body>
</html>

O bloco de código na parte superior inicializa uma variável chamada message com algum texto. No corpo da página, o conteúdo da variável de mensagem é exibido dentro de um <elemento p> . A marcação também contém um <elemento de entrada> para criar um botão Enviar .

Execute a página para ver como ela funciona agora. Por enquanto, é basicamente uma página estática, mesmo se você clicar no botão Enviar .

Voltar para o WebMatrix. Dentro do bloco de código, adicione o seguinte código realçado após a linha que inicializa a mensagem:

@{
    var message = "This is the first time you've requested the page.";

    if(IsPost) {
        message = "Now you've submitted the page.";
    }
}

O bloco if { }

O que você acabou de adicionar foi uma condição if. No código, a condição if tem uma estrutura como esta:

if(some condition){
    One or more statements here that run if the condition is true;
}

A condição a ser testada está entre parênteses. Deve ser um valor ou uma expressão que retorna true ou false. Se a condição for verdadeira, ASP.NET executará a instrução ou as instruções que estão dentro das chaves. (Essas são a parte então da lógica if-then .) Se a condição for falsa, o bloco de código será ignorado.

Aqui estão alguns exemplos de condições que você pode testar em uma instrução if:

if(currentValue > 12) { ... }

if(dueDate <= DateTime.Today) { ... }

if(IsDone == true) { ... }

if(IsPost) { ... }

if(!IsPost) { ... }

if(a != 0) { ... }

if(fileProcessingIsDone != true && displayMessage == false) { ... }

Você pode testar variáveis em relação a valores ou expressões usando um operador lógico ou operador de comparação: igual a (==), maior que (>), menor que (<), maior ou igual a (>=) e menor ou igual a (<=). O operador != significa não igual a — por exemplo, se(um != 0) significa se um não é igual a 0.

Observação

Observe que o operador de comparação igual a (==) não é igual a =. O operador = é usado apenas para atribuir valores (var a=2). Se você misturar esses operadores, receberá um erro ou obterá alguns resultados estranhos.

Para testar se algo é verdadeiro, a sintaxe completa é if(IsDone == true). Mas você também pode usar o atalho if(IsDone). Se não houver nenhum operador de comparação, ASP.NET pressupõe que você está testando true.

O operador ! operador por si só significa um NOT lógico. Por exemplo, a condição if(! IsPost) significa se IsPost não for true.

Você pode combinar condições usando um operador AND lógico (&& ) ou OR lógico (|| operador). Por exemplo, a última das condições if nos exemplos anteriores significa que se FileProcessingIsDone não estiver definido como true E displayMessage estiver definido como false.

O bloco else

Uma última coisa sobre se bloqueia: um bloco if pode ser seguido por outro bloco. Um outro bloco é útil é que você precisa executar um código diferente quando a condição é falsa. Confira um exemplo simples:

var message = "";
if(errorOccurred == true)
{
    message = "Sorry, an error occurred."; 
}
else
{
    message = "The process finished without errors!";
}

Você verá alguns exemplos em tutoriais posteriores nesta série em que usar outro bloco é útil.

Testando se a solicitação é um envio (postagem)

Há mais, mas vamos voltar ao exemplo, que tem a condição if(IsPost){ ... }. IsPost é, na verdade, uma propriedade da página atual. Na primeira vez que a página é solicitada, IsPost retorna false. No entanto, se você clicar em um botão ou enviar a página , ou seja, postá-la , IsPost retornará true. Portanto, IsPost permite determinar se você está lidando com um envio de formulário. (Em termos de verbos HTTP, se a solicitação for uma operação GET, IsPost retornará false. Se a solicitação for uma operação POST, IsPost retornará true.) Em um tutorial posterior, você trabalhará com formulários de entrada, em que esse teste se tornará particularmente útil.

Execute a página. Como esta é a primeira vez que você solicita a página, você vê "Esta é a primeira vez que você solicita a página". Essa cadeia de caracteres é o valor para o qual você inicializou a variável de mensagem. Há um teste if(IsPost), mas que retorna false no momento, portanto, o código dentro do bloco if não é executado.

Clique no botão Enviar . A página é solicitada novamente. Como antes, a variável de mensagem é definida como "Esta é a primeira vez ...". Mas, desta vez, o teste if(IsPost) retorna true, portanto, o código dentro do bloco if é executado. O código altera o valor da variável de mensagem para um valor diferente, que é o que é renderizado na marcação.

Agora, adicione uma condição if na marcação. Abaixo do <elemento p> que contém o botão Enviar , adicione a seguinte marcação:

@if(IsPost){
  <p>You submitted the page at @DateTime.Now</p>
}

Você está adicionando código dentro da marcação, portanto, você precisa começar com @. Em seguida, há um teste if semelhante ao que você adicionou anteriormente no bloco de código. Dentro das chaves, no entanto, você está adicionando HTML comum — pelo menos, é comum até chegar a @DateTime.Now. Este é outro pouco de código Razor, então novamente você tem que adicionar @ na frente dele.

O ponto aqui é que você pode adicionar condições if no bloco de código na parte superior e na marcação. Se você usar uma condição if no corpo da página, as linhas dentro do bloco poderão ser marcação ou código. Nesse caso, e como é verdadeiro sempre que você mistura marcação e código, você precisa usar @ para deixar claro para ASP.NET onde está o código.

Execute a página e clique em Enviar. Desta vez, você não só vê uma mensagem diferente quando envia ("Agora você enviou ..."), mas vê uma nova mensagem que lista a data e a hora.

Captura de tela da página Testar Razor 2 em execução no navegador da Web com uma mensagem de carimbo de data/hora exibida após o envio da página.

Testando o valor de uma cadeia de caracteres de consulta

Mais um teste. Desta vez, você adicionará um bloco if que testa um valor chamado show que pode ser passado na cadeia de caracteres de consulta. (Desta forma: http://localhost:43097/TestRazorPart2.cshtml?show=true) Você alterará a página para que a mensagem exibida ("Esta é a primeira vez...", etc.) seja exibida somente se o valor de show for true.

Na parte inferior (mas dentro) do bloco de código na parte superior da página, adicione o seguinte:

var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
    showMessage = true;
}

O bloco de código completo agora se parece com o exemplo a seguir. (Lembre-se de que, quando você copia o código para sua página, o recuo pode parecer diferente. Mas isso não afeta a forma como o código é executado.)

@{
   var message = "This is the first time you've requested the page.";

   if(IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if(Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

O novo código no bloco inicializa uma variável chamada showMessage como false. Em seguida, ele faz um teste if para procurar um valor na cadeia de caracteres de consulta. Quando você solicita a página pela primeira vez, ela tem uma URL como esta:

http://localhost:43097/TestRazorPart2.cshtml

O código determina se a URL contém uma variável chamada show na cadeia de caracteres de consulta, como esta versão da URL:

http://localhost:43097/TestRazorPart2.cshtml?show=true

O teste em si examina a propriedade QueryString do objeto Request. Se a cadeia de caracteres de consulta contiver um item chamado show e se esse item estiver definido como true, o bloco if será executado e definirá a variável showMessage como true.

Há um truque aqui, como você pode ver. Como o nome diz, a cadeia de caracteres de consulta é uma cadeia de caracteres. No entanto, você só poderá testar true e false se o valor que você está testando for um valor booliano (verdadeiro/falso). Antes de testar o valor da variável show na cadeia de caracteres de consulta, você precisa convertê-lo em um valor booliano. É isso que o método AsBool faz: ele usa uma cadeia de caracteres como entrada e a converte em um valor booliano. Claramente, se a cadeia de caracteres for "true", o método AsBool converterá esse valor em true. Se o valor da cadeia de caracteres for qualquer outra coisa, AsBool retornará false.

Dica

Tipos de dados e métodos As()

Só dissemos até agora que, quando você cria uma variável, usa o palavra-chave var. Mas essa não é a história toda. Para manipular valores — para adicionar números ou concatenar cadeias de caracteres ou comparar datas ou testar para true/false — o C# precisa trabalhar com uma representação interna apropriada do valor. O C# geralmente pode descobrir qual deve ser essa representação (ou seja, qual é o tipo de dados) com base no que você está fazendo com os valores. De vez em quando, porém, não pode fazer isso. Caso contrário, você precisa ajudar indicando explicitamente como o C# deve representar os dados. O método AsBool faz isso , informa ao C# que um valor de cadeia de caracteres de "true" ou "false" deve ser tratado como um valor booliano. Existem métodos semelhantes para representar cadeias de caracteres como outros tipos, como AsInt (tratar como um inteiro), AsDateTime (tratar como uma data/hora), AsFloat (tratar como um número de ponto flutuante) e assim por diante. Ao usar esses métodos As( ), se o C# não puder representar o valor da cadeia de caracteres conforme solicitado, você verá um erro.

Na marcação da página, remova ou comente este elemento (aqui ele é mostrado comentado):

<!-- <p>@message</p> -->

Exatamente onde você removeu ou comentou esse texto, adicione o seguinte:

@if(showMessage) {
  <p>@message</p>
}

O teste if diz que, se a variável showMessage for verdadeira, renderize um <elemento p> com o valor da variável de mensagem.

Resumo da lógica condicional

Caso você não tenha certeza do que acabou de fazer, aqui está um resumo.

A variável de mensagem é inicializada para uma cadeia de caracteres padrão ("Esta é a primeira vez...").
Se a solicitação de página for o resultado de um envio (postagem), o valor da mensagem será alterado para "Agora que você enviou ..."
A variável showMessage é inicializada como false.
Se a cadeia de caracteres de consulta contiver ?show=true, a variável showMessage será definida como true.
Na marcação, se showMessage for true, um <elemento p> será renderizado que mostra o valor da mensagem. (Se showMessage for false, nada será renderizado nesse ponto na marcação.)
Na marcação, se a solicitação for uma postagem, um <elemento p> será renderizado que exibe a data e a hora.

Execute a página. Não há nenhuma mensagem, porque showMessage é false, portanto, na marcação, o teste if(showMessage) retorna false.

Clique em Enviar. Você vê a data e a hora, mas ainda não há nenhuma mensagem.

No navegador, vá para a caixa URL e adicione o seguinte ao final da URL: ?show=true e pressione Enter.

Captura de tela da página Testar Razor 2 em um navegador da Web mostrando uma cadeia de caracteres de consulta na caixa U R L.

A página é exibida novamente. (Como você alterou a URL, essa é uma nova solicitação, não um envio.) Clique em Enviar novamente. A mensagem é exibida novamente, assim como a data e a hora.

Captura de tela da página Testar o Razor 2 em um navegador da Web após o envio da página com uma cadeia de caracteres de consulta na caixa U R L.

Na URL, altere ?show=true para ?show=false e pressione Enter. Envie a página novamente. A página está de volta à forma como você começou — nenhuma mensagem.

Conforme observado anteriormente, a lógica deste exemplo é um pouco inventada. No entanto, se for aparecer em muitas de suas páginas, e ele tomará uma ou mais das formas que você viu aqui.

Instalando um auxiliar (exibindo uma imagem gravatar)

Algumas tarefas que as pessoas geralmente querem fazer em páginas da Web exigem muito código ou exigem conhecimento extra. Exemplos: exibindo um gráfico para dados; colocar um Facebook botão "Curtir" em uma página; enviar emails de seu site; cortar ou redimensionar imagens; usando o PayPal para seu site. Para facilitar esse tipo de coisa, Páginas da Web do ASP.NET permite que você use auxiliares. Auxiliares são componentes que você instala para um site e que permitem executar tarefas típicas usando apenas algumas linhas de código Razor.

Páginas da Web do ASP.NET tem alguns auxiliares integrados. No entanto, muitos auxiliares estão disponíveis em pacotes (suplementos) fornecidos usando o gerenciador de pacotes NuGet. O NuGet permite que você selecione um pacote para instalar e, em seguida, ele cuida de todos os detalhes da instalação.

Nesta parte do tutorial, você instalará um auxiliar que permite exibir uma imagem de Gravatar ("avatar reconhecido globalmente"). Você aprenderá duas coisas. Uma delas é como localizar e instalar um auxiliar. Você também aprenderá como um auxiliar facilita a realização de algo que, de outra forma, você precisaria fazer usando um monte de código que teria que escrever sozinho.

Você pode registrar seu próprio Gravatar no site gravatar em http://www.gravatar.com/, mas não é essencial criar uma conta gravatar para executar esta parte do tutorial.

No WebMatrix, clique no botão NuGet .

Captura de tela da interface do usuário da Matriz da Web mostrando o botão Nu Get realçado com um retângulo vermelho.

Isso inicia o gerenciador de pacotes NuGet e exibe os pacotes disponíveis. (Nem todos os pacotes são auxiliares; alguns adicionam funcionalidade à própria WebMatrix, alguns são modelos adicionais e assim por diante.) Você pode receber uma mensagem de erro sobre a incompatibilidade de versão. Você pode ignorar essa mensagem de erro clicando em OK e continuando com este tutorial.

Captura de tela da caixa de diálogo Nu Get Gallery na Web Matrix mostrando uma lista de pacotes disponíveis para instalação.

Na caixa de pesquisa, insira "auxiliares asp.net". O NuGet mostra os pacotes que correspondem aos termos de pesquisa.

Captura de tela da caixa de diálogo Galeria Do Nu Get na Matriz da Web mostrando o item Biblioteca de Auxiliares da Web A SP N E T realçado com um retângulo vermelho.

O ASP.NET Web Helpers Library contém código para simplificar muitas tarefas comuns, incluindo o uso de imagens gravatar. Selecione o pacote ASP.NET Biblioteca de Auxiliares da Web e clique em Instalar para iniciar o instalador. Selecione Sim quando for perguntado se deseja instalar o pacote e aceite os termos para concluir a instalação.

É isso. O NuGet baixa e instala tudo, incluindo todos os componentes adicionais que podem ser necessários (dependências).

Se, por algum motivo, você precisar desinstalar um auxiliar, o processo será muito semelhante. Clique no botão NuGet , clique na guia Instalado e escolha o pacote que você deseja desinstalar.

Usando um auxiliar em uma página

Agora você usará o auxiliar que acabou de instalar. O processo para adicionar um auxiliar a uma página é semelhante para a maioria dos auxiliares.

No WebMatrix, crie uma página e nomeie-a como GravatarTest.cshml. (Você está criando uma página especial para testar o auxiliar, mas pode usar auxiliares em qualquer página do seu site.)

Dentro do <elemento body> , adicione um <elemento div> . Dentro do <elemento div> , digite o seguinte:

@Gravatar.

O caractere @ é o mesmo caractere que você está usando para marcar o código Razor. Gravatar é o objeto auxiliar com o qual você está trabalhando.

Assim que você digitar o ponto (.), o WebMatrix exibirá uma lista de métodos (funções) que o auxiliar gravatar disponibiliza:

Captura de tela do editor de origem mostrando a lista suspensa IntelliSense auxiliar do Gravatar com o item Get H T M L realçado em amarelo.

Esse recurso é conhecido como IntelliSense. Ele ajuda você a codificar fornecendo opções apropriadas ao contexto. O IntelliSense funciona com HTML, CSS, código ASP.NET, JavaScript e outras linguagens com suporte no WebMatrix. É outro recurso que facilita o desenvolvimento de páginas da Web no WebMatrix.

Pressione G no teclado e você verá que o IntelliSense localiza o método GetHtml. Pressione Tab. O IntelliSense insere o método selecionado (GetHtml) para você. Digite um parêntese aberto e observe que o parêntese de fechamento é adicionado automaticamente. Digite seu endereço de email entre aspas entre os dois parênteses. Se você tiver uma conta gravatar, sua imagem de perfil será retornada. Se você não tiver uma conta gravatar, uma imagem padrão será retornada. Quando terminar, a linha terá esta aparência:

@Gravatar.GetHtml("john@contoso.com")

Agora, exiba a página em um navegador. Sua imagem ou a imagem padrão são exibidas, dependendo se você tem uma conta gravatar.

Captura de tela da janela do navegador da Web mostrando a imagem gravatar selecionada pelo usuário de um homem com óculos.

Para ter uma ideia do que o auxiliar está fazendo por você, exiba a origem da página no navegador. Junto com o HTML que você tinha em sua página, você vê um elemento de imagem que inclui um identificador. Esse é o código que o auxiliar renderiza na página no local onde você tinha @Gravatar.GetHtml. O auxiliar pegou as informações fornecidas e gerou o código que fala diretamente com Gravatar para recuperar a imagem correta da conta fornecida.

O método GetHtml também permite personalizar a imagem fornecendo outros parâmetros. O código a seguir mostra como solicitar uma imagem com largura e altura de 40 pixels e usa uma imagem padrão especificada chamada wavatar se a conta especificada não existir.

@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")

Esse código produz algo semelhante ao resultado a seguir (a imagem padrão variará aleatoriamente).

Captura de tela da página do navegador da Web mostrando a nova imagem padrão especificada com os parâmetros definidos no método Get H T M L.

Para manter este tutorial curto, tivemos que nos concentrar em apenas alguns conceitos básicos. Naturalmente, há muito mais em Razor e C#. Você aprenderá mais à medida que passar por esses tutoriais. Se você estiver interessado em aprender mais sobre os aspectos de programação do Razor e do C# no momento, leia uma introdução mais completa aqui: Introdução à programação da Web ASP.NET usando a sintaxe Razor.

O próximo tutorial apresenta o trabalho com um banco de dados. Nesse tutorial, você começará a criar o aplicativo de exemplo que permite listar seus filmes favoritos.

Lista completa para a página TestRazor

@{
   // Working with numbers
   var a = 4;
   var b = 5;
   var theSum = a + b;

   // Working with characters (strings)
   var technology = "ASP.NET";
   var product ="Web Pages";

   // Working with objects
   var rightNow = DateTime.Now;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax</title>
    <meta charset="utf-8" />
    <style>
    body {font-family:Verdana; margin-left:50px; margin-top:50px;}
    div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    span.bright {color:red;}
    </style>
  </head>
<body>
  <h1>Testing Razor Syntax</h1>
  <form method="post">

    <div>
      <p>The value of <em>a</em> is @a.  The value of <em>b</em> is @b.
      <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
      <p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
    </div>

    <div>
      <p>The technology is @technology, and the product is @product.</p>
      <p>Together they are <span class="bright">@(technology + " " + product)</span></p>
   </div>

   <div>
     <p>The current date and time is: @rightNow</p>
     <p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
   </div>

  </form>
</body>
</html>

Lista completa para a página TestRazorPart2

@{
   var message = "This is the first time you've requested the page.";

   if (IsPost) {
      message = "Now you've submitted the page.";
   }

   var showMessage = false;
   if (Request.QueryString["show"].AsBool() == true) {
     showMessage = true;
   }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing Razor Syntax - Part 2</title>
    <meta charset="utf-8" />
    <style>
      body {font-family:Verdana; margin-left:50px; margin-top:50px;}
      div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
    </style>
  </head>
  <body>
  <h1>Testing Razor Syntax - Part 2</h1>
  <form method="post">
    <div>
      <!--<p>@message</p>-->
      @if(showMessage){
        <p>@message</p>
      }
      <p><input type="submit" value="Submit" /></p>
      @if (IsPost) {
        <p>You submitted the page at @DateTime.Now</p>
      }
    </div>
  </form>
</body>
</html>

Lista completa para a página GravatarTest

@{
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
          @Gravatar.GetHtml("john@contoso.com")
          @Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
        </div>
    </body>
</html>

Recursos adicionais

Anterior Avançar

Apresentando Páginas da Web do ASP.NET – Noções básicas de programação

Criando uma página para reproduzir com o Razor

Examinando a página de exemplo

Objetos e propriedades e métodos

Usando código para renderizar a marcação na página

Ver o código em ação

Adicionando alguma lógica condicional

O bloco if { }

O bloco else

Testando se a solicitação é um envio (postagem)

Testando o valor de uma cadeia de caracteres de consulta

Resumo da lógica condicional

Instalando um auxiliar (exibindo uma imagem gravatar)

Usando um auxiliar em uma página

Próximo

Lista completa para a página TestRazor

Lista completa para a página TestRazorPart2

Lista completa para a página GravatarTest

Recursos adicionais

Comentários

Comentários

Recursos adicionais