Uso de HTML, CSS y JavaScript en ASP.NET Core

Resumen: en este artículo sobre el uso de HTML, CSS y JavaScript en ASP.NET Core, puedes aprender a crear y configurar un proyecto de ASP.NET Core, cómo trabajar con HTML y CSS para crear una interfaz de usuario atractiva y cómo utilizar JavaScript para agregar interactividad a tu sitio web. También podrás aprender cómo integrar librerías y frameworks de JavaScript en tu proyecto de ASP.NET Core y cómo implementar un proceso de desarrollo continuo para mejorar la eficiencia de tu proyecto.

Introducción

ASP.NET Core es un framework de desarrollo web moderno y potente que nos permite crear aplicaciones web escalables y de alto rendimiento. Una de las principales ventajas de ASP.NET Core es su flexibilidad para integrar diferentes tecnologías del lado del cliente, como HTML, CSS y JavaScript.

En este artículo, exploraremos cómo podemos utilizar HTML, CSS y JavaScript en nuestras aplicaciones ASP.NET Core para crear interfaces de usuario atractivas y dinámicas. Veremos cómo podemos integrar estos lenguajes en nuestras vistas, cómo podemos gestionar y cargar archivos CSS y JavaScript, y cómo podemos utilizar bibliotecas y frameworks populares como Bootstrap y jQuery.

Si eres desarrollador web y quieres aprender cómo aprovechar al máximo las capacidades de ASP.NET Core para crear aplicaciones web modernas y atractivas, este artículo es para ti.

Creación de un proyecto ASP.NET Core

Para crear el proyecto en ASP.NET Core con el que trabajaremos, lo primero que debes hacer es abrir Visual Studio y seleccionar "Crear un nuevo proyecto". En la ventana de selección de plantillas, puedes escoger entre diferentes tipos de proyectos según tus necesidades. En este caso, vamos a elegir una plantilla de proyecto "Web de ASP.NET Core", si quieres más información de cómo crear tu proyecto, puedes revisar este artículo.

Al crear el proyecto ASP.NET Core con HTML, CSS y JavaScript, se genera una estructura de archivos básica que incluye los siguientes elementos principales:

• wwwroot: Esta carpeta es donde se alojan los archivos estáticos, como hojas de estilo, scripts y archivos de imagen.
• Controllers: Esta carpeta es donde se alojan los controladores de ASP.NET Core, que contienen la lógica de la aplicación.
• Views: Esta carpeta es donde se alojan las vistas, que son archivos HTML que se utilizan para mostrar información en la aplicación.
• Models: Esta carpeta es donde se alojan los modelos, que son clases que representan los datos de la aplicación.
• appsettings.json: Este archivo contiene la configuración de la aplicación, como la conexión a la base de datos y otras variables de entorno.
• Program.cs: Este archivo es el punto de entrada para la aplicación ASP.NET Core.

Esta estructura básica se puede ampliar y personalizar según las necesidades de la aplicación.

Uso de HTML en ASP.NET Core

Cuando trabajamos en ASP.NET Core, el uso de HTML es esencial para crear la estructura y contenido de nuestras páginas web. En mi experiencia, he encontrado que la mejor práctica es separar el código HTML de la lógica de negocio en nuestros controladores y vistas.

Dentro de una vista en ASP.NET Core, podemos utilizar HTML puro o utilizar un motor de vistas, como Razor, que nos permite mezclar código HTML con código C#. Esto nos permite crear páginas web dinámicas y reutilizar elementos comunes en toda nuestra aplicación.

Además, ASP.NET Core nos permite utilizar diferentes tipos de elementos HTML, como formularios, tablas, listas y mucho más. La capacidad de utilizar HTML nos da una gran flexibilidad en la presentación de datos y la interacción con los usuarios.

Es importante mencionar que, al utilizar HTML en ASP.NET Core, debemos asegurarnos de mantener una estructura limpia y semántica en nuestro código, utilizando elementos HTML apropiados para cada tipo de contenido. Esto no solo mejora la accesibilidad para los usuarios, sino que también mejora la optimización para los motores de búsqueda.

En cuanto a la estructura de archivos, nuestras vistas se almacenan en la carpeta Views dentro del proyecto. Para crear una vista, podemos hacer clic derecho en la carpeta Views y seleccionar "Agregar" > "Vista". Esto nos permitirá crear una nueva vista utilizando una plantilla predefinida o una vista en blanco.

Aquí te muestro un ejemplo de una vista sencilla que utiliza HTML en ASP.NET Core:

@model MiProyecto.Models.MiModelo
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mi Página</title>
</head>
<body>
    <h1>Bienvenido a mi página</h1>
    <p>Este es un ejemplo de cómo utilizar HTML en ASP.NET Core.</p>
    <p>Este es el valor del modelo: @Model.Valor</p>
</body>
</html>

En este ejemplo, la vista utiliza el modelo MiModelo (definido en el archivo MiModelo.cs) para obtener y mostrar el valor de la propiedad Valor utilizando la sintaxis @Model.Valor. La vista también contiene elementos HTML básicos como encabezados (<h1>), párrafos (<p>), y un título (<title>).

Uso de CSS en ASP.NET Core

Los archivos CSS nos permiten definir estilos para nuestros elementos HTML, lo que nos da la capacidad de personalizar la apariencia de nuestro sitio web.

En mi experiencia, lo primero que hago es crear un archivo CSS y agregarlo a la carpeta "wwwroot/css". Luego, puedo vincular mi archivo CSS a una vista en particular o a todas las vistas en el archivo _Layout.cshtml.

Por ejemplo, supongamos que he creado un archivo llamado "estilos.css" en la carpeta "wwwroot/css". Para vincular este archivo CSS a una vista, puedo agregar la siguiente línea de código en la sección head de la vista:

<link rel="stylesheet" href="~/css/estilos.css" />

Ahora, si quiero aplicar estilos a un elemento HTML en mi vista, puedo utilizar las clases y los selectores CSS en mi archivo "estilos.css". Por ejemplo, si quiero aplicar un fondo rojo a todos los encabezados h1 en mi sitio, puedo agregar lo siguiente a mi archivo CSS:

h1 {
  background-color: red;
}

Con esto, todos los encabezados h1 en mi sitio tendrán un fondo rojo.

Para agregar esta hoja de estilo en el código HTML que te mostré más arriba, solo se debe integrar dentro del head y quedaría de la siguiente manera:

<head>
    <meta charset="utf-8" />
    <title>Mi Página</title>
<link rel="stylesheet" href="~/css/estilos.css" />
</head>

Uso de JavaScript en ASP.NET Core

En esta sección, quiero enfocarme en cómo puedes incorporar JavaScript en tu proyecto de ASP.NET Core. Hay algunas formas diferentes en las que puedes hacerlo, pero la más común es a través de la inclusión de archivos .js en tus vistas HTML.

Para comenzar, necesitarás tener un archivo JavaScript que deseas incluir en tu proyecto. Puedes crear un archivo .js en la carpeta wwwroot/js de tu proyecto y agregar cualquier código que desees. Por ejemplo, aquí hay un archivo sample.js que simplemente agrega un mensaje a la consola del navegador:
 

// wwwroot/js/sample.js
console.log('Hola desde sample.js!');

Una vez que tienes tu archivo .js, puedes incluirlo en tus vistas HTML. Por ejemplo, supongamos que tienes una vista llamada "Index.cshtml" que se encuentra en la carpeta "Views/Home". Puedes incluir el archivo sample.js en la vista de la siguiente manera:

<!-- Views/Home/Index.cshtml -->
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mi página</title>
   <link rel="stylesheet" href="~/css/estilos.css" />
    <script src="~/js/sample.js"></script>
</head>
<body>
    <h1>Bienvenido a mi página</h1>
    <p>Esta es una vista de ejemplo</p>
</body>
</html>

En este ejemplo, estamos agregando el archivo sample.js a la vista "Index.cshtml" utilizando la etiqueta script y especificando la ruta relativa al archivo .js en la carpeta "wwwroot/js".

Una vez que hayas incluido el archivo .js en tu vista, podrás acceder a las funciones y variables definidas en el archivo desde tu código JavaScript. Por ejemplo, en este caso, el mensaje "Hola desde sample.js!" aparecerá en la consola del navegador cuando se cargue la vista "Index.cshtml".

Es importante tener en cuenta que, al igual que con los archivos CSS, también puedes usar herramientas de compilación como Gulp o Grunt para procesar y minificar tus archivos JavaScript antes de incluirlos en tu proyecto. Esto puede ser útil para mejorar el rendimiento de tu aplicación web.

Integración de librerías y frameworks de JavaScript en ASP.NET Core

La integración de librerías y frameworks de JavaScript en ASP.NET Core es una tarea muy común en el desarrollo web moderno. ASP.NET Core nos brinda la capacidad de integrar y usar estas herramientas de forma sencilla en nuestras aplicaciones web.

Para integrar una librería o framework de JavaScript en ASP.NET Core, primero debemos instalar la biblioteca en nuestra aplicación. Podemos hacer esto de varias formas, pero la más común es a través de la línea de comandos de NuGet. Por ejemplo, si deseamos instalar la librería jQuery en nuestro proyecto, podemos hacer lo siguiente en la Consola del Administrador de paquetes de Visual Studio:

Install-Package jQuery

Una vez instalada la biblioteca, podemos agregar una referencia a ella en nuestras vistas. Por ejemplo, si deseamos agregar una referencia a la biblioteca jQuery en una vista Razor, podemos hacer lo siguiente:

<!-- Agregando referencia a la biblioteca jQuery -->
<script src="~/lib/jquery/jquery.min.js"></script>
 
<!-- Ejemplo de uso de jQuery -->
<script>
   $(document).ready(function(){
      $("button").click(function(){
         $("p").hide();
      });
   });
</script>
 
<!-- Ejemplo de HTML -->
<button>Click para ocultar párrafos</button>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>

En este ejemplo, primero agregamos una referencia a la biblioteca jQuery en nuestra vista. Luego, usamos jQuery para ocultar los elementos p cuando se hace clic en el botón. También podemos ver que los archivos de la biblioteca se encuentran en la carpeta ~/lib/jquery del proyecto.

De esta manera podemos integrar y usar bibliotecas y frameworks de JavaScript en nuestras aplicaciones ASP.NET Core.

Conclusiones

En conclusión, ASP.NET Core es una plataforma robusta y flexible para desarrollar aplicaciones web modernas que combina la potencia de .NET con las mejores prácticas de desarrollo web. En este artículo hemos visto cómo integrar HTML, CSS y JavaScript en un proyecto ASP.NET Core.

Además, hemos explorado cómo integrar librerías y frameworks de JavaScript en un proyecto ASP.NET Core, lo que nos permite aprovechar la enorme cantidad de recursos disponibles en el ecosistema de JavaScript.