Crear su primera aplicación web con ASP.NET Core con Blazor
Introducción
Propósito
Compile su primera aplicación web con ASP.NET Core mediante Blazor en Visual Studio Code.
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.
¿Prefiere Visual Studio o la CLI?
En caso de preferirlo, también es posible comenzar a trabajar con Blazor mediante Visual Studio o la interfaz de la línea de comandos.
Descargar e instalar
Para compilar la primera aplicación .NET, deberá instalar el SDK de .NET, Visual Studio Code y el Kit de desarrollo de C#.
¿Qué son el SDK de .NET, Visual Studio Code y el Kit de desarrollo de C#?
El SDK (kit de desarrollo de software) de .NET es una colección gratuita y de código abierto de herramientas y bibliotecas que necesitará para compilar y ejecutar aplicaciones con C#. C# es el lenguaje de programación moderno orientado a objetos que usará para este tutorial.
Visual Studio Code (VS Code) es el editor de código ligero, gratuito y de código abierto más popular del mundo. Aquí es donde escribirá el código de C#.
El Kit de desarrollo de C# es un eficaz conjunto de extensiones de VS Code que facilita el desarrollo de C#. Le ayuda a escribir, probar y depurar el código a medida que compila aplicaciones.
El archivo de configuración de WinGet de .NET instalará el SDK de .NET 10, VS Code y el Kit de desarrollo de C#. Si ya tiene alguno instalado, WinGet omitirá ese paso de instalación.
Para compilar su primera aplicación de .NET con Visual Studio Code, configure su entorno:
-
Descargar e instalar el SDK de .NET:
Descarga del SDK x64 de .NET 10 (Intel)
Descarga del SDK Arm64 de .NET 10 (Apple Silicon)Si está en un equipo Mac con un chip M1 o M2 de Apple, debe instalar la versión Arm64 del SDK.
-
Descargar e instalar VS Code:
-
Abra VS Code y seleccione el botón Extensiones en la barra de actividades de VS Code, a la izquierda. Escriba C# en la barra de búsqueda, seleccione kit de desarrollo de C# y, a continuación, seleccione el botón Instalar en la página de extensión del Kit de desarrollo de C#.
![Kit de desarrollo de C# de VS Code]()
Descargar y ejecutar el archivo de configuración
Haga clic en el vínculo siguiente para descargar el archivo WinGet:
Abra la carpeta de descargas y haga doble clic en el archivo para iniciar la instalación. Si se le pide que seleccione una aplicación para ejecutar el archivo, seleccione Administrador de paquetes de Windows cliente.
Se abrirá un terminal y debería ver que el archivo de configuración de WinGet está listo para instalar el SDK de .NET 10, VS Code (si no los tiene) y el Kit de desarrollo de C#.
Para leer el contrato de licencia y aceptarlo, escriba "y" en el terminal y presione Entrar.
Nota: Usted es responsable de comprender los valores de configuración que está eligiendo ejecutar. Microsoft no es responsable del archivo de configuración que haya creado o importado. Esta configuración puede cambiar la configuración en Windows, instalar software, cambiar la configuración de software (incluida la configuración de seguridad) y aceptar contratos de usuario para paquetes y servicios de terceros en su nombre. Al ejecutar este archivo de configuración, reconoce que comprende y acepta estos recursos y configuraciones. Tiene licencias para todas las aplicaciones instaladas por parte de sus propietarios. Microsoft no es responsable ni concede licencias a servicios o paquetes de terceros.
WinGet está instalando todo lo que necesita para empezar. El tiempo de instalación dependerá de las especificaciones de la máquina, la velocidad de red y mucho más. Puede tardar hasta 5 minutos, pero hasta 15 minutos en completarse.
Algunos pasos de instalación pueden requerir permisos de nivel de administrador para la instalación. Esté al día para mostrar las solicitudes de Control de cuentas de usuario (UAC) en su de la barra de tareas de Windows y haga clic en ese icono. Para continuar con la instalación, debe seleccionar Sí si se le solicita.
Cuando se complete la instalación, verá la salida siguiente en el terminal.
Comprobar que todo está instalado correctamente
Ahora que el entorno está configurado, vaya a Buscar en la Barra de tareas de Windows y escriba Visual Studio Code. Haga clic en la aplicación para abrir VS Code.
Una vez que haya configurado el entorno, abra un nuevo terminal de VS Code. En la barra de herramientas, seleccione Terminal y, a continuación, Nuevo terminal.
Nota: Si abre VS Code a través de un terminal, tendrá que habilitar de confianza del área de trabajo.
Ahora abra un nuevo terminal. Para ello, vaya a la barra de herramientas y seleccione Terminal y, a continuación, Nuevo terminal.
En el terminal, ejecute el siguiente comando para comprobar la instalación.
dotnet
Si la instalación se realizó correctamente, debería ver una salida similar a la siguiente:
Usage: dotnet [path-to-application]
Usage: dotnet [commands]
path-to-application:
The path to an application .dll file to execute.
commands:
-h|--help Display help.
--info Display .NET information.
--list-runtimes [--arch ] Display the installed runtimes matching the host or specified architecture. Example architectures: arm64, x64, x86.
--list-sdks [--arch ] Display the installed SDKs matching the host or specified architecture. Example architectures: arm64, x64, x86. Si todo parece correcto, seleccione el botón Continuar de abajo para ir al siguiente paso.
¿Tiene un error?
Si recibe un error ”dotnet” no se reconoce como un comando interno o externo, asegúrese de que ha abierto un nuevo terminal de VS Code. Si reiniciar VS Code o reiniciar la máquina y no puede resolver el problema, utilice el botón Me encontré con un problema para obtener ayuda para solucionar el problema.
Crear la aplicación
- Abra la paleta de comandos en VS Code tras presionar CTRL+MAYÚS+P.
- Abra la paleta de comandos en VS Code tras presionar CMD+MAYÚS+P.
- Escriba .NET: para ver los comandos que puede ejecutar con el Kit de desarrollo de C#.
- Busque y seleccione .NET: nuevo proyecto para crear un nuevo proyecto de .NET.
- Desplácese hacia abajo y seleccione Aplicación web de Blazor.
- Elija la ubicación de la carpeta que desea guardar el proyecto.
- Asigne al proyecto el nombre
BlazorAppen la paleta de comandos cuando se le solicite. Presione Entrar para confirmar. - Seleccione el formato de archivo de solución
slnx.
Habilite la confianza del área de trabajo al activar la casilla y seleccionar Sí, confío en los autores.
Después de habilitarla, se le pedirá que recargue la extensión del Kit de desarrollo de C#. Haga clic en el botón Recargar extensiones
Si tiene un Visual Studio Subscription, inicie sesión en su cuenta. Si no ve un mensaje emergente, haga clic en el icono C# de la barra de estado de VS Code hacia la parte inferior derecha de la ventana.
En la barra lateral, asegúrese de que el Explorador de VS Code esté abierto. Aquí verá la carpeta BlazorApp y el Explorador de soluciones.Siga los pasos de este vídeo para contraer la carpeta BlazorApp, abrir el proyecto Explorador de soluciones, abrir el proyecto BlazorApp y arrastrar y colocar el Explorador de soluciones más arriba.
- Contraiga la carpeta
BlazorAppen el Explorador de VS Code. - Haga clic en el botón de contenido adicional a la izquierda del Explorador de soluciones para expandirlo.
- Haga clic en el botón de contenido adicional a la izquierda del proyecto
BlazorAppen el Explorador de soluciones para expandirlo. - Arrastre y coloque el Explorador de soluciones debajo de BlazorApp.
El proyecto se crea y carga en Visual Studio Code. Eche un vistazo al contenido de su proyecto mediante el Explorador de soluciones.
Se han creado varios archivos para ofrecerle una aplicación de Blazor sencilla y lista para funcionar.
Program.cses 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.razores el componente raíz de la aplicación.Routes.razorconfigura el enrutador de Blazor.- El directorio
Pagescontiene algunas páginas web de ejemplo para la aplicación.
BlazorApp.csprojdefine 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.jsondentro del directorio dePropertiesdefine 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.
Ejecutar la aplicación
Seleccione el icono Ejecutar y depurar de la barra de actividad del lado izquierdo del área de trabajo.
Para poder ejecutar y depurar, asegúrese de no tener ningún archivo abierto en el editor. Seleccione el botón azul Ejecutar y depurar.
Debe seleccionar un depurador. Seleccione C#.
Luego, Visual Studio Code abrirá un menú de configuraciones de inicio. Seleccione C#: BlazorApp [Configuración predeterminada].
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.
Detenga la aplicación en cualquier momento haciendo clic en el botón Detener de la barra de herramientas superior.
Para volver a ejecutar la aplicación, seleccione el menú desplegable situado a la derecha del botón de ejecución en la parte superior derecha y seleccione Ejecutar el proyecto asociado a este archivo.
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. currentCountse 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 />Vuelva a ejecutar la aplicación para ver los cambios. El componente Counter se mostrará en la página principal.
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
IncrementAmountcon un atributo[Parameter]. - Cambiar el método
IncrementCountpara utilizar elIncrementAmountcuando 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...
