Criar APIs RESTful com ASP.NET Web API

Artigo
07/13/2023

Laboratório prático: use a API Web no ASP.NET 4.x para criar uma API REST simples para um aplicativo do gerenciador de contatos. Você também criará um cliente para consumir a API.

Nos últimos anos, ficou claro que HTTP não é apenas para servir páginas HTML. Ele também é uma plataforma poderosa para a criação de APIs Web, usando um punhado de verbos (GET, POST e assim por diante), além de alguns conceitos simples, como URIs e cabeçalhos. ASP.NET Web API é um conjunto de componentes que simplificam a programação HTTP. Como ela é criada com base no runtime do ASP.NET MVC, a API Web manipula automaticamente os detalhes de transporte de baixo nível de HTTP. Ao mesmo tempo, a API Web expõe naturalmente o modelo de programação HTTP. Na verdade, um objetivo da API Web é não abstrair a realidade do HTTP. Como resultado, a API Web é flexível e fácil de estender. O estilo de arquitetura REST provou ser uma maneira eficaz de aproveitar HTTP , embora certamente não seja a única abordagem válida para HTTP. O gerenciador de contatos exporá o RESTful para listagem, adição e remoção de contatos, entre outros.

Este laboratório requer uma compreensão básica de HTTP, REST e pressupõe que você tenha um conhecimento de trabalho básico de HTML, JavaScript e jQuery.

Observação

O site do ASP.NET tem uma área dedicada à estrutura ASP.NET Web API em https://asp.net/web-api. Este site continuará fornecendo informações de última hora, exemplos e notícias relacionadas à API Web, portanto, marcar com frequência se você quiser se aprofundar na arte de criar APIs Web personalizadas disponíveis para praticamente qualquer dispositivo ou estrutura de desenvolvimento.

ASP.NET Web API, semelhante a ASP.NET MVC 4, tem grande flexibilidade em termos de separar a camada de serviço dos controladores, permitindo que você use várias das estruturas de Injeção de Dependência disponíveis bastante fácil.

Todos os snippets e código de exemplo estão incluídos no Kit de Treinamento de Campos da Web, disponível em https://github.com/Microsoft-Web/WebCampTrainingKit/releases.

Objetivos

Neste laboratório prático, você aprenderá a:

Implementar uma API Web RESTful
Chamar a API de um cliente HTML

Pré-requisitos

O seguinte é necessário para concluir este laboratório prático:

Microsoft Visual Studio Express 2012 para Web ou superior (leia o Apêndice B para obter instruções sobre como instalá-lo).

Instalação

Instalando snippets de código

Para sua conveniência, grande parte do código que você gerenciará ao longo deste laboratório está disponível como snippets de código do Visual Studio. Para instalar os snippets de código, execute o arquivo .\Source\Setup\CodeSnippets.vsi .

Se você não estiver familiarizado com os snippets de Visual Studio Code e quiser aprender a usá-los, consulte o apêndice deste documento "Apêndice A: Usando snippets de código".

Exercícios

Este laboratório prático inclui o seguinte exercício:

Exercício 1: Criar uma API Web Read-Only
Exercício 2: Criar uma API Web de leitura/gravação
Exercício 3: Consumir a API Web de um cliente HTML

Observação

Cada exercício é acompanhado por uma pasta End que contém a solução resultante que você deve obter depois de concluir os exercícios. Você pode usar essa solução como um guia se precisar de ajuda adicional para trabalhar nos exercícios.

Tempo estimado para concluir este laboratório: 60 minutos.

Exercício 1: Criar uma API Web Read-Only

Neste exercício, você implementará os métodos GET somente leitura para o gerenciador de contatos.

Tarefa 1 – Criar o projeto de API

Nesta tarefa, você usará o novo ASP.NET modelos de projeto Web para criar um aplicativo Web de API Web.

Execute o Visual Studio 2012 Express para Web, para fazer isso, vá para Iniciar e digiteVS Express para Web e pressione Enter.
No menu Arquivo , selecione Novo Projeto. Selecione o Visual C# | Tipo de projeto Web no modo de exibição de árvore de tipo de projeto e, em seguida, selecione o ASP.NET tipo de projeto aplicativo Web MVC 4 . Defina o Nome do projeto como ContactManager e o Nome da solução como Iniciar e clique em OK.

Criando um novo projeto de aplicativo Web ASP.NET MVC 4.0
Na caixa de diálogo ASP.NET tipo de projeto MVC 4, selecione o tipo de projeto da API Web . Clique em OK.

Especificando o tipo de projeto da API Web

Tarefa 2 – Criando os controladores de API do Gerenciador de Contatos

Nesta tarefa, você criará as classes de controlador nas quais os métodos de API residirão.

Exclua o arquivo chamado ValuesController.cs na pasta Controladores do projeto.
Clique com o botão direito do mouse na pasta Controladores no projeto e selecione Adicionar | Controlador no menu de contexto.

Adicionando um novo controlador ao projeto
Na caixa de diálogo Adicionar Controlador exibida, selecione Controlador de API Vazio no menu Modelo. Nomeie a classe de controlador ContactController. Em seguida, clique em Adicionar.

Usando a caixa de diálogo Adicionar Controlador para criar um novo controlador de API Web
Adicione o código a seguir ao ContactController.

(Snippet de código – Laboratório de API Web – Ex01 – Obter método de API)
```
public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}
```
Pressione F5 para depurar o aplicativo. A home page padrão de um projeto de API Web deve aparecer.

A home page padrão de um aplicativo ASP.NET Web API
Na janela internet Explorer, pressione a tecla F12 para abrir a janela Ferramentas para Desenvolvedores. Clique na guia Rede e, em seguida, clique no botão Iniciar Captura para começar a capturar o tráfego de rede na janela.

Abrindo a guia rede e iniciando a captura de rede
Acrescente a URL na barra de endereços do navegador com /api/contact e pressione Enter. Os detalhes da transmissão serão exibidos na janela de captura de rede. Observe que o tipo MIME da resposta é application/json. Isso demonstra como o formato de saída padrão é JSON.

Exibindo a saída da solicitação da API Web na exibição Rede

Observação

O comportamento padrão da Internet Explorer 10 neste momento será perguntar se o usuário gostaria de salvar ou abrir o fluxo resultante da chamada à API Web. A saída será um arquivo de texto que contém o resultado JSON da chamada à URL da API Web. Não cancele a caixa de diálogo para poder watch o conteúdo da resposta por meio da janela Ferramenta de Desenvolvedores.
Clique no botão Ir para exibição detalhada para ver mais detalhes sobre a resposta dessa chamada à API.

Alternar para o Modo de Exibição Detalhado
Clique na guia Corpo da resposta para exibir o texto de resposta JSON real.

Exibindo o texto de saída JSON no monitor de rede

Tarefa 3 – Criar os modelos de contato e aumentar o controlador de contato

Nesta tarefa, você criará as classes de controlador nas quais os métodos de API residirão.

Clique com o botão direito do mouse na pasta Modelos e selecione Adicionar | Classe... no menu de contexto.

Adicionando um novo modelo ao aplicativo Web
Na caixa de diálogo Adicionar Novo Item , nomeie o novo arquivo Contact.cs e clique em Adicionar.

Criando o novo arquivo de classe Contact
Adicione o código realçado a seguir à classe Contact .

(Snippet de código – Laboratório de API Web – Ex01 – Classe de Contato)
```
public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}
```
Na classe ContactController , selecione a palavra cadeia de caracteres na definição do método Get e digite a palavra Contact. Depois que a palavra for digitada, um indicador aparecerá no início da palavra Contato. Mantenha pressionada a tecla Ctrl e pressione a tecla period (.) ou clique no ícone usando o mouse para abrir a caixa de diálogo de assistência no editor de código para preencher automaticamente a diretiva using para o namespace Models.

Usando a assistência do IntelliSense para declarações de namespace

Modifique o código do método Get para que ele retorne uma matriz de instâncias de modelo de Contato.

(Snippet de código – Laboratório de API Web – Ex01 – Retornando uma lista de contatos)

public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

Pressione F5 para depurar o aplicativo Web no navegador. Para exibir as alterações feitas na saída de resposta da API, execute as etapas a seguir.
1. Quando o navegador for aberto, pressione F12 se as ferramentas de desenvolvedor ainda não estiverem abertas.
2. Clique na guia Rede .
3. Pressione o botão Iniciar Captura .
4. Adicione o sufixo de URL /api/contact à URL na barra de endereços e pressione a tecla Enter .
5. Pressione o botão Ir para exibição detalhada .
6. Selecione a guia Corpo da resposta . Você deverá ver uma cadeia de caracteres JSON que representa a forma serializada de uma matriz de instâncias de Contato.
  
  Saída serializada JSON de uma chamada complexa de método da API Web

Tarefa 4 – Extraindo funcionalidade em uma camada de serviço

Essa tarefa demonstrará como extrair a funcionalidade em uma camada de serviço para facilitar que os desenvolvedores separem sua funcionalidade de serviço da camada do controlador, permitindo assim a reutilização dos serviços que realmente fazem o trabalho.

Crie uma nova pasta na raiz da solução e nomeie-a como Serviços. Para fazer isso, clique com o botão direito do mouse no projeto ContactManager , selecione Adicionar | Nova Pasta e nomeie-a Serviços.

Criando a pasta Serviços
Clique com o botão direito do mouse na pasta Serviços e selecione Adicionar | Classe... no menu de contexto.

Adicionando uma nova classe à pasta Serviços
Quando a caixa de diálogo Adicionar Novo Item for exibida, nomeie a nova classe ContactRepository e clique em Adicionar.

Criando um arquivo de classe para conter o código para a camada de serviço Do Repositório de Contatos
Adicione uma diretiva using ao arquivo ContactRepository.cs para incluir o namespace de modelos.
```
using ContactManager.Models;
```

Adicione o código realçado a seguir ao arquivo ContactRepository.cs para implementar o método GetAllContacts.

(Snippet de código – Laboratório de API Web – Ex01 – Repositório de Contatos)

public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
}

Abra o arquivo ContactController.cs se ele ainda não estiver aberto.
Adicione a instrução using a seguir à seção de declaração de namespace do arquivo.
```
using ContactManager.Services;
```
Adicione o código realçado a seguir à classe ContactController.cs para adicionar um campo privado para representar a instância do repositório, para que o restante dos membros da classe possa usar a implementação do serviço.

(Snippet de código – Laboratório de API Web – Ex01 – Controlador de Contato)
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
Altere o método Get para que ele use o serviço de repositório de contatos.

(Snippet de código – Laboratório de API Web – Ex01 – Retornando uma lista de contatos por meio do repositório)
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
Coloque um ponto de interrupção na definição do método Get do ContactController.

Adicionando pontos de interrupção ao controlador de contato

Adicionando pontos de interrupção ao controlador de contato 11. Pressione F5 para executar o aplicativo. 12. Quando o navegador for aberto, pressione F12 para abrir as ferramentas de desenvolvedor. 13. Clique na guia Rede . 14. Clique no botão Iniciar Captura . 15. Acrescente a URL na barra de endereços com o sufixo /api/contact e pressione Enter para carregar o controlador de API. 16. O Visual Studio 2012 deve ser interrompido quando o método Get iniciar a execução.

Interrompendo dentro do método Get

Interrompendo dentro do método Get 17. Pressione F5 para continuar. 18. Voltar à Internet Explorer se ainda não estiver em foco. Observe a janela de captura de rede.

Exibição de rede na Internet Explorer mostrando os resultados da chamada à API Web

Exibição de rede na Internet Explorer mostrando os resultados da chamada à API Web 19. Clique no botão Ir para exibição detalhada. 20. Clique na guia Corpo da resposta . Observe a saída JSON da chamada à API e como ela representa os dois contatos recuperados pela camada de serviço.

Exibindo a saída JSON da API Web na janela ferramentas do desenvolvedor

Exibindo a saída JSON da API Web na janela ferramentas para desenvolvedores

Exercício 2: Criar uma API Web de leitura/gravação

Neste exercício, você implementará os métodos POST e PUT para o gerenciador de contatos habilitá-lo com recursos de edição de dados.

Tarefa 1 – Abrir o projeto de API Web

Nesta tarefa, você se preparará para aprimorar o projeto de API Web criado no Exercício 1 para que ele possa aceitar a entrada do usuário.

Execute o Visual Studio 2012 Express para Web, para fazer isso, vá para Iniciar e digiteVS Express para Web e pressione Enter.
Abra a solução Begin localizada na pasta Source/Ex02-ReadWriteWebAPI/Begin/ . Caso contrário, você poderá continuar usando a solução End obtida concluindo o exercício anterior.
1. Se você abriu a solução Begin fornecida, precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.
2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.
3. Por fim, crie a solução clicando em Compilar | Compilar Solução.
  
  Observação
  
  Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente neste laboratório.
Abra o arquivo Services/ContactRepository.cs .

Tarefa 2 – Adicionar recursos de Data-Persistence à implementação do repositório de contatos

Nesta tarefa, você aumentará a classe ContactRepository do projeto de API Web criado no Exercício 1 para que ele possa persistir e aceitar a entrada do usuário e novas instâncias de Contato.

Adicione a seguinte constante à classe ContactRepository para representar o nome da chave do item de cache do servidor Web posteriormente neste exercício.
```
private const string CacheKey = "ContactStore";
```

Adicione um construtor ao ContactRepository que contém o código a seguir.

(Snippet de código – Laboratório de API Web – Ex02 – Construtor de Repositório de Contatos)

public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

Modifique o código para o método GetAllContacts , conforme demonstrado abaixo.

(Snippet de código – Laboratório de API Web – Ex02 – Obter todos os contatos)
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}
```
Observação

Este exemplo é para fins de demonstração e usará o cache do servidor Web como um meio de armazenamento, para que os valores fiquem disponíveis para vários clientes simultaneamente, em vez de usar um mecanismo de armazenamento de sessão ou um tempo de vida de armazenamento de solicitação. É possível usar o Entity Framework, o armazenamento XML ou qualquer outra variedade no lugar do cache do servidor Web.

Implemente um novo método chamado SaveContact na classe ContactRepository para fazer o trabalho de salvar um contato. O método SaveContact deve usar um único parâmetro Contact e retornar um valor booliano que indica êxito ou falha.

(Snippet de código – Laboratório de API Web – Ex02 – Implementação do método SaveContact)

public bool SaveContact(Contact contact)
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
         try
         {
              var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
              currentData.Add(contact);
              ctx.Cache[CacheKey] = currentData.ToArray();

              return true;
         }
         catch (Exception ex)
         {
              Console.WriteLine(ex.ToString());
              return false;
         }
    }

    return false;
}

Exercício 3: Consumir a API Web de um cliente HTML

Neste exercício, você criará um cliente HTML para chamar a API Web. Esse cliente facilitará a troca de dados com a API Web usando JavaScript e exibirá os resultados em um navegador da Web usando a marcação HTML.

Tarefa 1 – Modificando a exibição de índice para fornecer uma GUI para exibir contatos

Nesta tarefa, você modificará a exibição de índice padrão do aplicativo Web para dar suporte ao requisito de exibir a lista de contatos existentes em um navegador HTML.

Abra o Visual Studio 2012 Express para Web se ele ainda não estiver aberto.
Abra a solução Begin localizada na pasta Source/Ex03-ConsumingWebAPI/Begin/ . Caso contrário, você poderá continuar usando a solução End obtida concluindo o exercício anterior.
1. Se você abriu a solução Begin fornecida, precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.
2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.
3. Por fim, crie a solução clicando em Compilar | Compilar Solução.
  
  Observação
  
  Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente neste laboratório.
Abra o arquivo Index.cshtml localizado na pasta Views/Home .
Substitua o código HTML dentro do elemento div pelo corpo da ID para que ele se pareça com o código a seguir.
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

Adicione o código Javascript a seguir na parte inferior do arquivo para executar a solicitação HTTP à API Web.

@section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

Abra o arquivo ContactController.cs se ele ainda não estiver aberto.
Coloque um ponto de interrupção no método Get da classe ContactController .

Colocando um ponto de interrupção no método Get do controlador de API
Pressione F5 para executar o projeto. O navegador carregará o documento HTML.

Observação

Verifique se você está navegando até a URL raiz do seu aplicativo.
Depois que a página for carregada e o JavaScript for executado, o ponto de interrupção será atingido e a execução do código será pausada no controlador.

Depuração na chamada à API Web usando o Visual Studio 2012 Express para Web
Remova o ponto de interrupção e pressione F5 ou o botão Continuar da barra de ferramentas de depuração para continuar carregando o modo de exibição no navegador. Depois que a chamada à API Web for concluída, você deverá ver os contatos retornados da chamada à API Web exibidos como itens de lista no navegador.

Resultados da chamada à API exibida no navegador como itens de lista
Interrompa a depuração.

Tarefa 2 – Modificando a exibição de índice para fornecer uma GUI para a criação de contatos

Nesta tarefa, você continuará modificando a exibição Índice do aplicativo MVC. Um formulário será adicionado à página HTML que capturará a entrada do usuário e a enviará para a API Web para criar um novo Contato, e um novo método de controlador de API Web será criado para coletar a data da GUI.

Abra o arquivo ContactController.cs .

Adicione um novo método à classe de controlador chamada Post , conforme mostrado no código a seguir.

(Snippet de código – Laboratório de API Web – Ex03 – Método Post)

public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

    var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

    return response;
}

Abra o arquivo Index.cshtml no Visual Studio se ele ainda não estiver aberto.

Adicione o código HTML abaixo ao arquivo logo após a lista não ordenada que você adicionou na tarefa anterior.

<form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

Dentro do elemento script na parte inferior do documento, adicione o código realçado a seguir para manipular eventos de clique com botão, que postarão os dados na API Web usando uma chamada HTTP POST.

<script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

Em ContactController.cs, coloque um ponto de interrupção no método Post .
Pressione F5 para executar o aplicativo no navegador.
Depois que a página for carregada no navegador, digite um novo nome de contato e ID e clique no botão Salvar .

O documento HTML do cliente carregado no navegador
Quando a janela do depurador for interrompida no método Post , dê uma olhada nas propriedades do parâmetro contact . Os valores devem corresponder aos dados inseridos no formulário.

O objeto Contact que está sendo enviado para a API Web do cliente
Percorra o método no depurador até que a variável de resposta seja criada. Após a inspeção na janela Locais no depurador, você verá que todas as propriedades foram definidas.

A resposta após a criação no depurador

A resposta após a criação no depurador 11. Se você pressionar F5 ou clicar em Continuar no depurador, a solicitação será concluída. Depois que você voltar para o navegador, o novo contato será adicionado à lista de contatos armazenados pela implementação ContactRepository .

O navegador reflete a criação bem-sucedida da nova instância de contato

O navegador reflete a criação bem-sucedida da nova instância de contato

Observação

Além disso, você pode implantar esse aplicativo no Azure seguindo o Apêndice C: Publicando um aplicativo ASP.NET MVC 4 usando a Implantação da Web.

Resumo

Este laboratório apresentou a nova estrutura de ASP.NET Web API e à implementação de APIs Web RESTful usando a estrutura . A partir daqui, você pode criar um novo repositório que facilita a persistência de dados usando qualquer número de mecanismos e conectar esse serviço em vez do simples fornecido como exemplo neste laboratório. A API Web dá suporte a vários recursos adicionais, como habilitar a comunicação de clientes não HTML escritos em qualquer linguagem que dê suporte a HTTP e JSON ou XML. A capacidade de hospedar uma API Web fora de um aplicativo Web típico também é possível, assim como a capacidade de criar seus próprios formatos de serialização.

O site do ASP.NET tem uma área dedicada à estrutura ASP.NET Web API em [https://asp.net/web-api](https://asp.net/web-api). Este site continuará fornecendo informações de última hora, exemplos e notícias relacionadas à API Web, portanto, marcar com frequência se você quiser se aprofundar na arte de criar APIs Web personalizadas disponíveis para praticamente qualquer dispositivo ou estrutura de desenvolvimento.

Apêndice A: Usando snippets de código

Com snippets de código, você tem todo o código necessário ao seu alcance. O documento de laboratório informará exatamente quando você pode usá-los, conforme mostrado na figura a seguir.

Usando snippets de código do Visual Studio para inserir código em seu projeto

Usando snippets de código do Visual Studio para inserir código em seu projeto

Para adicionar um snippet de código usando o teclado (somente C#)

Coloque o cursor onde você deseja inserir o código.
Comece a digitar o nome do snippet (sem espaços ou hifens).
Observe como o IntelliSense exibe os nomes dos snippets correspondentes.
Selecione o snippet correto (ou continue digitando até que o nome do snippet inteiro seja selecionado).
Pressione a tecla Tab duas vezes para inserir o snippet no local do cursor.

Comece a digitar o nome do snippet

Pressione Tab para selecionar o snippet realçado

Pressione Tab novamente e o snippet se expandirá

Para adicionar um snippet de código usando o mouse (C#, Visual Basic e XML)

Clique com o botão direito do mouse no local em que você deseja inserir o snippet de código.
Selecione Inserir Snippet seguido por Meus Snippets de Código.
Escolha o snippet relevante na lista clicando nele.

Clique com o botão direito do mouse onde você deseja inserir o snippet de código e selecione Inserir Snippet

Escolha o snippet relevante na lista clicando nele

Apêndice B: Instalando o Visual Studio Express 2012 para Web

Você pode instalar Microsoft Visual Studio Express 2012 para Web ou outra versão "Express" usando o Microsoft Web Platform Installer. As instruções a seguir orientam você pelas etapas necessárias para instalar o Visual Studio Express 2012 para Web usando Microsoft Web Platform Installer.

Vá para [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Como alternativa, se você já tiver instalado o Web Platform Installer, poderá abri-lo e pesquisar o produto "Visual Studio Express 2012 para Web com o SDK do Azure".
Clique em Instalar Agora. Se você não tiver o Web Platform Installer , será redirecionado para baixá-lo e instalá-lo primeiro.
Depois que o Web Platform Installer estiver aberto, clique em Instalar para iniciar a instalação.

Instalar Visual Studio Express
Leia todas as licenças e termos dos produtos e clique em Aceito para continuar.

Aceitando os termos de licença
Aguarde até que o processo de download e instalação seja concluído.

Progresso da instalação
Quando a instalação for concluída, clique em Concluir.

Instalação concluída
Clique em Sair para fechar o Web Platform Installer.
Para abrir Visual Studio Express para Web, vá para a tela Inicial e comece a escrever "VS Express" e clique no bloco do VS Express para Web.

Bloco do VS Express para Web

Apêndice C: Publicando um aplicativo ASP.NET MVC 4 usando a Implantação da Web

Este apêndice mostrará como criar um novo site do Portal do Azure e publicar o aplicativo obtido seguindo o laboratório, aproveitando o recurso de publicação de Implantação na Web fornecido pelo Azure.

Tarefa 1 – Criar um novo site no Portal do Azure

Acesse o Portal de Gerenciamento do Azure e entre usando as credenciais da Microsoft associadas à sua assinatura.

Observação

Com o Azure, você pode hospedar 10 sites ASP.NET gratuitamente e, em seguida, dimensionar à medida que o tráfego aumenta. Você pode se inscrever aqui.

Fazer logon no Portal
Clique em Novo na barra de comandos.

Criando um novo site
Clique em Site de Computação | . Em seguida, selecione a opção Criação Rápida . Forneça uma URL disponível para o novo site e clique em Criar Site.

Observação

O Azure é o host de um aplicativo Web em execução na nuvem que você pode controlar e gerenciar. A opção Criação Rápida permite implantar um aplicativo Web concluído no Azure de fora do portal. Ele não inclui etapas para configurar um banco de dados.

Criando um novo site usando a Criação Rápida
Aguarde até que o novo Site seja criado.
Depois que o Site for criado, clique no link na coluna URL . Verifique se o novo Site está funcionando.

Navegando até o novo site

Site em execução
Voltar ao portal e clique no nome do site na coluna Nome para exibir as páginas de gerenciamento.

Abrindo as páginas de gerenciamento do Site
Na página Painel , na seção de visão rápida , clique no link Baixar perfil de publicação .

Observação

O perfil de publicação contém todas as informações necessárias para publicar um aplicativo Web em um Azure para cada método de publicação habilitado. O perfil de publicação contém as URLs, as credenciais de usuário e as cadeias de conexão de banco de dados necessárias para conectar-se e autenticar cada um dos pontos de extremidade para os quais um método de publicação é habilitado. O Microsoft WebMatrix 2, Microsoft Visual Studio Express para Web e o Microsoft Visual Studio 2012 dão suporte à leitura de perfis de publicação para automatizar a configuração desses programas para publicar aplicativos Web no Azure.

Baixar o perfil de publicação do Site
Baixe o arquivo de perfil de publicação em um local conhecido. Além disso, neste exercício, você verá como usar esse arquivo para publicar um aplicativo Web no Azure do Visual Studio.

Salvando o arquivo de perfil de publicação

Tarefa 2 – Configurando o servidor de banco de dados

Se o aplicativo usar bancos de dados SQL Server, você precisará criar um servidor Banco de Dados SQL. Se você quiser implantar um aplicativo simples que não usa SQL Server poderá ignorar essa tarefa.

Você precisará de um servidor Banco de Dados SQL para armazenar o banco de dados do aplicativo. Você pode exibir os servidores Banco de Dados SQL de sua assinatura no portal de Gerenciamento do Azure noPainel doSql Databases | Servers | Server. Se você não tiver um servidor criado, poderá criar um usando o botão Adicionar na barra de comandos. Anote o nome do servidor e a URL, o nome de logon do administrador e a senha, pois você os usará nas próximas tarefas. Não crie o banco de dados ainda, pois ele será criado em um estágio posterior.

Painel do Servidor Banco de Dados SQL
Na próxima tarefa, você testará a conexão de banco de dados do Visual Studio, por esse motivo, você precisará incluir seu endereço IP local na lista de endereços IP permitidos do servidor. Para fazer isso, clique em Configurar, selecione o endereço IP do Endereço IP do Cliente Atual e cole-o nas caixas de texto Endereço IP Inicial e Endereço IP Final e clique no botão .

Adicionando endereço IP do cliente
Depois que o Endereço IP do Cliente for adicionado à lista de endereços IP permitidos, clique em Salvar para confirmar as alterações.

Confirmar alterações

Tarefa 3 – Publicar um aplicativo ASP.NET MVC 4 usando a Implantação da Web

Voltar à solução ASP.NET MVC 4. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto do site e selecione Publicar.

Publicando o site
Importe o perfil de publicação salvo na primeira tarefa.

Importando perfil de publicação
Clique em Validar Conexão. Depois que a Validação for concluída, clique em Avançar.

Observação

A validação é concluída quando você vê uma marca de seleção verde aparecer ao lado do botão Validar Conexão.

Validando a conexão
Na página Configurações , na seção Bancos de dados, clique no botão ao lado da caixa de texto da conexão de banco de dados (ou seja, DefaultConnection).

Configuração de implantação da Web
Configure a conexão de banco de dados da seguinte maneira:
- No nome do servidor, digite a URL do servidor Banco de Dados SQL usando o prefixo tcp: .
- Em Nome de usuário, digite o nome de logon do administrador do servidor.
- Em Senha, digite a senha de logon do administrador do servidor.
- Digite um novo nome de banco de dados, por exemplo: MVC4SampleDB.
  
  Configurando a cadeia de conexão de destino
Em seguida, clique em OK. Quando solicitado a criar o banco de dados, clique em Sim.

Criando o banco de dados
A cadeia de conexão que você usará para se conectar a Banco de Dados SQL no Windows Azure é mostrada na caixa de texto Conexão Padrão. Em seguida, clique em Próximo.

Cadeia de conexão apontando para Banco de Dados SQL
Na página Visualização , clique em Publicar.

Publicando o aplicativo Web
Depois que o processo de publicação for concluído, o navegador padrão abrirá o site publicado.

Aplicativo publicado no Azure