Resumen: Con este artículo, puedes aprender a crear un formulario web en ASP.NET Core, diseñar su interfaz gráfica con HTML y CSS, validar los datos ingresados por el usuario tanto en el lado del cliente como en el lado del servidor, y enviar los datos a través de una solicitud HTTP. También puedes aprender a utilizar algunas de las características y herramientas que ofrece ASP.NET Core para el desarrollo web.
Introducción
Integrar formularios en una aplicación web es esencial para permitir a los usuarios interactuar con ella de manera dinámica. En ASP.NET Core, la creación de formularios es sencilla gracias a la incorporación de herramientas que facilitan su diseño y gestión. En este artículo te mostraré cómo crear y personalizar un formulario en ASP.NET Core, para que puedas añadir esta funcionalidad a tus propias aplicaciones web.
Creación del proyecto en ASP.NET Core
Para crear un proyecto en ASP.NET Core, lo primero que debemos hacer es abrir Visual Studio y seguir los siguientes pasos:
- Hacer clic en "Crear un proyecto nuevo" en la página de inicio de Visual Studio.
- En el cuadro de búsqueda, escribir "ASP.NET Core Web Application".
- Seleccionar "ASP.NET Core Web Application" y hacer clic en "Siguiente".
- En la ventana "Nuevo proyecto de ASP.NET Core", seleccionar "Aplicación web" y hacer clic en "Siguiente".
- Dar un nombre al proyecto y seleccionar la ubicación donde se almacenará el proyecto.
- Seleccionar la plantilla de proyecto "Vacía" o "MVC" y hacer clic en "Crear".
Una vez que se haya creado el proyecto, se mostrará la solución del proyecto en Visual Studio, que incluye varios archivos y carpetas importantes para el proyecto. Si quieres ver los pasos a detalle, puedes leer este artículo: Creación y configuración de un proyecto en ASP.NET Core
Creación del formulario
A continuación, vamos a diseñar la interfaz gráfica del formulario en HTML y CSS. Primero, crearemos un archivo HTML básico con los elementos necesarios para nuestro formulario, como entradas de texto, casillas de verificación y botones. Luego, aplicaremos estilos CSS para hacer que el formulario se vea atractivo y fácil de usar.
Ejemplo básico de un formulario HTML
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br>
<label for="correo">Correo electrónico:</label>
<input type="email" id="correo" name="correo"><br>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea><br>
<input type="checkbox" id="suscripcion" name="suscripcion" value="1">
<label for="suscripcion">Suscribirme al boletín</label><br>
<input type="submit" value="Enviar">
</form>
Este formulario básico incluye entradas de texto para el nombre y el correo electrónico, un área de texto para el mensaje, una casilla de verificación para la suscripción al boletín y un botón de enviar.
Ejemplo de código CSS
Para aplicar estilos CSS al formulario, podemos usar reglas CSS para los elementos HTML que queremos estilizar. Por ejemplo, podemos agregar un borde alrededor de las entradas de texto y cambiar el color del botón de enviar. Aquí hay un ejemplo básico de cómo podría verse el CSS para nuestro formulario:
form {
border: 1px solid #ccc;
padding: 10px;
width: 400px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #ccc;
padding: 5px;
width: 100%;
margin-bottom: 10px;
font-size: 16px;
}
input[type="checkbox"] {
margin-right: 5px;
}
input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 0;
cursor: pointer;
border-radius: 5px;
}
Validación de datos del formulario del lado del servidor
La validación de datos del formulario es esencial para garantizar que los datos ingresados por el usuario sean válidos y coherentes con los requisitos de la aplicación. En ASP.NET Core, se pueden utilizar diversas técnicas para validar los datos de un formulario, como el uso de atributos de validación, la validación del modelo y la validación personalizada.
La validación de atributos es la forma más sencilla de realizar la validación de datos en ASP.NET Core. Los atributos de validación se aplican directamente a las propiedades de la clase del modelo que representa el formulario. Por ejemplo, podemos utilizar el atributo [Required] para indicar que un campo es obligatorio, y el atributo [EmailAddress] para validar que el campo contiene una dirección de correo electrónico válida.
A continuación, se muestra un ejemplo de un modelo de datos de contacto con algunos atributos de validación aplicados:
public class ContactModel
{
[Required(ErrorMessage = "El nombre es requerido")]
public string Name { get; set; }
[Required(ErrorMessage = "El correo electrónico es requerido")]
[EmailAddress(ErrorMessage = "El correo electrónico no es válido")]
public string Email { get; set; }
[Required(ErrorMessage = "El mensaje es requerido")]
public string Message { get; set; }
}
En este ejemplo, las propiedades Name, Email y Message son marcadas con el atributo [Required] para indicar que son obligatorias. Además, la propiedad Email también tiene el atributo [EmailAddress] para validar que la dirección de correo electrónico es válida.
En el controlador, se puede validar el modelo utilizando el método ModelState.IsValid. Si algún campo del modelo no pasa la validación, el método ModelState.IsValid será false, y se pueden mostrar los errores de validación correspondientes en la vista.
A continuación, se muestra un ejemplo de un controlador que valida el modelo de datos del formulario de contacto:
[HttpPost]
public IActionResult Contacto(ContactModel model)
{
if (!ModelState.IsValid)
{
return View(model);
}
// Procesar el formulario de contacto
return RedirectToAction("Index", "Home");
}
En este ejemplo, se verifica si el modelo de datos ContactModel es válido utilizando el método ModelState.IsValid. Si el modelo no es válido, se devuelve la vista del formulario de contacto con los errores de validación correspondientes. Si el modelo es válido, se procesa el formulario de contacto y se redirecciona al usuario a la página de inicio.
Además de la validación de atributos, también es posible realizar la validación del modelo utilizando la interfaz IValidatableObject. Esta interfaz permite definir reglas de validación personalizadas para un modelo específico. Sin embargo, la validación del modelo utilizando la interfaz IValidatableObject es más compleja y requiere más código que la validación de atributos.
La validación del lado del cliente
La validación del lado del cliente se realiza utilizando JavaScript. Para agregarla en nuestro formulario, podemos usar la biblioteca de validación de jQuery o la biblioteca de validación de Bootstrap. En este ejemplo, vamos a utilizar la biblioteca de validación de Bootstrap.
Para comenzar, necesitamos incluir los archivos JavaScript de Bootstrap y de su biblioteca de validación en nuestra vista. Podemos hacer esto agregando los siguientes scripts en la sección head de nuestra vista:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js" integrity="sha512-fd0U6zPg+AxWfnVvLtyBfyH7BZppxMX5W8c5ZN5XmkJ7V5UXocG+sh8kLj/sI+cQT7eJ+z2x3Wq3YDj9E+wh/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-ty98oGVhqg5OxW5B7C5I5djkVypOuSWiWwTs8UKvJa2G6OK7MZONxScp6/KhH6nf" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.3/jquery.validate.min.js" integrity="sha512-e4L4JSn2zqxnoGQ+oVR29JjK1fZl1Lgy6gNOfYUjfh6NkaF6yU3r6lzQV7lSaCHgY54vdy8zZIRsO1xPLJcXLw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js" integrity="sha512-p3h4o5ue5wm5vj5BKy1Ry+CpS1PJltnxxlB0thDTPXzW8ZxkwQ2nx98t/dvKKt0vkLmG4/Oe0N35hMTKgyQX4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Una vez que hemos incluido estas bibliotecas, podemos agregar las etiquetas de validación de Bootstrap en nuestro formulario. Estas etiquetas se agregarán a los elementos input, select y textarea. Por ejemplo, para agregar una etiqueta de validación a un campo de entrada, podemos agregar la siguiente línea después del elemento input correspondiente:
<span asp-validation-for="Nombre" class="text-danger"></span>
Esta etiqueta de validación mostrará un mensaje de error si el campo de entrada no es válido. También podemos agregar la etiqueta data-val="true" a los elementos input, select y textarea para habilitar la validación del lado del cliente.
Finalmente, podemos habilitar la validación del lado del cliente en nuestro formulario agregando la siguiente línea antes del cierre de la etiqueta form:
<script>
$(document).ready(function() {
$('form').validate();
});
</script>
Con estas líneas de ódigo, se habilita la validación del lado del cliente en el formulario. Además, es importante destacar que es posible personalizar los mensajes de validación utilizando los atributos de datos HTML5, como por ejemplo:
<input asp-for="Nombre" class="form-control" data-val="true" data-val-required="El campo Nombre es requerido." data-val-length="El campo Nombre debe tener al menos 3 caracteres." data-val-length-min="3" />
En este ejemplo, se utiliza el atributo data-val-required para personalizar el mensaje de validación en caso de que el campo sea requerido, y el atributo data-val-length para personalizar el mensaje de validación en caso de que el campo no cumpla con la longitud mínima requerida.
Es importante mencionar que la validación del lado del cliente no es suficiente para garantizar la integridad de los datos, ya que un usuario malintencionado podría deshabilitar la validación o modificar los datos enviados antes de que lleguen al servidor. Por lo tanto, siempre es importante validar los datos también en el lado del servidor.
Envío de datos del formulario
El envío de datos del formulario es el proceso mediante el cual los datos ingresados por el usuario en un formulario web son enviados al servidor para su procesamiento y almacenamiento. En ASP.NET Core, el envío de datos del formulario se maneja mediante el uso de controladores de acción que reciben los datos del formulario y realizan las acciones correspondientes, como guardar los datos en una base de datos o enviar un correo electrónico.
Para implementar el envío de datos del formulario en ASP.NET Core, es necesario agregar un controlador de acción que maneje la solicitud HTTP POST enviada desde el formulario. Luego, se pueden utilizar las herramientas de modelado de ASP.NET Core para vincular los datos del formulario a un objeto del modelo y realizar la validación necesaria antes de guardar los datos en la base de datos.
En la vista del formulario, se debe especificar el método HTTP a utilizar para el envío de datos, que por lo general es POST. Por ejemplo:
<form method="post" action="/Contacto">
...
</form>
En el controlador correspondiente, se debe agregar un método que reciba los datos enviados desde el formulario. Para ello, se utiliza la anotación [HttpPost]:
[HttpPost]
public IActionResult Contacto(ContactModel modelo)
{
// Procesar los datos del formulario
...
}
El parámetro modelo del método Contacto es una instancia de la clase ContactModel, que se utiliza para almacenar los datos enviados desde el formulario.
Para que ASP.NET Core pueda enlazar los datos del formulario a la clase ContactoViewModel, es necesario agregar la siguiente línea al método ConfigureServices del archivo Program.cs:
builder.Services.AddMvc().AddMvcOptions(options => options.ModelBindingMessageProvider.SetValueMustNotBeNullAccessor(
_ => "El campo es obligatorio."));
Integración del formulario en ASP.NET Core
Una vez que tengamos nuestro formulario diseñado en HTML y CSS, podemos integrarlo en una vista de ASP.NET Core. Primero, creamos una nueva vista en nuestro proyecto y agregamos el código HTML de nuestro formulario en la vista.
@{
ViewData["Title"] = "Contacto";
}
<h2>Contacto</h2>
<form>
<label for="nombre">Nombre:</label>
<input asp-for="Nombre" class="form-control" data-val="true" data-val-required="El campo Nombre es requerido." data-val-length="El campo Nombre debe tener al menos 3 caracteres." data-val-length-min="3" />
<label for="correo">Correo electrónico:</label>
<input type="email" id="correo" name="correo"><br>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea><br>
<input type="checkbox" id="suscripcion" name="suscripcion" value="1">
<label for="suscripcion">Suscribirme al boletín</label><br>
<input type="submit" value="Enviar">
</form>
<style>
form {
border: 1px solid #ccc;
padding: 10px;
width: 400px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #ccc;
padding: 5px;
width: 100%;
margin-bottom: 10px;
font-size: 16px;
}
input[type="checkbox"] {
margin-right: 5px;
}
input[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 0;
cursor: pointer;
border-radius: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js" integrity="sha512-fd0U6zPg+AxWfnVvLtyBfyH7BZppxMX5W8c5ZN5XmkJ7V5UXocG+sh8kLj/sI+cQT7eJ+z2x3Wq3YDj9E+wh/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-ty98oGVhqg5OxW5B7C5I5djkVypOuSWiWwTs8UKvJa2G6OK7MZONxScp6/KhH6nf" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.3/jquery.validate.min.js" integrity="sha512-e4L4JSn2zqxnoGQ+oVR29JjK1fZl1Lgy6gNOfYUjfh6NkaF6yU3r6lzQV7lSaCHgY54vdy8zZIRsO1xPLJcXLw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js" integrity="sha512-p3h4o5ue5wm5vj5BKy1Ry+CpS1PJltnxxlB0thDTPXzW8ZxkwQ2nx98t/dvKKt0vkLmG4/Oe0N35hMTKgyQX4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
$('form').validate();
});
</script>
Conclusión
En conclusión, hemos visto cómo implementar un formulario en ASP.NET Core de manera sencilla y eficiente. Desde la creación del proyecto hasta la validación de datos del formulario y su envío. Además, hemos explorado cómo se puede personalizar la interfaz gráfica del formulario con HTML y CSS, y cómo se puede agregar funcionalidad adicional con JavaScript. Con estos conocimientos, los desarrolladores pueden crear formularios personalizados para sus proyectos y adaptarlos a sus necesidades específicas. En próximos pasos, se pueden explorar más funcionalidades avanzadas de ASP.NET Core para implementar formularios aún más sofisticados.
