Parte 2: Controladores

por Jon Galloway

O MVC Music Store é um aplicativo de tutorial que apresenta e explica passo a passo como usar ASP.NET MVC e Visual Studio para desenvolvimento na Web.

A MVC Music Store é uma implementação leve de loja de exemplo que vende álbuns de música online e implementa a administração básica do site, a entrada do usuário e a funcionalidade do carrinho de compras.

Esta série de tutoriais detalha todas as etapas executadas para criar o aplicativo de exemplo ASP.NET MVC Music Store. A parte 2 abrange controladores.

Com estruturas da Web tradicionais, as URLs de entrada normalmente são mapeadas para arquivos em disco. Por exemplo: uma solicitação para uma URL como "/Products.aspx" ou "/Products.php" pode ser processada por um arquivo "Products.aspx" ou "Products.php".

As estruturas MVC baseadas na Web mapeiam URLs para o código do servidor de uma maneira ligeiramente diferente. Em vez de mapear URLs de entrada para arquivos, eles mapeiam URLs para métodos em classes. Essas classes são chamadas de "Controladores" e são responsáveis por processar solicitações HTTP de entrada, lidar com a entrada do usuário, recuperar e salvar dados e determinar a resposta para enviar de volta ao cliente (exibir HTML, baixar um arquivo, redirecionar para uma URL diferente etc.).

Adicionando um HomeController

Começaremos nosso aplicativo MVC Music Store adicionando uma classe Controller que manipulará URLs à home page do nosso site. Seguiremos as convenções de nomenclatura padrão de ASP.NET MVC e o chamaremos de HomeController.

Clique com o botão direito do mouse na pasta "Controladores" no Gerenciador de Soluções e selecione "Adicionar" e, em seguida, o "Controlador..." Comando:

Isso abrirá a caixa de diálogo "Adicionar Controlador". Nomeie o controlador como "HomeController" e pressione o botão Adicionar.

Isso criará um novo arquivo, HomeController.cs, com o seguinte código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcMusicStore.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
    }
}

Para começar da maneira mais simples possível, vamos substituir o método Index por um método simples que apenas retorna uma cadeia de caracteres. Faremos duas alterações:

• Alterar o método para retornar uma cadeia de caracteres em vez de um ActionResult
• Altere a instrução return para retornar "Hello from Home"

O método agora deve ter esta aparência:

public string Index()
{
    return "Hello from Home";
}

Executando o aplicativo

Agora, vamos executar o site. Podemos iniciar nosso servidor Web e experimentar o site usando qualquer um dos seguintes:

• Escolha o item de menu Depurar ⇨ Iniciar Depuração
• Clique no botão Seta verde na barra de ferramentas
• Use o atalho de teclado F5.

O uso de qualquer uma das etapas acima compilará nosso projeto e, em seguida, fará com que o servidor de desenvolvimento ASP.NET interno do Visual Web Developer seja iniciado. Uma notificação será exibida no canto inferior da tela para indicar que o servidor de desenvolvimento do ASP.NET foi iniciado e mostrará o número da porta em que ele está sendo executado.

O Visual Web Developer abrirá automaticamente uma janela do navegador cuja URL aponta para nosso servidor Web. Isso nos permitirá experimentar rapidamente nosso aplicativo Web:

Ok, isso foi muito rápido – criamos um novo site, adicionamos uma função de três linhas e temos texto em um navegador. Não é ciência de foguetes, mas é um começo.

Observação: o Visual Web Developer inclui o ASP.NET Development Server, que executará seu site em um número de "porta" gratuito aleatório. Na captura de tela acima, o site está em execução em http://localhost:26641/, portanto, ele está usando a porta 26641. O número da porta será diferente. Quando falarmos sobre URLs como /Store/Browse neste tutorial, isso irá atrás do número da porta. Supondo um número de porta 26641, navegar até /Store/Procurar significará navegar até http://localhost:26641/Store/Browse.

Adicionando um StoreController

Adicionamos um HomeController simples que implementa a Home Page do nosso site. Agora vamos adicionar outro controlador que usaremos para implementar a funcionalidade de navegação do nosso repositório de músicas. Nosso controlador de repositório dará suporte a três cenários:

• Uma página de listagem dos gêneros musicais em nossa loja de música
• Uma página de navegação que lista todos os álbuns de música em um gênero específico
• Uma página de detalhes que mostra informações sobre um álbum de música específico

Começaremos adicionando uma nova classe StoreController.. Caso ainda não tenha feito isso, pare de executar o aplicativo fechando o navegador ou selecionando o item de menu Depurar ⇨ Parar Depuração.

Agora, adicione um novo StoreController. Assim como fizemos com HomeController, faremos isso clicando com o botão direito do mouse na pasta "Controladores" no Gerenciador de Soluções e escolhendo o item de menu Adicionar Controlador>

Nosso novo StoreController já tem um método "Index". Usaremos esse método "Index" para implementar nossa página de listagem que lista todos os gêneros em nossa loja de músicas. Também adicionaremos dois métodos adicionais para implementar os dois outros cenários que queremos que nosso StoreController manipule: Procurar e Detalhes.

Esses métodos (Index, Browse e Details) em nosso Controlador são chamados de "Ações do Controlador" e, como você já viu com o método de ação HomeController.Index(), seu trabalho é responder às solicitações de URL e (em geral, falando) determinar qual conteúdo deve ser enviado de volta para o navegador ou usuário que invocou a URL.

Iniciaremos nossa implementação de StoreController alterando o métodoIndex() para retornar a cadeia de caracteres "Hello from Store.Index()" e adicionaremos métodos semelhantes para Browse() e Details():

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcMusicStore.Controllers
{
    public class StoreController : Controller
    {
        //
        // GET: /Store/
        public string Index()
        {
            return "Hello from Store.Index()";
        }
        //
        // GET: /Store/Browse
        public string Browse()
        {
            return "Hello from Store.Browse()";
        }
        //
        // GET: /Store/Details
        public string Details()
        {
            return "Hello from Store.Details()";
        }
    }
}

Execute o projeto novamente e navegue pelas seguintes URLs:

• /Loja
• /Store/Browse
• /Store/Details

O acesso a essas URLs invocará os métodos de ação em nosso Controlador e retornará respostas de cadeia de caracteres:

Isso é ótimo, mas são apenas cadeias de caracteres constantes. Vamos torná-los dinâmicos, para que eles peguem informações da URL e as exibam na saída da página.

Primeiro, alteraremos o método de ação Procurar para recuperar um valor querystring da URL. Podemos fazer isso adicionando um parâmetro "gênero" ao nosso método de ação. Quando fizermos isso ASP.NET o MVC passará automaticamente qualquer parâmetro querystring ou post de formulário chamado "gênero" para nosso método de ação quando ele for invocado.

//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
 {
    string message = HttpUtility.HtmlEncode("Store.Browse, Genre = "
+ genre);
 
    return message;
 }

Observação: estamos usando o método utilitário HttpUtility.HtmlEncode para limpar a entrada do usuário. Isso impede que os usuários injetem Javascript em nossa Exibição com um link como /Store/Browse? Genre=<script>window.location=''<http://hackersite.com/script>.

Agora vamos procurar /Store/Browse? Genre=Disco

Em seguida, vamos alterar a ação Detalhes para ler e exibir um parâmetro de entrada chamado ID. Ao contrário do nosso método anterior, não inseriremos o valor da ID como um parâmetro querystring. Em vez disso, vamos inseri-lo diretamente na própria URL. Por exemplo: /Store/Details/5.

ASP.NET MVC nos permite fazer isso facilmente sem precisar configurar nada. ASP.NET convenção de roteamento padrão do MVC é tratar o segmento de uma URL após o nome do método de ação como um parâmetro chamado "ID". Se o método de ação tiver um parâmetro chamado ID, ASP.NET MVC passará automaticamente o segmento de URL para você como um parâmetro.

//
// GET: /Store/Details/5
public string Details(int id)
 {
    string message = "Store.Details, ID = " + id;
 
    return message;
 }

Execute o aplicativo e navegue até /Store/Details/5:

Vamos recapitular o que fizemos até agora:

• Criamos um novo projeto ASP.NET MVC no Visual Web Developer
• Discutimos a estrutura de pastas básica de um aplicativo MVC ASP.NET
• Aprendemos a executar nosso site usando o servidor de desenvolvimento do ASP.NET
• Criamos duas classes controller: um HomeController e um StoreController
• Adicionamos métodos de ação aos nossos controladores que respondem a solicitações de URL e retornam texto ao navegador

AnteriorAvançar