ASP .NET Core MVC -  Obtendo dados de um formulário HTML

Hoje vamos recordar um conceito básico mas importante: como obter dados de um formulário HTML na ASP .NET Core MVC

Já estamos no ,NET 5.0 mas obter dados de um formulário é um conceito básico que praticamente é feito de duas formas (existem mais...) básicas que iremos tratar neste artigo.

Como vamos usar a ASP .NET Core 5.0 precisamos atualizar o  ambiente para o .NET 5 e atualizar o VS Community 2019.

Para isso acesse os links abaixo e faça o download e a instalação das seguintes pacotes:

  1. SDK 5.0
  2. Visual Studio 2019 Community (16.8.0 ou superior)

Com os pacotes instalados podemos iniciar.

Mãos a obra..

Criando o projeto ASP .NET Core MVC

Como o lançamento do .NET 5.0 foi feito recentemente eu vou mostrar como criar o projeto no ambiente do .NET 5.0.

Abra o VS 2019 Community e crie um projeto usando o template ASP.NET Core Web Application; 

A seguir vamos configurar o projeto informando o nome do projeto Aspn5_FormData e localização e nome da solução conforme mostrado na figura a seguir:

Continuando selecione .NET Core e ASP .NET Core 5.0 e o template ASP .NET Core Web App(Model-View-Controller) :

Estamos definindo o HTTPs e habilitando a compilação em tempo de execução do Razor, assim poderemos atualizar a página sem ter que parar a aplicação.

Ao final teremos o projeto MVC com a estrutura padrão gerada e pronta para ser utilizada.

Por padrão é criado o controlador HomeController na pasta Controllers e vamos usar esse recurso.

Como obter dados de um formulário HTML

Embora seja bem simples, essa situação é bem comum, e , envolve basicamente criar um página e permitir que os usuários preencham um formulário na página e a seguir obter os dados e atualizar um banco de dados.

Essa simples tarefa pode levar a criação de muito código dependendo da abordagem que formos usar, e,  podemos usar desde a abordagem da Clean Architecture com DDD, o que com certeza iria nos fazer escrever mais código, ou podemos usar uma abordagem mais direta definindo apenas um controlador e uma view.

Como o objetivo é mostrar apenas como obter dados vamos seguir o caminho mais simples, deixando claro que isso não é uma regra que sempre deve ser seguida.

Assim temos um formulário, temos uma aplicação ASP .NET Core MVC e queremos apenas pegar os dados do formulário e enviá-los ao nosso controlador.

Podemos fazer isso usando duas abordagens mais comuns:

  1. Pegar os dados manualmente
  2. Usar Tag Helpers

1- Pegando dados do formulário manualmente

Digamos que você precise registrar os dados básicos de usuário (como nome, idade, etc.).

Para conseguir isso, você vai precisar de um formulário, que pode ser conectado para enviar quaisquer informações que o usuário digitar de volta ao seu aplicativo ASP .NET Core.

Nossa aplicação ASP .NET Core MVC pode fazer o que for necessário com essas informações (armazená-las em um banco de dados, enviá-las por e-mail para alguém etc.).

Vamos simplificar criando um formulário para inscrever o usuário em uma newsletter.

Assim nossa aplicação ASP .NET Core MVC terá que apresentar um formulário onde o usuário deve informar apenas o seu email  e enviar o email postando os dados do formulário.

A seguir nossa aplicação deverá receber esse email em um método Action do controlador e aplicar a lógica para gravar o email no banco de dados.

Em termos de protocolo HTTP temos que apresentar o formulário e isso envolve um GET e a seguir receber os dados e isso envolve um POST.

Temos o controlador HomeController com o método Action Index e sua respectiva view Index.cshtml e vamos alterar o código desta view para torná-la o nosso formulário para solicitar o email ao usuário usando um HttpGet.

Assim vamos alterar o código da Action Index apenas explicitando que estamos fazendo um GET usando o atributo HttpGet:

        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

A seguir vamos alterar o código da view Index.cshtml :

@{
    ViewData["Title"] = "Home Page";
}
<img src="~/images/maco_big.jpg" />

<h1>Inscreva-se em nossa newsletter</h1>
<hr />

<form method="Post">
    <label for="email">Email</label>
    <input type="text" name="email" placeholder="Informe o seu email" />
    <input type="submit" value="Enviar"/>
</form>

Neste código cabe destacar que usamos a tag form especificando que o método usado para enviar os dados é um POST.

A seguir definimos o input type que define a caixa de entrada de texto para o usuário digitar o email. É importante que você defina a propriedade name com o mesmo nome que será recebido no controlador. Aqui o nome é email.

Para receber os dados enviados vamos incluir no controlador outro método Index definido com o atributo HttpPost e com um parâmetro cujo nome deve ser o mesmo usado na propriedade name do formulário:

        [HttpPost]
        public IActionResult Index(string email)
        {
            //seu serviço para gravar o email
            return Content($"Email recebido : {email}");
        }

Aqui estamos apenas exibindo o valor do parâmetro email recebido.

Executando o projeto teremos o resultado abaixo:

1- Pegando dados do formulário usando Tag Helpers

Agora sabemos como configurar manualmente nossos formulários para postar os dados corretos, marcados corretamente para que nossos controladores MVC saibam como lidar com eles.

Mas essa abordagem é muito ingênua e esta sujeita a erros principalmente se algo no formulário for alterado.

Com o ASP.NET Core podemos usar Tag Helpers para evitar a adição manual de atributos de nome a todos os seus campos de entrada.

Primeiro, vamos criar uma classe para atuar como modelo para nossa página.

Vamos criar a classe FormModel na pasta Models do projeto onde vamos definir a propriedade Email que representa a informação que eu quero tratar:

public class FormModel
{
        public string Email { get; set; }
}

E onde vamos usar essa classe ?

Vamos usar essa classe em nossa view Index.cshtml incluindo uma declaração @model no topo do arquivo.

@model FormModel

Podemos definir apenas essa linha de código visto que no arquivo _ViewImports.cshtml do projeto já temos as referências para o projeto e para a pasta Models:

@using Aspn5_FormData
@using Aspn5_FormData.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Agora podemos usar as tag Helper form, input e label no formulário :

@model FormModel
@{
    ViewData["Title"] = "Home Page";
}
<img src="~/images/maco_big.jpg" />
<h1>Inscreva-se em nossa newsletter</h1>

<hr />

<form asp-action="Index" asp-controller="Home">
    <label asp-for="Email"></label>
    <input asp-for="Email" placeholder="informe o seu email" />
    <input type="submit" value="Enviar" />
</form>
 

Fizemos as seguintes alterações :

- Definimos explicitamente o método Action e o Controlador que este formulário postará de volta, usando asp-action e asp-controller.

Isso não é estritamente necessário, mas não custa ser explícito, apenas no caso de começarmos a mexer nas coisas, o formulário continuará a postar para a ação correta do controlador.

A seguir, como esta página agora conhece seu modelo, podemos usar o auxiliar de tag asp-for em nossos elementos de entrada e rótulo, especificando o nome da propriedade relevante de nosso modelo.

Não teremos que alterar o método Action Index POST no controlador.

Executando o projeto teremos o mesmo resultado:



Se você visualizar no navegador o código fonte verá que o formulário será renderizado com o código abaixo:

Note que a ASP.NET percebeu que o formulário renderizado deve fazer um POST para /Home e incluiu automaticamente o atributo name para o campo de entrada.

Note também que temos um input com name igual a __RequestVerificationToken que esta oculto (hidden).

Afinal o que é isso ???

Esse é um recurso que a ASP .NET Core usa para reduzir o risco de seu aplicativo ser enganado por um ataque de falsificação de solicitação entre sites.

Vimos aqui um conceito básico que todo o desenvolvedor ASP .NET Core tem que saber de 'cor e salteado...'

Pegue o projeto aqui: Aspn5_FormData.zip (sem as referências)

"Bendirei o Senhor, que me aconselha; na escura noite o meu coração me ensina!"
Salmos 16:7

Referências:

José Carlos Macoratti