Si está en un equipo Mac con un chip M1 de Apple, debe instalar la versión Arm64 del SDK.
Comprobar que todo está instalado correctamente
Una vez instalado, abra un nuevo símbolo del sistema y ejecute el siguiente comando:
Una vez instalado, abra un terminal new y ejecute el siguiente comando:
Command prompt
dotnet
Si la instalación se realizó correctamente, debería ver una salida similar a la siguiente:
Command prompt
Usage: dotnet [options]Usage: dotnet [path-to-application]Options:-h|--help Display help.--info Display .NET information.--list-sdks Display the installed SDKs.--list-runtimes Display the installed runtimes.path-to-application:The path to an application .dll file to execute.
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 comando del sistema. 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 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, utilice el botón Me encontré con un problema para obtener ayuda para solucionarlo.
Creación de la aplicación
En el símbolo del sistema, ejecute el siguiente comando para crear la aplicación:
En el terminal, ejecute el siguiente comando para crear la aplicación:
Command prompt
dotnet new blazorserver -o BlazorApp --no-https -f net7.0
Este comando crea su nuevo proyecto de aplicación 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:
Command prompt
cd BlazorApp
Eche un vistazo rápido al contenido del directorio BlazorApp. 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.
App.razor es el componente raíz de la aplicación.
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 Properties define diferentes configuraciones de perfil para el entorno de desarrollo local. Un número de puerto que oscila entre 5 000 y 5 300 se asigna automáticamente 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.
¿Tiene un error?
Si recibe un mensaje similar a No se pudo crear la plantilla "Blazor Server App". Se denegó el acceso a la ruta “C:\Windows\System32\BlazorApp”, cambie su directorio actual a uno donde tenga permisos para crear una nueva carpeta e intente ejecutar el comando de nuevo.
Si Windows no encuentra el SDK cuando intenta crear el proyecto y está seguro de haber instalado el SDK, su máquina podría tener un problema con la variable de entorno PATH. ConsulteStack Overflow post para obtener instrucciones sobre cómo diagnosticar y solucionar este problema.
Si no puede resolver el problema que tiene, seleccione el botón a continuación Me encontré con un problema para obtener ayuda para solucionar el problema.
Ejecutar la aplicación
En el símbolo del sistema, ejecute el siguiente comando:
En el terminal, ejecute el siguiente comando:
Command prompt
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.
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 Index.razor ubicado dentro del directorio Pages Este es el aspecto de su contenido:
Pages/Index.razor
@page "/"<PageTitle>Index</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" />
Ya contiene el código que lo establece como la página principal y muestra el texto Hello, world! y Welcome to your new app. También incluye un componente SurveyPrompt que representa un vínculo a la encuesta de comentarios de Blazor.
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 Pages.
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.
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 Index.razor en un editor de texto de su elección. El archivo Index.razor ya existe y se creó al ejecutar el comando dotnet new. Se encuentra en la carpeta 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 Index.razor.
Pages/Index.razor
@page "/"<PageTitle>Index</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" /><Counter />
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 el IncrementAmount cuando se incrementa el valor de currentCount.
En el código siguiente se muestra cómo lograrlo. Las líneas resaltadas muestran los cambios.
En Index.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:
Pages/Index.razor
@page "/"<h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" /><Counter IncrementAmount="10" />
El componente Index 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.
