Escolha uma Página
(Last Updated On: 27/06/2018)

Adicionando um controlador a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

por | ago 21, 2017 | Controllers, Desenvolvimento de Aplicações, Tutorial | 0 Comentários

Aqui veremos conceitos básicos sobre a arquitetura MVC (Model-View-Controller). ou seja, um modelo que  separa um aplicativo em três componentes principais: Modelo, Visualizador e Controlador.

Conceito e Benefícios do Modelo MVC (Model-View-Controller)

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

Modelos: Classes que representam os dados do aplicativo. As classes modelo usam a lógica de validação para impor regras de negócios para esses dados. Normalmente, os objetos do modelo recuperam e armazenam o estado do modelo em um banco de dados. Neste tutorial, um modelo de filme (Movie) recupera dados de filmes de um banco de dados, fornece-o para a visualização ou para atualização. Os dados atualizados são gravados em um banco de dados. Os Modelos ficam normalmente armazenados numa pasta Models, em arquivos com NomeDoModelo.cs. Os modelos, além de descreverem os dados da aplicação, podem incorporar várias regras de negócio. Para cada “campo” você pode definir um nome padrão, se é requerido, seu intervalo, se é chave, o tipo de mensagem de erro, a format\ção numérica ou de data e assim por diante. Toda vez que você usar o campo, na aplicação, ele assumirá essas regras por definição. Ou seja, você define isso uma única vez e esquece no restante do código).

Visualizadores: são os componentes que exibem a interface do usuário (UI) do aplicativo. Geralmente, essas UIs (user interfaces) exibem os dados do modelo (do banco de dados). Os visualizadores (Views) ficar normalmente armazenados numa pasta Views, em arquivos NomeDoVisualizador.cshtml (equivalem às páginas HTML que conhecemos bem, só que permitem acessos diretos a dados manipulados nos controladores, tornando-se dinâmicas e não estáticas. Além disso, permitem uso de lógicas bem interessantes tipo mostre isso se… ou mostre aquilo se…. Outro benefício é que usam auxiliadores de tags (Tag Helpers), que ajudam a escrever a página com pouquíssimo código. Quando ela é compilada, o código se expande e se torna completo para ser interpretado corretamente pelos navegadores HTML5. O Core tem uma fantástica biblioteca de Tags e, se isso não bastar, você pode criar suas próprias Tags, indo muito além do HTML5.

Controladores: são classes que manipulam solicitações do navegador. Eles recuperam os dados do modelo e chamam os modelos de exibição (visualizadores ou Views) que retornam uma resposta. Também são os controladores, em geral (se você não interferir com programas em Javascript ou Jquery) que, cada vez que o usuário clica em alguma coisa, captam esse clique e executam uma ação correspondente. Em um aplicativo MVC, em geral a o visualizador apenas exibe informações e fica aguardando uma ação do usuário. Assim que o usuário clica em algo é o controlador faz alguma coisa, devolvendo ao visualizador(View) o que deve ser mostrado ao usuário. Se o usuário clicou por exemplo num item de menu, é o controlador que manipula dados, procurando a rota de navegação e, se forem passados parâmetros nesse link, ele processa os dados com esses parâmetros (no banco de dados), faz cálculos se necessários e devolve para o visualizador (View)o que deve ser mostrado na tela (no caso, outra página, com os dados de consulta solicitados pelo usuário). É sempre o Controlador (Controller) que interage com o banco de dados, e sempre seguindo as regras e definições dos Modelos (Models). Por exemplo (rodando no modo local, em localhost), se o usuário clica num item de que tem http://localhost:1234/Home/About, o controlador sabe que a rota é Home (em geral um subdiretório do diretório Views), onde vai buscar o arquivo About.cshtml. Só que, antes de mostrar o arquivo de visualização, ele consulta uma ação, também definida dentro dele (controlador Home.cs). Essa ação pode ser a mais simples possível, tipo “apenas mostre a página Home.cshtml) (na prática, o código é return View(), ou seja mostre a página e ponto final). Se a página About vai ter que mostrar algum dado do seu banco de dados, o controlador manda ler esses dados, conforme o seu modelo diz que tem que ser, e os entrega para a página de visualização. Nisso, em geral, ele faz o trabalho ompleto: entrega para a página About tudo o que está no seu modelo. Pode ser que os dados da sua empresa tenham CNPJ, Endereço de Entrega, Nome da Empresa, E-mail de Contato. O que vai aparecer na página About? Somente o que você definir que tem que aparecer. Poder só Nome da Empresa, Telefone e E-mail de Contato. Veja a sequência na figura abaixo:

MOdelo COre MVC

 

O Padrão MVC – Adicionando um Controller

O padrão MVC ajuda você a criar aplicativos que separam os diferentes aspectos do aplicativo (lógica de entrada, lógica de negócios e lógica de UI (user interface ou interface de usuário).

Ao mesmo tempo, proporcionam um acoplamento livre entre esses elementos. O padrão especifica onde cada tipo de lógica deve estar localizada na aplicação: a lógica da UI pertence ao Visualizador. A lógica de tratamento dos dados de entrada pertencem ao controlador. A lógica de negócios (e, em geral, de apresentação) pertence ao modelo.

Essa separação ajuda você a gerenciar a complexidade na criação de um aplicativo. Porque você trabalhar em um aspecto da implementação sem afetar o código de outro aspecto. Por exemplo, você pode trabalhar no código de exibição (que ficam no Visualizador ou View), sem se preocupar com as lógicas de aquisição e processamento dos dados (que ficam no Controlador ou Controller)  ou de apresentação dos dados (que ficam no Modelo. ou Model). Veremos todos estes conceitos nesta série de artigos deste tutorial e mostraremos como usá-los para criar um aplicativo, no nosso exemplo, de filmes.

Um projeto MVC contém pastas específicas para controladores, modelos e visualizadores, como já mencionamos. Para adicionar um controlador:

  • Em Solutions Explorer, clique com o botão direito do mouse em Controllers> Add> New Item

ADICIONA CONTROLLER mvc

 

  • Selecione MVC Controller Class
  • No diálogo Add New Item, entre com HelloWorldController

adiciona controller MVC

 

Troque o conteúdo de Controllers/HelloWorldController.cs com o seguinte código

Todo método público (public) em um controlador é “chamável” como um endereço HTTP.

Na exemplo acima, os dois métodos retornam uma “string” (texto). Observe os comentários que precedem cada método.

Um ponto final (endpoint) HTTP é um URL endereçável pelo aplicativo da Web, assim como http://localhost:1234/HelloWorld. E combina o protocolo usado: HTTP, a localização na rede do servidor web (incluindo a Porta TCP, no caso da depuração local localhost:1234 e o arquivo de visualização alvo, no caso, HelloWorld.

Note que é feita uma chamada tipo GET. Ou seja ,é preciso pegar alguma coisa para mostrar. Por isso é um método HTTP GET, chamado pela adição de “/HelloWorld /” na URL base.

O segundo comentário também mostra um método HTTP GET, que é chamado pela adição de “/HelloWorld/Welcome/” à URL. Mais tarde, neste tutorial, você usará o mecanismo de “scaffolding” para gerar métodos HTTP POST (ou seja, que vão devolver dados para os visualizadores).

Execute o aplicativo em modo não depurado e acrescente “HelloWorld” ao caminho, na barra de endereços. O método Index retornará uma string (um texto).

controlador retorno MVC

O MVC invoca as classes do controlador (e os métodos de ação dentro delas) dependendo da URL recebida. A lógica de roteamento de URL padrão usada pelo MVC usa um formato como esse para determinar o código a ser invocado:

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

Você é quem configura o formato de roteamento no arquivo Startup.cs.

Quando você executa o aplicativo e não fornece nenhum segmento de URL, o padrão para o controlador segue o que está definido no padrão acima – no caso “Home” e com o  método “Index“.

A “primeira” parte da URL determina a classe do controlador a ser executada. A segunda parte do segmento de URL determina o método de ação (Acction) dwntro da classe.

Por exemplo, localhost:xxxx/HelloWorld/15 mapeia para a classe HelloWorldController (arquivo HelloWorldController.cs) .  Observe que você só teve que navegar para localhost: xxxx/HelloWorld.

Isso ocorre porque o Index é o método padrão (default)  que será chamado em um controlador se um nome de método não for DIRETAMENTE especificado.

A terceira parte do segmento de URL (em geral é uma id) é para dados de rota. Ou seja, é a passagem de um parâmetros, como estamos acostumados em chamadas do tipo htttp:minhauerl.com.br?id=15.  Veremos dados de parâmetros nas rotas mais tarde neste tutorial.

Navegue até http://localhost: xxxx/HelloWorld. (xxx é definido no seu Visual Studio). Você verá a tela com as boas-vindas, que retorna a string “This is the Welcome method” (este é o método de boas vindas).  Para esta URL, o controlador é HelloWorld e Welcome é a ação (Action) do método. Neste exemplo simples, ainda não foram utilizados [Parâmetros] na URL.

controller MVC

Modifique o código, passando agora algum parâmetro na URL. Por exemplo, /HelloWorld/Welcome?name=Maria&numtimes=4. Mude o método Welcome para que ele aceite (e opere) estes 2 parâmetros, de acordo com o seguinte código:

 

O código acima:

  • Usa o recurso C# de parâmetro opcional para indicar que o parâmetro numTimes  tem o valor padrão  = 1 se nenhum valor for passado para esse parâmetro;
  • Utiliza UsesHtmlEncoder.Default.Encode para proteger a aplicação de entrada maliciosa (ou seja, entradas do tipo JavaScript);
  • Usa “Interpolated strings” (textos interpolados), que são acrescentados dentro dos {}.

Rode sua aplicação e navegue para:

http://localhost:xxx/HelloWorld/Welcome?name=Rick&numtimes=4

(Troque xxx pelo número da porta que seu Visual Studio definiu).

Você pode usarr diferentes valores para nomes e números na URL. O sistema de ligação (binding)  do modelo MVC mapeia automaticamente os parâmetros nomeados da cadeia de consulta na barra de endereços para os parâmetros dentro do seu método. mais tarde veremos com detalhes essa questão de ligação (binding).

controlador MVC

Na imagem acima. o segmento da URL (Parameters) não é usado dentro do padrão do Core MVC. Os parâmetros name e numTimes são passados como “query strings” (do jeito como estamos acostumados). É por isso que aparece o ? (interrogação) na URL, que é um separador, que tem os parâmetros depois dele. Como você sabe, o carácter & separa as strings de uma query.

Troque o método Welcome pelo seguinte código:

 

 

Rode a aplicação e entre com a seguinte URL (no seu navegador):

http://localhost/xxx/HelloWorld/Welcome/3?name=Rick

controller MVC

Desta vez, o terceiro segmento de URL corresponde ao id do parâmetro da rota. O método de Welcome contém um ID de parâmetro que corresponde ao modelo de URL no método MapRoute. A trilha? (em id?) Indica que o parâmetro id é um parâmetro opcional. (é bem importante lembrar disso).

Nestes exemplos, o controlador está fazendo a parte “VC” do MVC – isto é, a visão e o controlador é que trabalham de verdade. O controlador está retornando HTML diretamente. Geralmente você não quer que os controladores retornem o HTML diretamente, já que isso se torna muito pesado ao codificar e manter essa codificação. Em vez disso, você geralmente usa um arquivo de modelo de visualização (View). que é um arquivo tipo template (Razor), separado, para ajudar a gerar a resposta em HTML. Veremos isso no próximo tutorial.

No Visual Studio, no modo de não-depuração (Ctrl + F5), você não precisa criar o aplicativo depois de alterar o código. Basta salvar o arquivo, atualizar seu navegador e você pode ver as mudanças. Se estiver no mode de depuração simples. mudanças nos arquivos de visualização, se salvos, podem ser vistos sem a necessidade de recompilar a aplicação. Isso facilta muito, pois nasta dar um “refresh” na página do navegador.

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business