Parte 2, adicionar um controlador a um aplicativo MVC ASP.NET Core

Por Rick Anderson

O padrão de arquitetura Model-View-Controller (MVC) separa um aplicativo em três componentes principais: Model, View e Controller. O padrão MVC ajuda você a criar aplicativos que são mais testáveis e fáceis de atualizar do que os aplicativos monolíticos tradicionais.

Os aplicativos baseados em MVC contêm:

• Models: classes que representam os dados do aplicativo. As classes de modelo usam lógica de validação para impor regras de negócios para esses dados. Normalmente, os objetos de modelo recuperam e armazenam o estado do modelo em um banco de dados. Neste tutorial, um modelo de Movie recupera dados de filmes de um banco de dados, fornece-os à exibição ou os atualiza. Os dados atualizados são gravados em um banco de dados.
• Views: As visualizações são os componentes que exibem a interface de utilizador (UI) do aplicativo. Geralmente, essa interface do usuário exibe os dados do modelo.
• Controllers: Classes que:
  • Lide com solicitações do navegador.
  • Recupere dados do modelo.
  • Modelos de exibição de chamada que retornam uma resposta.

Em um aplicativo MVC, a exibição exibe apenas informações. O controlador manipula e responde à entrada e interação do usuário. Por exemplo, o controlador manipula segmentos de URL e valores de cadeia de caracteres de consulta e passa esses valores para o modelo. O modelo pode usar esses valores para consultar o banco de dados. Por exemplo:

• https://localhost:5001/Home/Privacy: especifica o controlador de Home e a ação Privacy.
• https://localhost:5001/Movies/Edit/5: é uma solicitação para editar o filme com ID=5 usando o controlador Movies e a ação Edit, que são detalhados mais adiante no tutorial.

Os dados de rota são explicados mais adiante no tutorial.

O padrão de arquitetura MVC separa um aplicativo em três grupos principais de componentes: Modelos, Exibições e Controladores. Esse padrão ajuda a obter a separação de preocupações: a lógica da interface do usuário pertence à exibição. A lógica de entrada pertence ao controlador. A lógica de negócios pertence ao modelo. Essa separação ajuda a gerenciar a complexidade ao criar um aplicativo, pois permite trabalhar em um aspeto da implementação de cada vez sem afetar o código de outro. Por exemplo, você pode trabalhar no código de exibição sem depender do código da lógica de negócios.

Esses conceitos são introduzidos e demonstrados nesta série de tutoriais durante a criação de um aplicativo de filme. O projeto MVC contém pastas para os Controladores e Vistas.

Adicionar um controlador

Estúdio Visual

No Gerenciador de Soluções , clique com o botão direito do mouse em Controladores > Adicionar > Controlador.

Na caixa de diálogo Adicionar Novo Item Andaime, selecione Controlador MVC - Vazio>Adicionar.

Na caixa de diálogo Adicionar Novo Item - MvcMovie, introduza HelloWorldController.cs e selecione Adicionar.

Código do Visual Studio

Selecione o ícone EXPLORER e, em seguida, clique com o botão direito do rato enquanto mantém a tecla Control pressionada em Controllers > New File e atribua um nome ao novo ficheiro HelloWorldController.cs.

Substitua o conteúdo do Controllers/HelloWorldController.cs pelo seguinte código:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    // 
    // GET: /HelloWorld/
    public string Index()
    {
        return "This is my default action...";
    }
    // 
    // GET: /HelloWorld/Welcome/ 
    public string Welcome()
    {
        return "This is the Welcome action method...";
    }
}

Cada método public em um controlador é chamável como um ponto de extremidade HTTP. No exemplo acima, ambos os métodos retornam uma cadeia de caracteres. Observe os comentários que precedem cada método.

Um ponto de extremidade HTTP:

• É uma URL alvo na aplicação web, como https://localhost:5001/HelloWorld.
• Combinações:
  • O protocolo utilizado: HTTPS.
  • O local de rede do servidor Web, incluindo a porta TCP: localhost:5001.
  • O URI de destino: HelloWorld.

O primeiro comentário afirma que este é um método HTTP GET que é invocado anexando /HelloWorld/ à URL base.

O segundo comentário especifica um método HTTP GET que é invocado anexando /HelloWorld/Welcome/ à URL. Mais adiante no tutorial, o mecanismo de andaime é usado para gerar métodos HTTP POST, que atualizam dados.

Execute o aplicativo sem o depurador pressionando Ctrl+F5.

Adicione /HelloWorld ao caminho na barra de endereço. O método Index retorna uma cadeia de caracteres.

O MVC invoca classes de controlador e os métodos de ação dentro delas, dependendo da URL de entrada. A lógica de roteamento de URL de padrão usada pelo MVC, usa um formato como este para determinar qual código invocar:

/[Controller]/[ActionName]/[Parameters]

O formato de roteamento é definido no arquivo Program.cs.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Quando você navega até o aplicativo e não fornece nenhum segmento de URL, o padrão é o controlador "Home" e o método "Index" especificado na linha de modelo destacada acima. Nos segmentos de URL anteriores:

• O primeiro segmento de URL determina a classe de controlador a ser executada. Assim, localhost:5001/HelloWorld mapeia para a classe controladora HelloWorld.
• A segunda parte do segmento de URL determina o método de ação na classe. Portanto, localhost:5001/HelloWorld/Index faz com que o método Index da classe HelloWorldController seja executado. Observe que você só tinha que navegar para localhost:5001/HelloWorld e o método Index foi chamado por padrão. Index é o método padrão que será chamado em um controlador se um nome de método não for explicitamente especificado.
• A terceira parte do segmento de URL ( id) é para dados de rota. Os dados de rota são explicados mais adiante no tutorial.

Navegue até: https://localhost:{PORT}/HelloWorld/Welcome. Substitua {PORT} pelo número da porta.

O método Welcome é executado e retorna a cadeia de caracteres This is the Welcome action method.... Para essa URL, o controlador é HelloWorld e Welcome é o método de ação. Ainda não utilizou a parte [Parameters] do URL.

Modifique o código para passar algumas informações de parâmetros da URL para o controlador. Por exemplo, /HelloWorld/Welcome?name=Rick&numtimes=4.

Altere o método Welcome para incluir dois parâmetros, conforme mostrado no código a seguir.

// GET: /HelloWorld/Welcome/ 
// Requires using System.Text.Encodings.Web;
public string Welcome(string name, int numTimes = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
}

O código anterior:

• Usa o recurso de parâmetro opcional C# para indicar que o parâmetro numTimes assume como padrão 1 se nenhum valor for passado para esse parâmetro.
• Usa HtmlEncoder.Default.Encode para proteger o aplicativo de entradas maliciosas, como por meio de JavaScript.
• Usa strings interpoladas em $"Hello {name}, NumTimes is: {numTimes}".

Execute o aplicativo e navegue para: https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4. Substitua {PORT} pelo número da porta.

Experimente valores diferentes para name e numtimes no URL. O sistema de vinculação de modelo MVC mapeia automaticamente os parâmetros nomeados da query string para os parâmetros no método. Consulte Model Binding para obter mais informações.

Na imagem anterior:

• O segmento de URL Parameters não é usado.
• Os parâmetros name e numTimes são passados na cadeia de caracteres de consulta .
• O ? (ponto de interrogação) no URL acima é um separador e a cadeia de caracteres de consulta segue.
• O caractere & separa os pares campo-valor.

Substitua o método Welcome com o seguinte código:

public string Welcome(string name, int ID = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, ID: {ID}");
}

Execute o aplicativo e digite o seguinte URL: https://localhost:{PORT}/HelloWorld/Welcome/3?name=Rick

Na URL precedente

• O terceiro segmento de URL correspondia ao parâmetro route id.
• O método Welcome contém um parâmetro id que correspondia ao modelo de URL no método MapControllerRoute.
• O ? à direita inicia a cadeia de caracteres de consulta .

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

No exemplo anterior:

• O terceiro segmento de URL correspondeu ao parâmetro de rota id conforme definido no modelo de roteamento no arquivo Program.cs.
• O método Welcome contém um parâmetro id que correspondia ao modelo de URL no método MapControllerRoute.
• O ? à direita (em id?) indica que o parâmetro id é opcional.

Anterior: IntroduçãoPróximo: Adicionar um modo de exibição