Crear su primera aplicación web con ASP.NET Core con Blazor
Introducción
Propósito
Cree su primera aplicación web con ASP.NET Core con Blazor.
Requisitos previos
Ninguna.
macOS 12.0 o versiones posteriores.
Tiempo para completar
10-15 minutos + tiempo de descarga/instalación
Escenario
Cree, use y modifique un componente de contador simple.
Descargar e instalar
Si lo prefiere, también puede empezar a usar Blazor con la versión de interfaz de la línea de comandos del tutorial.
Durante la instalación, debe seleccionarse la carga de trabajo ASP.NET y desarrollo web (el vínculo de instalación anterior ya preselecciona esa opción).
¿Ya tiene Visual Studio 2022?
Si ya tiene Visual Studio 2022, asegúrese de que esté actualizado y de que tiene instalada la carga de trabajo necesaria:
- Seleccione la tecla Windows, escriba Instalador de Visual Studio y presione Entrar.
- Si se le solicita, permita que el instalador se actualice a sí mismo.
- Si hay una actualización disponible para Visual Studio 2022, se mostrará el botón Actualizar. Selecciónelo para actualizar antes de modificar la instalación. Este tutorial solo sirve para Visual Studio 2022 17.8 y versiones posteriores.
- Busque su instalación de Visual Studio 2022 y seleccione el botón Modificar.
- Si aún no está seleccionada, seleccione la carga de trabajo de ASP.NET y desarrollo web y seleccione el botón Modificar. En caso contrario, cierre la ventana de diálogo.
Para empezar a compilar aplicaciones .NET, descargue e instale el SDK de .NET.
Descargar el SDK x64 de .NET 8 (Intel)
Descargar el SDK Arm64 de .NET 8 (Apple Silicon)
Si está en un equipo Mac con un chip M1 o M2 de Apple, debe instalar la versión Arm64 del SDK.
Comprobar que todo está instalado correctamente
Una vez instalado, abra un terminal nuevo y ejecute el siguiente comando:
dotnet --version
Si la instalación se realizó correctamente, debería ver la versión 8.0.100 o posterior:
8.0.100
Si todo parece correcto, seleccione el botón Continuar de abajo para ir al siguiente paso.
¿Tiene un error?
Si recibe un error comando zsh: no encontrado: dotnet, asegúrese de que ha abierto una nueva ventana del terminal. Si no puede resolver el problema, use el botón He tenido un problema para obtener ayuda para solucionar el problema.
Si recibe un error dotnet: comando no encontrado, asegúrese de haber abierto una nueva ventana de terminal. Si no puede resolver el problema, use el botón He tenido un problema para obtener ayuda para solucionarlo.
Crear la aplicación
-
Inicie Visual Studio y seleccione Crear un nuevo proyecto.
- En la ventana Crear un nuevo proyecto, escriba Blazor en el cuadro de búsqueda y pulse la tecla Entrar.
-
Seleccione la plantilla Blazor Web App y seleccione Siguiente.
- En la ventana Configurar su nuevo proyecto, introduzca BlazorApp como nombre del proyecto y seleccione Siguiente.
-
En la ventana Información adicional, seleccione .NET 8.0 (Soporte de duración largo) en la lista desplegable Marco si aún no está seleccionado y haga clic en el botón Crear.
Al crear una aplicación web de Blazor, puede seleccionar entre varias opciones, como habilitar la autenticación, qué modos de representación interactivos habilitar y en qué medida quiere que la aplicación sea interactiva. Para esta aplicación, asegúrese de que los valores predeterminados están seleccionados de la siguiente manera:
- Tipo de autenticación: Ninguno
- Modo de representación interactiva: servidor
- Ubicación de interactividad: por página o componente
El proyecto se creó y cargó en Visual Studio. Eche un vistazo al contenido del proyecto mediante Explorador de soluciones.
Se han creado varios archivos para ofrecerle una aplicación de Blazor sencilla y lista para funcionar.
Program.cs
es el punto de entrada de la app que inicia el servidor y donde se configuran los servicios de la app y el middleware.-
Dentro del directorio
Components
:App.razor
es el componente raíz de la aplicación.Routes.razor
configura el enrutador de Blazor.- El directorio
Pages
contiene algunas páginas web de ejemplo para la aplicación.
BlazorApp.csproj
define el proyecto de la aplicación y sus dependencias y puede verse haciendo doble clic en el nodo del proyecto BlazorApp en el Explorador de soluciones.- El archivo
launchSettings.json
dentro del directorio deProperties
define diferentes configuraciones de perfil para el entorno de desarrollo local. Se asigna automáticamente un número de puerto al crear el proyecto y se guarda en este archivo.
Si todo parece correcto, seleccione el botón Continuar de abajo para ir al siguiente paso.
En el terminal, ejecute el siguiente comando para crear la aplicación:
dotnet new blazor -o BlazorApp
Este comando crea su nuevo proyecto de aplicación web de Blazor y lo coloca en un nuevo directorio llamado BlazorApp
dentro de su ubicación actual.
Vaya al nuevo directorio de BlazorApp
creado por el comando anterior:
cd BlazorApp
Eche un vistazo rápido al contenido del directorio BlazorApp
.
ls
Se crearon varios archivos en el directorio BlazorApp
para brindarle una aplicación Blazor simple que está lista para ejecutarse.
Program.cs
es el punto de entrada de la app que inicia el servidor y donde se configuran los servicios de la app y el middleware.-
Dentro del directorio
Components
:App.razor
es el componente raíz de la aplicación.Routes.razor
configura el enrutador de Blazor.- El directorio
Pages
contiene algunas páginas web de ejemplo para la aplicación.
BlazorApp.csproj
define el proyecto de aplicación y sus dependencias.- El archivo
launchSettings.json
dentro del directorio deProperties
define diferentes configuraciones de perfil para el entorno de desarrollo local. Se asigna automáticamente un número de puerto al crear el proyecto y se guarda en este archivo.
Tome nota de la ruta de acceso del directorio de BlazorApp
, ya que la usará más adelante en el tutorial.
Si todo parece correcto, seleccione el botón Continuar de abajo para ir al siguiente paso.
Ejecutar la aplicación
Haz clic en el botón Iniciar depuración (flecha verde) de la barra de herramientas de depuración de Visual Studio para ejecutar su aplicación.
Una vez que la aplicación se está ejecutando, puede aplicar los cambios de código a la aplicación en ejecución haciendo clic en el botón Recarga activa.
Puede detener la aplicación en cualquier momento haciendo clic en el botón Detener de la barra de herramientas superior.
La primera vez que ejecute una aplicación web en Visual Studio, se configurará un certificado de desarrollo para alojar la aplicación en HTTPS y se le pedirá que confíe en el certificado. Le recomendamos que acepte confiar en el certificado. El certificado sólo se utilizará para el desarrollo local, y sin él la mayoría de los navegadores se quejarán de la seguridad del sitio web.
Espera a que la aplicación se inicie en el navegador. Una vez que llegue a la siguiente página, habrá ejecutado con éxito su primera aplicación de Blazor.
En el terminal, ejecute el siguiente comando:
dotnet watch
El comando dotnet watch
compilará e iniciará la aplicación, y luego la actualizará cada vez que realice cambios en el código. Puede detener la aplicación en cualquier momento seleccionando Ctrl+C.
Espere a que la aplicación muestre que está escuchando en http://localhost:<port number> y a que el navegador se inicie en esa dirección.
Espere a que la aplicación muestre que está escuchando en http://localhost:<port number> y después abra el navegador y vaya a esa dirección.
Una vez que llegue a la página siguiente, habrá ejecutado correctamente su primera aplicación Blazor.
La página que se muestra está definida por el archivo Home.razor
ubicado dentro del directorio Components/Pages
. Este es el aspecto de su contenido:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
Ya contiene el código que la establece como página principal y muestra el texto Hello, world!
y Welcome to your new app
. El componente PageTitle
establece el título de la página actual para que aparezca en la pestaña del explorador.
¿Tiene un error?
Si recibe un mensaje de error que dice "La conexión no es privada" con el código de error NET::ERR_CERT_INVALID, intente reiniciar todas las ventanas del navegador para que el navegador pueda recoger el nuevo certificado y ejecutar la aplicación nuevamente.
Si no puede resolver el problema, use el botón He tenido un problema para obtener ayuda para solucionar el problema.
Probar el contador
En la aplicación en ejecución, vaya a la página Contador haciendo clic en la pestaña Contador en la barra lateral de la izquierda. Debe mostrarse la siguiente página:
Seleccione el botón Hacer clic aquí para incrementar el recuento sin necesidad de actualizar la página. Por lo general, para incrementar un contador en una página web, es necesario escribir JavaScript, pero, con Blazor, puede usar C#.
Puede encontrar la implementación del componente de Counter
en el archivo Counter.razor
ubicado dentro del directorio Components/Pages
.
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Una solicitud de /counter
en el explorador, como se especifica en la directiva de @page
en la parte superior, hace que el componente Counter
presente su contenido. La directiva @rendermode
habilita la representación interactiva del servidor para el componente, de modo que pueda controlar eventos de interfaz de usuario desde el explorador.
Cada vez que se selecciona el botón Haga clic aquí:
- Se desencadena el evento
onclick
. - Se llama al método
IncrementCount
. currentCount
se incrementa.- El componente se representa para mostrar el recuento actualizado.
Agregar un componente
Cada uno de los archivos .razor define un componente de interfaz de usuario que se puede reutilizar.
Abra el archivo Home.razor
en Visual Studio. El archivo Home.razor
ya existe, y fue creado cuando usted creó el proyecto. Se encuentra en la carpeta Components/Pages
dentro del directorio BlazorApp
que se creó anteriormente
Abra el archivo Home.razor
en un editor de texto de su elección. El archivo Home.razor
ya existe y se creó al ejecutar el comando dotnet new
. Se encuentra en la carpeta Components/Pages
dentro del directorio BlazorApp
que se creó anteriormente
Agregue un componente Counter
a la página de inicio de la aplicación agregando un elemento <Counter />
al final del archivo Home.razor
.
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
Haga clic en el botón de Recarga activa para aplicar el cambio a la aplicación en ejecución. El componente Counter
aparecerá entonces en la página de inicio.
Una vez guardado este cambio, el comando dotnet watch
aplicará el cambio a la aplicación en ejecución para que el componente Counter
aparezca en la página de inicio.
Modificar un componente
Los parámetros de los componentes se especifican mediante atributos o contenido secundario, que permiten establecer propiedades en el componente secundario. Defina un parámetro en el componente Counter
para especificar cuánto se incrementa con cada clic de botón:
- Agregar una propiedad pública para
IncrementAmount
con un atributo[Parameter]
. - Cambiar el método
IncrementCount
para utilizar elIncrementAmount
cuando se incrementa el valor decurrentCount
.
En el código siguiente se muestra cómo lograrlo. Las líneas resaltadas muestran los cambios.
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}
En Home.razor
actualice el elemento <Counter>
para agregar un atributo IncrementAmount
que cambie la cantidad de incremento a diez como se muestra en la línea resaltada en el siguiente código:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />
Aplique el cambio a la aplicación haciendo clic en el botón de Recarga activa. El componente Home
tiene ahora su propio contador que se incrementa de diez en diez cada vez que se selecciona el botón Hacer clic aquí, como se muestra en la siguiente imagen. El componente Counter
(Counter.razor
) en /counter
sigue incrementando de uno en uno.
El componente Home
tiene ahora su propio contador que se incrementa de diez en diez cada vez que se selecciona el botón Hacer clic aquí, como se muestra en la siguiente imagen. El componente Counter
(Counter.razor
) en /counter
sigue incrementando de uno en uno.
Pasos siguientes
Enhorabuena, ha creado y ejecutado su primera aplicación Blazor.
Seguir aprendiendo
Ahora que ya tiene los fundamentos, continúe compilando su primera aplicación de Blazor con el módulo de aprendizaje autoguiado de Blazor en Microsoft Learn, donde compilará una aplicación de lista de tareas.
Microsoft Learn: compilar una aplicación de lista de tareas de Blazor
Blazor para principiantes
Obtenga información sobre cómo crear una aplicación Blazor completa de principio a fin:
Es posible que también le interese...