Laboratório Prático: One ASP.NET: Integração de ASP.NET Web Forms, MVC e Web API

by Web Camps Team

Baixe o kit de treinamento Web Camps

ASP.NET é uma estrutura para criar sites, aplicativos e serviços usando tecnologias especializadas, como MVC, API Web e outros. Desde a expansão que o ASP.NET tem experimentado desde sua criação e a necessidade clara e expressa de ter essas tecnologias integradas, houve esforços recentes no sentido de trabalhar para o One ASP.NET.

O Visual Studio 2013 apresenta um novo sistema de projeto unificado que permite criar um aplicativo e usar todas as tecnologias de ASP.NET em um projeto. Esse recurso elimina a necessidade de escolher uma tecnologia no início de um projeto e ficar com ela e, em vez disso, incentiva o uso de várias estruturas de ASP.NET em um projeto.

Todos os exemplos de código e snippets estão incluídos no Web Camps Training Kit, disponível em https://aka.ms/webcamps-training-kit.

Visão geral

Objetivos

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

• Criar um site com base no tipo de projeto one ASP.NET
• Usar estruturas de ASP.NET diferentes, como MVC e API Web no mesmo projeto
• Identificar os principais componentes de um aplicativo ASP.NET
• Aproveite a estrutura ASP.NET scaffolding para criar automaticamente controladores e exibições para executar operações CRUD com base em suas classes de modelo
• Expor o mesmo conjunto de informações em formatos legíveis por máquina e humanos usando a ferramenta certa para cada trabalho

Pré-requisitos

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

• Visual Studio Express 2013 para Web ou superior
• Visual Studio 2013 Atualização 1

Configuração

Para executar os exercícios neste laboratório prático, você precisará configurar seu ambiente primeiro.

1. Abra o Windows Explorer e navegue até a pasta Origem do laboratório.
2. Clique com o botão direito do mouse em Setup.cmd e selecione Executar como administrador para iniciar o processo de instalação que configurará seu ambiente e instalará os snippets de código do Visual Studio para este laboratório.
3. Se a caixa de diálogo Controle de Conta de Usuário for mostrada, confirme a ação para continuar.

Usando os trechos de código

Ao longo do documento do laboratório, você será instruído a inserir blocos de código. Para sua conveniência, a maior parte desse código é fornecida como Snippets do Visual Studio Code, que você pode acessar de dentro do Visual Studio 2013 para evitar ter que adicioná-lo manualmente.

Exercícios

Este laboratório prático inclui os seguintes exercícios:

1. Criando um novo projeto de Web Forms
2. Criando um controlador MVC usando scaffolding
3. Criando um controlador de API Web usando Scaffolding

Tempo estimado para concluir este laboratório: 60 minutos

Exercício 1: Criando um novo projeto de Web Forms

Neste exercício, você criará um novo site do Web Forms no Visual Studio 2013 usando o One ASP.NET experiência de projeto unificada, o que permitirá integrar facilmente componentes de Web Forms, MVC e API Web no mesmo aplicativo. Em seguida, você explorará a solução gerada e identificará suas partes e, por fim, verá o site em ação.

Tarefa 1 – Criar um novo site usando a experiência one ASP.NET

Nesta tarefa, você começará a criar um novo site no Visual Studio com base no tipo de projeto One ASP.NET . Uma ASP.NET unifica todas as tecnologias de ASP.NET e oferece a opção de misturar e combiná-las conforme desejado. Em seguida, você reconhecerá os diferentes componentes dos Web Forms, MVC e API Web que residem lado a lado em seu aplicativo.

1. Abra o Visual Studio Express 2013 para Web e selecione Arquivo | Novo Projeto... para iniciar uma nova solução.

   

   Criando um novo projeto

2. Na caixa de diálogo Novo Projeto, selecione ASP.NET Aplicação Web na aba Visual C# | Web e verifique se o .NET Framework 4.5 está selecionado. Nomeie o projeto MyHybridSite, escolha um Local e clique em OK.

   

   Criando um novo projeto de aplicativo Web ASP.NET

3. Na caixa de diálogo Novo projeto ASP.NET , selecione o modelo do Web Forms e selecione as opções MVC e API Web . Além disso, verifique se a opção Autenticação está definida como Contas de Usuário Individuais. Clique em OK para continuar.

   

   Criando um novo projeto com o modelo do Web Forms, incluindo a API Web e componentes do MVC

4. Agora você pode explorar a estrutura da solução gerada.

   

   Explorando a solução gerada

   1. Conta: Essa pasta contém as páginas do Formulário da Web para registrar, fazer logon e gerenciar as contas de usuário do aplicativo. Essa pasta é adicionada quando a opção de autenticação contas de usuário individual é selecionada durante a configuração do modelo de projeto dos Web Forms.
   2. Modelos: Essa pasta conterá as classes que representam os dados do aplicativo.
   3. Controladores e Views: essas pastas são necessárias para os componentes do ASP.NET MVC e ASP.NET Web API. Você explorará as tecnologias de MVC e API Web nos próximos exercícios.
   4. Os arquivos Default.aspx, Contact.aspx e About.aspx são páginas de Formulário da Web predefinidas que podem ser usadas como pontos de partida para criar as páginas específicas do aplicativo. A lógica de programação desses arquivos reside em um arquivo separado chamado de arquivo "code-behind", que tem uma extensão ".aspx.vb" ou ".aspx.cs" (dependendo do idioma usado). A lógica code-behind é executada no servidor e produz dinamicamente a saída HTML para sua página.
   5. As páginas Site.Master e Site.Mobile.Master definem a aparência e o comportamento padrão de todas as páginas no aplicativo.

5. Clique duas vezes no arquivo Default.aspx para explorar o conteúdo da página.

   

   Explorando a página Default.aspx

   Observação

   A diretiva Page na parte superior do arquivo define os atributos da página dos Web Forms. Por exemplo, o atributo MasterPageFile especifica o caminho para a página mestra -in esse caso, a página Site.Master e o atributo Inherits definem a classe code-behind para a página herdar. Essa classe está localizada no arquivo determinado pelo atributo CodeBehind .

   O controle asp:Content contém o conteúdo real da página (texto, marcação e controles) e é mapeado para um controle asp:ContentPlaceHolder na página mestra. Nesse caso, o conteúdo da página será renderizado dentro do controle MainContent definido na página Site.Master .

6. Expanda a pasta App_Start e observe o arquivo WebApiConfig.cs . O Visual Studio incluiu esse arquivo na solução gerada porque você incluiu a API Web ao configurar seu projeto com o modelo one ASP.NET.

7. Abra o arquivo WebApiConfig.cs . Na classe WebApiConfig , você encontrará a configuração associada à API Web, que mapeia rotas HTTP para controladores de API Web.

   public static void Register(HttpConfiguration config)
   {
       // Web API configuration and services
   
       // Web API routes
       config.MapHttpAttributeRoutes();
   
       config.Routes.MapHttpRoute(
               name: "DefaultApi",
               routeTemplate: "api/{controller}/{id}",
               defaults: new { id = RouteParameter.Optional }
           );
   }
   

8. Abra o arquivo RouteConfig.cs . Dentro do método RegisterRoutes , você encontrará a configuração associada ao MVC, que mapeia rotas HTTP para controladores MVC.

   public static void RegisterRoutes(RouteCollection routes)
   {
       var settings = new FriendlyUrlSettings();
       settings.AutoRedirectMode = RedirectMode.Permanent;
       routes.EnableFriendlyUrls(settings);
   
       routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
   
       routes.MapRoute(
               name: "Default",
               url: "{controller}/{action}/{id}",
               defaults: new { action = "Index", id = UrlParameter.Optional }
           );
   }
   

Tarefa 2 – Executando a solução

Nesta tarefa, você executará a solução gerada, explorará o aplicativo e alguns de seus recursos, como a reescrita de URL e a autenticação interna.

1. Para executar a solução, pressione F5 ou clique no botão Iniciar localizado na barra de ferramentas. A home page do aplicativo deve ser aberta no navegador.

   

2. Verifique se as páginas dos Web Forms estão sendo invocadas. Para fazer isso, acrescente /contact.aspx à URL na barra de endereços e pressione Enter.

   

   URLs amigáveis

   Observação

   Como você pode ver, a URL muda para /contact. A partir do ASP.NET 4, os recursos de roteamento de URL foram adicionados aos Web Forms, para que você possa escrever URLs como http://www.mysite.com/products/software em vez de http://www.mysite.com/products.aspx?category=software. Para obter mais informações, consulte o Roteamento de URL.

3. Agora você explorará o fluxo de autenticação integrado ao aplicativo. Para fazer isso, clique em Registrar no canto superior direito da página.

   

   Registrando um novo usuário

4. Na página Registrar , insira um nome de usuário e senha e clique em Registrar.

   

   Página Registrar

5. O aplicativo registra a nova conta e o usuário é autenticado.

   

   Usuário autenticado

6. Volte para o Visual Studio e pressione SHIFT + F5 para interromper a depuração.

Exercício 2: Criando um controlador MVC usando andaimes (scaffolding)

Neste exercício, você aproveitará a estrutura ASP.NET scaffolding fornecida pelo Visual Studio para criar um controlador ASP.NET MVC 5 com ações e exibições razor para executar operações CRUD, sem escrever uma única linha de código. O processo de scaffolding usará o Entity Framework Code First para gerar o contexto de dados e o esquema do banco na base de dados SQL.

Sobre o Entity Framework Code First

O Entity Framework (EF) é um ORM (mapeador relacional de objeto) que permite criar aplicativos de acesso a dados programando com um modelo de aplicativo conceitual em vez de programar diretamente usando um esquema de armazenamento relacional.

O fluxo de trabalho de modelagem Entity Framework Code First permite que você use suas próprias classes de domínio para representar o modelo no qual o EF depende ao executar funções de consulta, controle de alterações e atualização. Usando o fluxo de trabalho de desenvolvimento code first, você não precisa começar seu aplicativo criando um banco de dados ou especificando um esquema. Em vez disso, você pode escrever classes .NET padrão que definem os objetos de modelo de domínio mais apropriados para seu aplicativo e o Entity Framework criará o banco de dados para você.

Tarefa 1 – Criando um novo modelo

Agora você definirá uma classe Person , que será o modelo usado pelo processo de scaffolding para criar o controlador MVC e as exibições. Você começará criando uma classe de modelo chamada Person, e as operações CRUD no controlador serão criadas automaticamente, usando recursos de scaffolding.

1. Abra o Visual Studio Express 2013 para Web e a solução MyHybridSite.sln localizada na pasta Source/Ex2-MvcScaffolding/Begin . Como alternativa, você pode continuar com a solução obtida no exercício anterior.

2. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Modelos do projeto MyHybridSite e selecione Adicionar | Classe....

   

   Adicionando a classe de modelo Person

3. Na caixa de diálogo Adicionar Novo Item , nomeie o arquivo Person.cs e clique em Adicionar.

   

   Criando a classe de modelo Person

4. Substitua o conteúdo do arquivo Person.cs pelo código a seguir. Pressione CTRL + S para salvar as alterações.

   (Snippet de código – BringingTogetherOneAspNet – Ex2 – PersonClass)

   namespace MyHybridSite.Models
   {
       public class Person
       {
           public int Id { get; set; }
   
           public string Name { get; set; }
   
           public int Age { get; set; }
       }
   }
   

5. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto MyHybridSite e selecione Compilar ou pressione CTRL + SHIFT + B para criar o projeto.

Tarefa 2 – Criando um controlador MVC

Agora que o modelo pessoa é criado, você usará ASP.NET scaffolding MVC com o Entity Framework para criar as ações e exibições do controlador CRUD para Pessoa.

1. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Controladores do projeto MyHybridSite e selecione Adicionar | Novo item estruturado....

   

   Criando um novo controlador com scaffolding

2. Na caixa de diálogo Adicionar Scaffold , selecione Controlador MVC 5 com exibições, usando o Entity Framework e clique em Adicionar.

   

   Selecionando o Controlador MVC 5 com Views e Entity Framework

3. Defina MvcPersonController como o nome do controlador, selecione a opção Usar ações do controlador assíncrono e selecione Pessoa (MyHybridSite.Models) como a classe Model.

   

   Adicionando um controlador MVC com suporte de scaffolding

4. Na classe de contexto de dados, clique em Novo contexto de dados....

   

   Criando um novo contexto de dados

5. Na caixa de diálogo Novo Contexto de Dados , nomeie o novo contexto de dados PersonContext e clique em Adicionar.

   

   Criando o novo tipo PersonContext

6. Clique em Adicionar para criar o novo controlador para Pessoa com scaffolding. Em seguida, o Visual Studio gerará as ações do controlador, o contexto de dados pessoais e as exibições do Razor.

   

   Depois de criar o controlador MVC com andaimes

7. Abra o arquivo MvcPersonController.cs na pasta Controladores . Observe que os métodos de ação CRUD foram gerados automaticamente.

   ...
   
   // POST: /MvcPerson/Create
   // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
   // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
   [HttpPost]
   [ValidateAntiForgeryToken]
   public async Task<ActionResult> Create([Bind(Include="Id,Name,Age")] Person person)
   {
        if (ModelState.IsValid)
        {
             db.People.Add(person);
             await db.SaveChangesAsync();
             return RedirectToAction("Index");
        }
   
        return View(person);
   }
   
   // GET: /MvcPerson/Edit/5
   public async Task<ActionResult> Edit(int? id)
   {
        if (id == null)
        {
             return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Person person = await db.People.FindAsync(id);
        if (person == null)
        {
             return HttpNotFound();
        }
        return View(person);
   }
   
   ...
   

   Observação

   Ao selecionar a caixa de seleção Usar ações do controlador assíncrono nas opções de scaffolding nas etapas anteriores, o Visual Studio gera métodos de ação assíncronos para todas as ações que envolvem o acesso ao contexto de dados pessoais. É recomendável que você use métodos de ação assíncronos para solicitações de execução longa e não associadas à CPU para evitar que o servidor Web bloqueie a execução do trabalho enquanto a solicitação está sendo processada.

Tarefa 3 – Executando a solução

Nesta tarefa, você executará a solução novamente para verificar se as exibições de Pessoa estão funcionando conforme o esperado. Você adicionará uma nova pessoa para verificar se ela foi salva com sucesso no banco de dados.

1. Pressione F5 para executar a solução.

2. Navegue até /MvcPerson. A exibição em estrutura que mostra a lista de pessoas deverá aparecer.

3. Clique em Criar novo para adicionar uma nova pessoa.

   

   Navegando até as exibições MVC geradas automaticamente

4. No visão Criar, forneça um Nome e uma Idade para a pessoa e clique em Criar.

   

   Adicionando uma nova pessoa

5. A nova pessoa é adicionada à lista. Na lista de elementos, clique em Detalhes para exibir a exibição de detalhes da pessoa. Em seguida, no modo de exibição Detalhes , clique em Voltar à Lista para voltar ao modo de exibição de lista.

   

   Exibição de detalhes da pessoa

6. Clique no link Excluir para excluir a pessoa. Na visão Excluir, clique em Excluir para confirmar a operação.

   

   Excluindo uma pessoa

7. Volte para o Visual Studio e pressione SHIFT + F5 para interromper a depuração.

Exercício 3: Criando um controlador de API Web usando Scaffolding

A estrutura da API Web faz parte do ASP.NET Stack e projetada para facilitar a implementação de serviços HTTP, geralmente enviando e recebendo dados formatados em JSON ou XML por meio de uma API RESTful.

Neste exercício, você usará ASP.NET Scaffolding novamente para gerar um controlador de API Web. Você usará as mesmas classes Person e PersonContext do exercício anterior para fornecer os mesmos dados pessoais no formato JSON. Você verá como pode expor os mesmos recursos de maneiras diferentes dentro do mesmo aplicativo ASP.NET.

Tarefa 1 – Criar um controlador de API Web

Nesta tarefa, você criará um novo Controlador de API Web que exporá os dados da pessoa em um formato consumível por computador, como JSON.

1. Se ainda não estiver aberto, abra o Visual Studio Express 2013 para Web e abra a solução MyHybridSite.sln localizada na pasta Source/Ex3-WebAPI/Begin . Como alternativa, você pode continuar com a solução obtida no exercício anterior.

   Observação

   Se você começar com a solução Begin do Exercício 3, pressione CTRL + SHIFT + B para criar a solução.

2. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Controladores do projeto MyHybridSite e selecione Adicionar | Novo item estruturado....

   

   Criando um controlador estruturado novo

3. Na caixa de diálogo Adicionar Scaffold, selecione API Web no painel esquerdo, em seguida Web API 2 Controlador com ações, usando o Entity Framework no painel central e clique em Adicionar.

   

   Selecionando o controlador da API Web 2 com ações e Entity Framework

4. Defina ApiPersonController como o nome do controlador, selecione a opção Usar ações do controlador assíncrono e selecione Person (MyHybridSite.Models) e PersonContext (MyHybridSite.Models) como as classes de contexto Modelo e Dados , respectivamente. Clique em Adicionar.

   

   Adicionando um controlador de API Web com scaffolding

5. Em seguida, o Visual Studio gerará a classe ApiPersonController com as quatro ações CRUD para trabalhar com seus dados.

   

   Depois de criar o controlador de API Web com scaffolding

6. Abra o arquivo ApiPersonController.cs e inspecione o método de ação GetPeople . Esse método consulta o campo db do tipo PersonContext para obter os dados das pessoas.

   // GET api/ApiPerson
   public IQueryable<Person> GetPeople()
   {
       return db.People;
   }
   

7. Agora observe o comentário acima da definição do método. Ele fornece o URI que expõe essa ação que você usará na próxima tarefa.

   // GET api/ApiPerson
   public IQueryable<Person> GetPeople()
   {
       return db.People;
   }
   

   Observação

   Por padrão, a API Web é configurada para capturar as consultas no caminho /api para evitar colisões com controladores MVC. Se você precisar alterar essa configuração, consulte Roteamento em ASP.NET API Web.

Tarefa 2 – Executando a solução

Nesta tarefa, você usará as ferramentas de desenvolvedor F12 do Internet Explorer para inspecionar a resposta completa do controlador de API Web. Você verá como capturar o tráfego de rede para obter mais informações sobre os dados do aplicativo.

1. Pressione F5 para executar a solução.

   Observação

   Para seguir essa tarefa corretamente, seu aplicativo precisa ter dados. Se o banco de dados estiver vazio, você poderá voltar para a Tarefa 3 no Exercício 2 e seguir as etapas sobre como criar uma nova pessoa usando as exibições do MVC.

2. No navegador, pressione F12 para abrir o painel Ferramentas de Desenvolvedor . Pressione CTRL + 4 ou clique no ícone Rede e clique no botão de seta verde para começar a capturar o tráfego de rede.

   

   Iniciando a captura de rede da API Web

3. Acrescente api/ApiPerson à URL na barra de endereços do navegador. Agora você inspecionará os detalhes da resposta do ApiPersonController.

   

   Recuperando dados de pessoas por meio da API Web

   Observação

   Depois que o download for concluído, você será solicitado a fazer uma ação com o arquivo baixado. Deixe a caixa de diálogo aberta para poder observar o conteúdo da resposta por meio da janela Ferramenta de Desenvolvedores.

4. Agora você inspecionará o corpo da resposta. Para fazer isso, clique na guia Detalhes e clique no corpo da resposta. Você pode verificar se os dados baixados são uma lista de objetos com as propriedades ID, Nome e Idade que correspondem à classe Person .

   

   Exibindo o corpo da resposta da API Web

Tarefa 3 – Adicionar páginas de ajuda da API Web

Ao criar uma API Web, é útil criar uma página de ajuda para que outros desenvolvedores saibam como chamar sua API. Você pode criar e atualizar as páginas de documentação manualmente, mas é melhor gerá-las automaticamente para evitar ter que fazer o trabalho de manutenção. Nesta tarefa, você usará um pacote Nuget para gerar automaticamente páginas de ajuda da API Web para a solução.

1. No menu Ferramentas no Visual Studio, selecione Gerenciador de Pacotes NuGet e clique em Console do Gerenciador de Pacotes.

2. Na janela Console do Gerenciador de Pacotes , execute o seguinte comando:

   Install-Package Microsoft.AspNet.WebApi.HelpPage
   

   Observação

   O pacote Microsoft.AspNet.WebApi.HelpPage instala os assemblies necessários e adiciona exibições de MVC para as páginas de ajuda na pasta Áreas/HelpPage .

   

   Área do HelpPage

3. Por padrão, as páginas de ajuda têm cadeias de caracteres de espaço reservado para documentação. Você pode usar comentários da documentação XML para criar a documentação. Para habilitar esse recurso, abra o arquivo HelpPageConfig.cs localizado na pasta Areas/HelpPage/App_Start e descompacte a seguinte linha:

   config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));
   

4. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto MyHybridSite, selecione Propriedades e clique na guia Compilar .

   

   Guia Compilar

5. Em Saída, selecione o arquivo de documentação XML. Na caixa de edição, digite App_Data/XmlDocument.xml.

   

   Seção de Saída na guia Compilar

6. Pressione CTRL + S para salvar as alterações.

7. Abra o arquivo ApiPersonController.cs da pasta Controladores .

8. Insira uma nova linha entre a assinatura do método GetPeople e o comentário get api/ApiPerson e digite três barras para frente.

   Observação

   O Visual Studio insere automaticamente os elementos XML que definem a documentação do método.

9. Adicione um texto de resumo e o valor retornado para o método GetPeople . Ele deve se parecer com o seguinte.

   // GET api/ApiPerson
   /// <summary>
   /// Documentation for 'GET' method
   /// </summary>
   /// <returns>Returns a list of people in the requested format</returns>
   public IQueryable<Person> GetPeople()
   {
       return db.People;
   }
   

10. Pressione F5 para executar a solução.

11. Acrescente /ajuda à URL na barra de endereços para navegar até a página de ajuda.

    

    Página de Ajuda da API Web ASP.NET

    Observação

    O conteúdo principal da página é um sumário de APIs, agrupado por controlador. As entradas de tabela são geradas dinamicamente, usando a interface IApiExplorer . Se você adicionar ou atualizar um controlador de API, a tabela será atualizada automaticamente na próxima vez que você criar o aplicativo.

    A coluna de API lista o método HTTP e o URI relativo. A coluna Descrição contém informações extraídas da documentação do método.

12. Observe que a descrição que você adicionou acima da definição do método é exibida na coluna de descrição.

    

    Descrição do método de API

13. Clique em um dos métodos de API para navegar até uma página com informações mais detalhadas, incluindo corpos de resposta de exemplo.

    

    Página de informações detalhadas

Resumo

Ao concluir este laboratório prático, você aprendeu a:

• Criar um novo aplicativo Web usando o One ASP.NET Experience no Visual Studio 2013
• Integrar várias tecnologias de ASP.NET em um único projeto
• Gerar controladores de MVC e exibições de suas classes de modelo usando ASP.NET Scaffolding
• Gerar controladores de API Web, que usam recursos como Programação Assíncrona e acesso a dados por meio do Entity Framework
• Gerar automaticamente páginas de ajuda da API Web para seus controladores