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

pela equipa Web Camps

Descarregar o Kit de Treino Web Camps

ASP.NET é uma estrutura para construir sites, aplicações e serviços utilizando tecnologias especializadas como MVC, Web API e outras. Com a expansão que ASP.NET tem registado desde a sua criação e a necessidade expressa de integrar estas tecnologias, têm havido esforços recentes para trabalhar em direção ao One ASP.NET.

O Visual Studio 2013 introduz um novo sistema unificado de projetos que lhe permite construir uma aplicação e usar todas as tecnologias ASP.NET num só projeto. Esta funcionalidade elimina a necessidade de escolher uma tecnologia no início de um projeto e manter-se nela, incentivando antes a utilização de múltiplos frameworks de ASP.NET dentro de um projeto.

Todo o código de exemplo e excertos estão incluídos no Kit de Formação dos Web Camps, disponível em https://aka.ms/webcamps-training-kit.

Descrição geral

Objetivos

Neste laboratório prático, vai aprender como:

• Crie um site baseado no tipo de projeto One ASP.NET
• Use diferentes frameworks de ASP.NET como MVC e Web API no mesmo projeto
• Identificar os principais componentes de uma aplicação ASP.NET
• Aproveite o framework ASP.NET Scaffolding para criar automaticamente Controladores e Vistas para realizar operações CRUD baseadas nas suas classes de modelo
• Expor o mesmo conjunto de informação em formatos legíveis por máquina e por humanos, usando a ferramenta certa para cada tarefa

Pré-requisitos

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

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

Configuração

Para realizar os exercícios neste laboratório prático, terá de preparar primeiro o seu ambiente.

1. Abra o Explorador do Windows e navegue até à pasta Source do laboratório.
2. Clique com o botão direito em Setup.cmd e selecione Executar como administrador para iniciar o processo de configuração que irá configurar o seu ambiente e instalar os excertos de código do Visual Studio para este laboratório.
3. Se aparecer a caixa de diálogo Controlo da Conta de Utilizador, confirme a ação para prosseguir.

Utilização de Fragmentos de Código

Ao longo do documento do laboratório, ser-se-á instruído a inserir blocos de código. Para sua conveniência, a maior parte deste código é fornecida como Excertos de Código do Visual Studio, aos quais pode aceder dentro do Visual Studio 2013 para evitar ter de o adicionar manualmente.

Exercícios

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

1. Criar um Novo Projeto de Formulários Web
2. Criação de um Controlador MVC Usando Andaimes
3. Criação de um Controlador de API Web Usando Andaimes

Tempo estimado para completar este laboratório: 60 minutos

Exercício 1: Criar um Novo Projeto de Formulários Web

Neste exercício, irá criar um novo site Web Forms no Visual Studio 2013 utilizando a experiência unificada do projeto One ASP.NET , o que lhe permitirá integrar facilmente Web Forms, MVC e componentes Web API na mesma aplicação. Depois irá explorar a solução gerada e identificar as suas partes, e finalmente verá o site em ação.

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

Nesta tarefa, começará a criar um novo site no Visual Studio com base no tipo de projeto One ASP.NET . Um ASP.NET unifica todas as tecnologias ASP.NET e dá-te a opção de as misturar e combinar conforme desejar. Assim, irá reconhecer os diferentes componentes dos Web Forms, MVC e Web API que vivem lado a lado dentro da sua aplicação.

1. Abra o Visual Studio Express 2013 para Web e selecione Ficheiro | Novo projeto... para começar uma nova solução.

   

   Criar um Novo Projeto

2. Na caixa de diálogo Novo Projeto, selecione Aplicação Web ASP.NET no separador Visual C# | Web, e certifica-te de que o .NET Framework 4.5 está selecionado. Nomeie o projeto MyHybridSite, escolha uma Localização e clique em OK.

   

   Criar um novo projeto de Aplicação Web ASP.NET

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

   

   Criar um novo projeto com o modelo Web Forms, incluindo componentes Web API e MVC

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

   

   Explorando a solução gerada

   1. Conta: Esta pasta contém as páginas do Web Form para registar, iniciar sessão e gerir as contas de utilizador da aplicação. Esta pasta é adicionada quando a opção de autenticação de Contas de Utilizador Individuais é selecionada durante a configuração do modelo do projeto Web Forms.
   2. Modelos: Esta pasta conterá as classes que representam os dados da sua aplicação.
   3. Controladores e Vistas: Estas pastas são necessárias para os componentes ASP.NET MVC e ASP.NET Web API. Irá explorar as tecnologias MVC e Web API nos próximos exercícios.
   4. Os ficheiros Default.aspx, Contact.aspx e About.aspx são páginas Web Forms pré-definidas que pode usar como pontos de partida para construir as páginas específicas da sua aplicação. A lógica de programação desses ficheiros reside num ficheiro separado referido como ficheiro "code-behind", que tem uma extensão ".aspx.vb" ou ".aspx.cs" (dependendo da linguagem utilizada). A lógica code-behind corre no servidor e produz dinamicamente a saída HTML para a sua página.
   5. As páginas Site.Master e Site.Mobile.Master definem a aparência, a sensação e o comportamento padrão de todas as páginas da aplicação.

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

   

   Explorar a página Default.aspx

   Observação

   A diretiva Página no topo do ficheiro define os atributos da página Web Forms. Por exemplo, o atributo MasterPageFile especifica o caminho para a página mestre -neste caso, a página Site.Master- e o atributo Inherits define a classe code-behind que a página deve herdar. Esta classe está localizada no ficheiro determinado pelo atributo CodeBehind .

   O controlo asp:Content mantém o conteúdo real da página (texto, marcação e controlos) e é mapeado para um controlo asp:ContentPlaceHolder na página mestre. Neste caso, o conteúdo da página será renderizado dentro do controlo MainContent definido na página Site.Master .

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

7. Abre o ficheiro WebApiConfig.cs . Na classe WebApiConfig encontrará a configuração associada à Web API, que mapeia rotas HTTP para controladores Web API.

   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. Abre o ficheiro RouteConfig.cs . Dentro do método RegisterRoutes 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 – Executar a Solução

Nesta tarefa irá executar a solução gerada, explorar a aplicação e algumas das suas funcionalidades, como a reescrita de URLs e a autenticação incorporada.

1. Para executar a solução, pressione F5 ou clique no botão Start localizado na barra de ferramentas. A página inicial da aplicação deve abrir-se no navegador.

   

2. Verifique se as páginas Web Forms estão a ser invocadas. Para isso, adicione /contact.aspx ao URL na barra de endereços e pressione Enter.

   

   URLs amigáveis

   Observação

   Como pode ver, o URL muda para /contact. A partir de ASP.NET 4, foram adicionadas capacidades de encaminhamento de URLs aos Formulários Web, para que possa escrever URLs como http://www.mysite.com/products/software em vez de http://www.mysite.com/products.aspx?category=software. Para mais informações, consulte o Encaminhamento de URL.

3. Agora irá explorar o fluxo de autenticação integrado na aplicação. Para isso, clique em Registar-se no canto superior direito da página.

   

   Registar um novo utilizador

4. Na página de Registo , introduza um Nome de Utilizador e uma Palavra-passe, e depois clique em Registar.

   

   Página de registo

5. A aplicação regista a nova conta e o utilizador é autenticado.

   

   Utilizador autenticado

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

Exercício 2: Criação de um Controlador MVC Usando Andaimes

Neste exercício, vai aproveitar o framework ASP.NET Scaffolding fornecido pelo Visual Studio para criar um controlador MVC 5 ASP.NET com ações e vistas Razor para realizar operações CRUD, sem escrever uma única linha de código. O processo de andaime utilizará o Entity Framework Code First para gerar o contexto dos dados e o esquema da base de dados na base SQL.

Sobre o Entity Framework Code First

Entity Framework (EF) é um mapeador objeto-relacional (ORM) que permite criar aplicações de acesso a dados programando com um modelo conceptual de aplicação, em vez de programar diretamente usando um esquema de armazenamento relacional.

O fluxo de trabalho de modelação Code First do Entity Framework permite-lhe usar as suas próprias classes de domínio para representar o modelo em que a EF depende ao realizar consultas, monitorizar alterações e atualizar funções. Usando o fluxo de trabalho de desenvolvimento Code First, não precisa de iniciar a sua aplicação criando uma base de dados ou especificando um esquema. Em vez disso, pode escrever classes .NET padrão que definam os objetos de modelo de domínio mais apropriados para a sua aplicação, e o Entity Framework criará a base de dados por si.

Tarefa 1 – Criar um Novo Modelo

Agora irá definir uma classe Pessoa, que será o modelo usado pelo processo de scaffolding para criar o controlador MVC e as views. Começará por criar uma classe modelo Person , e as operações CRUD no controlador serão criadas automaticamente usando funcionalidades de andaime.

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

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

   

   Adição da classe modelo Person

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

   

   Criação da classe modelo Person

4. Substitua o conteúdo do ficheiro Person.cs pelo seguinte código. Prima CTRL + S para guardar as alterações.

   (Excerto 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 Explorador de Soluções, clique com o botão direito no projeto MyHybridSite e selecione Construir, ou pressione CTRL + SHIFT + B para construir o projeto.

Tarefa 2 – Criar um Controlador MVC

Agora que o modelo Person está criado, irá usar o scaffolding MVC do ASP.NET com o Entity Framework para criar as ações e vistas do controlador CRUD para Person.

1. No Explorador de Soluções, clique com o botão direito na pasta Controladores do projeto MyHybridSite e selecione Adicionar | Novo Item Andaimado....

   

   Criação de um novo Controlador Estruturado

2. Na caixa de diálogo Adicionar Estrutura, selecione MVC 5 Controller com views, usando Entity Framework e depois clique em Adicionar.

   

   Selecionar Controlador MVC 5 com Views e Entity Framework

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

   

   Adicionar um controlador MVC com andaimes

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

   

   Criação de um novo contexto de dados

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

   

   Criação do novo tipo PersonContext

6. Clique em Adicionar para criar o novo controlador para Pessoa com andaime. O Visual Studio então gera as ações do controlador, o contexto de dados do Person e as vistas Razor.

   

   Após criar o controlador MVC com andaime

7. Abre o ficheiro MvcPersonController.cs na pasta Controllers . Note 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 de controlador assíncronas das opções de andaimes nos passos anteriores, o Visual Studio gera métodos de ação assíncronos para todas as ações que envolvem acesso ao contexto de dados da Pessoa. Recomenda-se que utilize métodos de ação assíncronos para pedidos de longa duração e não limitados à CPU, para evitar bloquear o servidor Web de realizar trabalho enquanto o pedido está a ser processado.

Tarefa 3 – Executar a Solução

Nesta tarefa, irá executar novamente a solução para verificar se as visualizações do Person estão a funcionar como esperado. Irá adicionar uma nova pessoa para verificar se foi guardado com sucesso na base de dados.

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

2. Navegue até /MvcPerson. A vista em andaime que mostra a lista de pessoas deve aparecer.

3. Clica em Criar Novo para adicionar uma nova pessoa.

   

   Navegando para as vistas MVC geradas automaticamente

4. Na vista Criar , indique um Nome e uma Idade para a pessoa, e clique em Criar.

   

   Adicionar uma nova pessoa

5. A nova pessoa é adicionada à lista. Na lista de elementos, clique em Detalhes para mostrar a visualização de detalhes da pessoa. Depois, na vista de Detalhes , clique em Voltar para a Lista para voltar à vista de lista.

   

   Visualização de detalhes da pessoa

6. Clique no link Eliminar para eliminar a pessoa. Na vista Eliminar, clique em Eliminar para confirmar a operação.

   

   Apagar uma pessoa

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

Exercício 3: Criação de um Controlador de API Web Usando Andaimes

A framework Web API faz parte da ASP.NET Stack e foi concebida para facilitar a implementação de serviços HTTP, geralmente enviando e recebendo dados em formato JSON ou XML através de uma API RESTful.

Neste exercício, irá usar novamente ASP.NET Scaffolding para gerar um controlador Web API. Vais usar as mesmas classes Person e PersonContext do exercício anterior para fornecer os mesmos dados de pessoa em formato JSON. Vais ver como podes expor os mesmos recursos de formas diferentes dentro da mesma ASP.NET aplicação.

Tarefa 1 – Criação de um Controlador de API Web

Nesta tarefa, irá criar um novo Web API Controller que exporá os dados da pessoa num formato consumível por máquina, 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 . Em alternativa, pode continuar com a solução que obteve no exercício anterior.

   Observação

   Se começares com a solução Begin do Exercício 3, pressiona CTRL + SHIFT + B para construir a solução.

2. No Explorador de Soluções, clique com o botão direito na pasta Controladores do projeto MyHybridSite e selecione Adicionar | Novo Item Andaimado....

   

   Criação de um novo Controlador com andaimes

3. Na caixa de diálogo Adicionar Andaime, selecione Web API no painel esquerdo, depois Web API 2 Controller com ações, usando Entity Framework no painel do meio e, em seguida, clique em Adicionar.

   

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

4. Defina ApiPersonController como nome do Controlador, selecione a opção Usar ações do controlador assíncrono e selecione Person (MyHybridSite.Models) e PersonContext (MyHybridSite.Models) como classes de contextoModel e Data, respetivamente. Em seguida, clique em Adicionar.

   

   Adição de um controlador Web API com andaimes

5. O Visual Studio gera então a classe ApiPersonController com as quatro ações CRUD para trabalhar com os seus dados.

   

   Após criar o controlador Web API com andaimes

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

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

7. Agora repare no comentário acima da definição do método. Fornece o URI que expõe esta ação, que irá usar na próxima tarefa.

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

   Observação

   Por defeito, a Web API está configurada para captar as consultas ao caminho /api para evitar colisões com controladores MVC. Se precisares de alterar esta definição, consulta o Routing na ASP.NET Web API.

Tarefa 2 – Executar a Solução

Nesta tarefa, irá utilizar as ferramentas de desenvolvimento do Internet Explorer F12 para inspecionar a resposta completa do controlador da API Web. Verá como pode captar tráfego de rede para obter mais informações sobre os dados da sua aplicação.

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

   Observação

   Para executar esta tarefa corretamente, a sua aplicação precisa de ter dados. Se a sua base de dados estiver vazia, pode voltar à Tarefa 3 no Exercício 2 e seguir os passos para criar uma nova pessoa usando as vistas MVC.

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

   

   Iniciar a captura de redes Web API

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

   

   Recuperação de dados de pessoas através da Web API

   Observação

   Quando o download terminar, ser-se-á solicitado a fazer uma ação com o ficheiro descarregado. Deixa a caixa de diálogo aberta para poderes ver o conteúdo das respostas através da janela da Ferramenta de Desenvolvedores.

4. Agora inspecionará o conteúdo da resposta. Para isso, clique no separador Detalhes e depois em Corpo da Resposta. Pode verificar se os dados descarregados são uma lista de objetos com as propriedades Id, Nome e Idade que correspondem à classe Pessoa .

   

   Visualização do Corpo de Resposta da Web API

Tarefa 3 – Adicionar Páginas de Ajuda da Web API

Quando cria uma API Web, é útil criar uma página de ajuda para que outros programadores saibam como chamar a sua API. Pode criar e atualizar manualmente as páginas de documentação, mas é melhor gerá-las automaticamente para evitar ter de fazer trabalhos de manutenção. Nesta tarefa, irá 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 Gestor de Pacotes NuGet e depois clique em Console do Gestor de Pacotes.

2. Na janela da Consola do Gestor 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 vistas MVC para as páginas de ajuda na pasta Areas/HelpPage .

   

   Área da Página de Ajuda

3. Por defeito, as páginas de ajuda têm cadeias de apoio para documentação. Pode usar comentários de documentação XML para criar a documentação. Para ativar esta funcionalidade, abra o ficheiro HelpPageConfig.cs localizado na pasta Areas/HelpPage/App_Start e descomente a seguinte linha:

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

4. No Explorador de Soluções, clique com o botão direito no projeto MyHybridSite, selecione Propriedades e clique no separador Construir.

   

   Aba de construção

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

   

   Secção de saída na aba "Build"

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

7. Abre o ficheiro ApiPersonController.cs da pasta Controllers .

8. Introduza uma nova linha entre a assinatura do método GetPeople e o comentário // GET api/ApiPerson, e depois escreva três barras para a frente.

   Observação

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

9. Adicione um texto resumo e o valor de retorno para o método GetPeople . Deve parecer 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. Pressiona F5 para executar a solução.

11. Adicione /help ao URL na barra de endereços para navegar até à página de ajuda.

    

    ASP.NET Página de Ajuda da Web API

    Observação

    O conteúdo principal da página é uma tabela de APIs, agrupadas por controlador. As entradas da tabela são geradas dinamicamente, usando a interface IApiExplorer . Se adicionar ou atualizar um controlador de API, a tabela será automaticamente atualizada na próxima vez que construir a aplicação.

    A coluna 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. Note que a descrição que adicionou acima da definição do método está apresentada na coluna de descrição.

    

    Descrição do método API

13. Clique num dos métodos da API para navegar até uma página com informações mais detalhadas, incluindo exemplos de respostas.

    

    Página de informação detalhada

Resumo

Ao completar este laboratório prático, aprendeu como:

• Crie uma nova aplicação Web usando a One ASP.NET Experience no Visual Studio 2013
• Integrar múltiplas tecnologias de ASP.NET num único projeto
• Gera controladores MVC e vistas a partir das tuas classes de modelo usando ASP.NET Scaffolding
• Gerar controladores Web API, que utilizam funcionalidades como Programação Assíncrona e acesso a dados através do Entity Framework
• Gera automaticamente Páginas de Ajuda da Web API para os teus controladores