Realizar peticiones con método POST (formularios) .NET

Estas peticiones se realizan a través de formularios. Los métodos que reciben los datos enviados a través de formularios deben estar decorados con la etiqueta [HttpPost] y el name de los controles HTML debe llamarse igual que el nombre con el que recibe el método post los parámetros. Es importante recordar que si un método tiene POST, debe existir previamente el método GET.

MODEL BINDING:

Cuando hacemos uso de formularios, además del envío de múltiples de datos, también tenemos la posibilidad de poder enviar información relevante para la construcción de un objeto. La ventaja es que en vez de enviar múltiples propiedades (que también es posible) podemos enviar directamente un objeto. Es así que el concepto de «model binding» hace referencia al mapeo que se genera a través de esas propiedades del formulario. Es sumamente importante que el name de los controles HTML sean coincidente con el nombre de las propiedades del modelo. Al final del post realizaré un ejemplo en el cual podremos observar lo explicado previamente.

VALORES NULOS:

Que haya presente un formulario no significa que estemos recibiendo un parámetro. Es por esto que es importante declarar en la cabecera de los métodos decorados con la etiqueta [HttpPost], que puede recibir o no dicho parámetro. Los datos de tipo primitivo no permiten nulos y es por esto que deben escribirse con la siguiente sintaxis:

public IAction NombreVista(int? numero){ return View();}

Además también es importante controlar y verificar que estemos recibiendo algo:

public IAction NombreVista(int? numero)

{

if(numero != null)

{ //intrucciones}

else{//instrucciones}

return View();

}

EJEMPLO PRÁCTICO

Para poder entender mejor lo explicado previamente realizaré un ejemplo en el cual podremos visualizar un formulario en el cual seremos capaces de escribir datos de un perro y luego cuando hagamos click en ver datos podremos visualizar los datos enviados por formulario de 3 formas distintas: enviando parámetros y formando un modelo de forma manual, enviando parámetros y utilizando el model binding para la creación del objeto y finalmente utilizando ViewData (sin uso de modelo).

Creación de la vista HTML: en mi caso he decidido trabajar con el Home Controller y es por eso que también trabajaré dentro de la carpeta Views en la carpeta Home con la vista Index.cshtml: en esta clase tendremos un formulario, cada control HTML con el name correspondiente para poder realizar posteriormente el model binding. También indicamos que esta vista recibirá un modelo de tipo Perro y finalmente en la parte inferior escribimos el código para visualizar los datos enviados por formulario de las dos formas: con ViewData y con el uso del Modelo. Es MUY importante que antes de intentar mostrar los datos del modelo recibido en la vista, preguntemos si es distinto de nulo ya que de lo contrario probablemente provoquemos una excepción.

Creación de la clase (modelo) Perro:

Creación del método GET y POST: como mencioné al comienzo del post, si hay un formulario, debe haber un método POST que reciba los parámetros y debe estar decorado con la etiqueta [HttpPost]. Es importante no olvidar que debe estar presente el método GET que devuelva la vista la primera vez que se ejecute. He hecho 3 formas distintas de cómo capturar los datos y cómo devolverlos a la vista. El primer ejemplo es con uso de ViewData, recibo los parámetros y creo un ViewData para cada valor recibido. El segundo ejemplo recibe los valores pero crea de forma manual el objeto perro y lo devuelve a la vista. Finalmente el tercer ejemplo recibe directamente un objeto perro, genera el model binding y devuelve dicho modelo a la clase. Recordemos que es fundamental que los nombres de los valores se corresponda con el nombre de los controles HTML y en el caso de uso de model binding, que se correspondan a los nombres de las propiedades de la clase.

Una vez que tenemos listo el código, comentamos en el Home Controller el método Post de ejemplo 2 y 3 y probamos utilizando el metodo que emplea ViewData:

Resultado 1 (enviando los datos a la vista con ViewData):

A continuación comentamos el código que utiliza ViewData y descomentamos el del ejemplo 2:

Resultado 2 capturamos los distintos datos en el Home Controller pero creamos manualmente el objeto perro y lo enviamos a la vista el modelo:

Finalmente comentamos el código del ejemplo 2 y descomentamos el del ejemplo 3. Esta vez ya no recibiremos muchos valores, si no que recibiremos directamente el objeto perro generado con el model binding a través de los name de los controles HTML y lo enviamos a la vista:

Resultado 3 recibimos en la vista index el modelo perro y mostramos sus datos:

Para finalizar este post quiero volver a recordaros la importancia de que los name de los controles HTML se correspondan con los valores que recibimos en el método POST. Si lo que estamos enviando es un modelo, deben coincidir con las propiedades declaradas en la clase del objeto. Por otro lado, recuerden ir comentando las partes de código en el Home Controller para evitar errores y de preguntar siempre en la vista que si lo que estamos recibiendo es distinto de null. Espero que este post os haya sido útil.

Autor/a: María Victoria Castro Dotta
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021
Código / recursos utilizados / Otros datos de interés: código realizar peticiones POST (formularios) NET CORE